色のコントラスト比

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

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

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

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


ここの色が変わります

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

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

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

タグ:   科学