セオツールズ

テキストカラーシミュレーター

本文色・背景色・フォントサイズに加え、文中の3か所を別色・太字・下線でシミュレートできます。コントラスト比は WCAG 2.2 AA を基準に判定します。

全体設定

px

サンプル文

ウェブページでは、見出しの強調、本文中の重要語、さらにリンクテキストへ誘導する箇所など、複数のスタイルを組み合わせます。WordPress のカスタマイザーで設定する前に、背景色との関係を確認しましょう。

装飾

装飾1

装飾1 スタイル

装飾2

装飾2 スタイル

装飾3

装飾3 スタイル

コントラスト比について

背景色に対するコントラスト比です。薄い緑の○は合格、薄いオレンジの△は不合格を示します。

  • 本文は、全体のフォントサイズが 24px 未満なら 4.5:1 以上、24px 以上なら 3:1 以上(WCAG 2.2 AA)。
  • 装飾は、18px 以上かつ太字なら 3:1 以上、それ以外は本文と同じく 24px を境界に 4.5:1 または 3:1 以上です。

リンク色に関する参考記事