当サイトはアフィリエイト広告を利用してます
色のコントラスト比
ウェブコンテンツアクセシビリティガイドライン(WCAG)では、文字と背景の間に、一定以上のコントラスト差があることが好ましい(可読性のため)とされています。
- 十分なコントラスト(評価AAA) : コントラスト比が7.0以上
- 最低限のコントラスト(評価AA) : コントラスト比が4.5以上
となっています。(文字サイズが大きい場合は、上の基準よりも緩くなります。詳しくはWCAGの記事参照)
実際に、文字色、背景色を設定して試してみましょう。
ここの色が変わります
| 点数 | 評価 |
|---|---|
| 7以上 | AAA |
| 4.5以上 7未満 | AA |
| 0.222以上 4.5未満 | 不十分です |
| 0.1428以上 0.222未満 | AA |
| 0.1428未満 | AAA |
コントラスト比が小さい場合、文字が読みにくくなることが分かると思います。
※コントラスト比の計算式では、一般色覚の場合を想定しています。色弱者の見え方については考慮していません。この計算式でコントラストが十分と判定された場合でも、色弱者にとって読みにくい場合がありますのでご注意ください。
更新日:
↑このページへのリンクです。コピペしてご利用ください。
