当サイトはアフィリエイト広告を利用してます

色のコントラスト比

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

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

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

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

文字色 #333333
背景色 #999999

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

 
ここの色が変わります
 

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

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

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

更新日:

  お気に入り

タグ:   科学  

↑このページへのリンクです。コピペしてご利用ください。