テキストカラーシミュレーター
本文色・背景色・フォントサイズに加え、文中の3か所を別色・太字・下線でシミュレートできます。コントラスト比は WCAG 2.2 AA を基準に判定します。
全体設定
px
16.10 : 1コントラスト比
サンプル文
ウェブページでは、見出しの強調、本文中の重要語、さらにリンクテキストへ誘導する箇所など、複数のスタイルを組み合わせます。WordPress のカスタマイザーで設定する前に、背景色との関係を確認しましょう。
装飾
装飾1
5.02 : 1
装飾2
3.09 : 1
装飾3
4.51 : 1
コントラスト比について
背景色に対するコントラスト比です。薄い緑の○は合格、薄いオレンジの△は不合格を示します。
- 本文は、全体のフォントサイズが 24px 未満なら 4.5:1 以上、24px 以上なら 3:1 以上(WCAG 2.2 AA)。
- 装飾は、18px 以上かつ太字なら 3:1 以上、それ以外は本文と同じく 24px を境界に 4.5:1 または 3:1 以上です。
リンク色に関する参考記事