ウェブコンテンツアクセシビリティガイドライン(WCAG)では、文字と背景の間に、一定以上のコントラスト差があることが好ましい(可読性のため)とされています。

  • 十分なコントラスト(評価AAA) : コントラスト比が7.0以上
  • 最低限のコントラスト(評価AA) : コントラスト比が4.5以上

となっています。(文字サイズが大きい場合は、上の基準よりも緩くなります。詳しくはWCAGの記事参照)

実際に、文字色、背景色を設定して試してみましょう。

コントラスト比は です。
※文字色が明るい場合: 1より大きい
※背景色が明るい場合: 1より小さい

ここの色が変わります

点数評価
7以上 AAA
4.5以上 7未満AA
0.222以上 4.5未満不十分です
0.1428以上 0.222未満AA
0.1428未満AAA

コントラスト比が小さい場合、文字が読みにくくなることが分かると思います。

※コントラスト比の計算式では、一般色覚の場合を想定しています。色弱者の見え方については考慮していません。この計算式でコントラストが十分と判定された場合でも、色弱者にとって読みにくい場合がありますのでご注意ください。

関連計算式

- 当サイトの計算フォームは、自動見積フォーム「マイ見積」を利用しています。 -