色のコントラスト比チェック(WCAG)
文字色と背景色のコントラスト比を計算し、WCAGのアクセシビリティ基準(AA・AAA)を満たしているか判定します。
色のコントラスト比チェックについて
文字色と背景色のコントラスト比が低いと、文字が読みにくくなり、特に視力の弱い方や、高齢の方には大きな負担になります。ウェブのアクセシビリティの国際的な基準(WCAG)では、コントラスト比の最低基準が定められています。
通常の文字は、AAで4.5:1以上、AAAで7:1以上、大きな文字(18pt以上または太字14pt以上)は、AAで3:1以上、AAAで4.5:1以上が基準です。このツールは、2つの色のコントラスト比と、基準を満たしているかを表示し、サンプルテキストでも確認できます。
こんなときに使えます
- Webサイトの文字色と背景色の組み合わせを、チェックする
- アクセシビリティに配慮した配色を選ぶ
- スライドや資料の、読みやすさを確認する
使うときのポイント
- 薄いグレーの文字は、コントラスト比が不足しやすい
- 背景が画像のときは、文字の周りに色を付けるなどの工夫が必要
計算例
入力欄の初期値のまま計算すると、次の結果になります。条件は、文字色(HEX)が#333333、背景色(HEX)が#ffffffです。数値を変えると、この結果もそれに合わせて変わります。
| コントラスト比 | 12.63 : 1 |
|---|---|
| AA(通常の文字 4.5以上) | 合格 |
| AA(大きな文字 3以上) | 合格 |
| AAA(通常の文字 7以上) | 合格 |
| AAA(大きな文字 4.5以上) | 合格 |
使い方
- 文字色と背景色をHEXで入力します。
- コントラスト比と、基準を満たしているかが表示されます。
計算方法・仕組み
WCAG 2.xの定義にもとづき、各色の相対輝度 L から、コントラスト比 = (明るい方のL + 0.05) ÷ (暗い方のL + 0.05) を求めています。通常の文字はAAで4.5以上、AAAで7以上が基準です。
知っておきたい基礎知識
文字色と背景色のコントラスト比は、読みやすさを示す指標で、1:1(同じ色)から、21:1(白と黒)までの値をとります。WebアクセシビリティのガイドラインであるWCAGでは、通常の文字で、4.5:1以上(AA)、より高い基準では、7:1以上(AAA)が、求められています。大きな文字(約24px以上、または太字で約19px以上)は、AAで、3:1以上です。
コントラストが低い文字は、視力の弱い人や、高齢者、明るい屋外で、画面を見ている人にとって、読みにくくなります。デザインの見た目を優先して、薄いグレーの文字を使うと、基準を満たせないことがあります。公開前に、主要な文字色と背景色の組み合わせを確認しておくと、多くの人に、読みやすいサイトになります。
間違えやすいポイント
- 背景が、画像やグラデーションの場合は、一番コントラストが低い部分で、確認する
- ボタンの文字や、リンクの色も、基準の対象になる
- 色だけで、情報を伝えない。形や、ラベルも、あわせて使う
よくある質問
- AAとAAAは、どちらを満たせばよいですか?
- 多くの場合、AAが、実務上の、目安です。AAAは、より厳しい基準で、特定の用途や、利用者を想定するときに、目指します。
- グレーの文字は、どのくらいの濃さなら、問題ないですか?
- 白い背景で、AA(4.5:1)を満たすには、#767676より、濃いグレーが、目安です。