実用ガイド · ウェブとコード
コントラスト比を、丸め誤差とテーマの違いまで確認する
違う色に見えても、文字が読みにくい組み合わせはあります。実際の文字色と背景色を測り、文字の大きさや画面の状態も確認しましょう。
1. 実際に表示される2色を調べる
文字と、その直後ろの背景色を確認します。同じ文字が複数の面に載るなら、パレットの代表色だけでは判断できません。
本ツールは不透明な16進2色を比べます。ページ全体を検査したり、透明度、画像、グラデーションの重なりを自動で再現したりはしません。
2. 文字に合う基準を選ぶ
WCAG AAの通常文字は4.5:1以上、大きな文字は3:1以上が基準です。見出しかどうかだけで区分せず、書体と太さを含む定義を確認します。
日本語の文字をラテン文字のポイント数だけで機械的に分類しないでください。大きな文字の条件が明確でない場合は、より厳しい4.5:1で確認すると判断しやすくなります。
コントラスト比チェッカー3. 数字と判定を一緒に読む
2色を入力し、対象の文字区分の判定を読みます。表示が小数2桁でも、しきい値の近くでは丸め前の差が残ります。
不足した値を切り上げて合格にしないでください。ツールは表示用に丸める前の値で判定するため、比率だけでなく判定表示も確認します。
4. 例：隣り合う灰色の値
白背景の#777777は約4.48:1で通常文字のAAを満たしません。#767676は約4.54:1でその基準を満たします。見た目の差は小さくても、条件は明確です。
同じ白に載せる2つの灰色
- 入力例
- 背景#FFFFFF、文字#777777または#767676
- 結果
- 約4.48:1は通常AAを満たさず、約4.54:1は満たす
色見本は説明用です。色、比率、判定を文章でも示し、見た目だけに意味を頼らないようにしています。
-
#777777と#FFFFFF
約4.48:1：通常文字のAAに不足。
-
#767676と#FFFFFF
約4.54:1：その基準を満たす。
5. テーマと状態ごとに試す
本文、リンク、補助文、ボタンの文字を実背景で試します。ダークテーマや関連する操作状態でも確認し、単純な色反転で十分とは考えないでください。
背景が変わる場合は、不利な組み合わせも含めて確認します。画像の1点だけから採った色では、面全体の読みやすさは判断できません。
| 条件 | 最小比率 |
|---|---|
| AA・通常文字 | 4.5:1 |
| AA・大きな文字 | 3:1 |
| AAA・通常文字 | 7:1 |
6. 比率以外の読みやすさも調べる
基準を満たす比率だけでアクセシビリティ全体を証明できません。文字の大きさ、太さ、間隔、意味、色だけで伝えていないかも点検します。
しきい値ぎりぎりなら余裕を増やすことも検討します。色で結果を表す場合は、文章や形でも同じ情報を伝えます。
これは例の入力値で、実際の事例の測定値ではありません。結果は実際のツールと同じ計算エンジンを使います。ガイドの計算手順と比較し、確認後にチェックを付けてください。
出典と確認方法
よくある質問
合格すればWCAG適合が証明されますか？
いいえ。入力した色と条件で、そのコントラストを検査した結果です。他の要件には別の確認が必要です。
半透明のレイヤーの色を入れてよいですか？
背景と合成された後の実効色が必要です。不透明な2色のテストでページ全体の重なりは自動計算しません。