カラーコントラストチェッカー
テキストと背景のあらゆる組み合わせについてWCAGのコントラスト比を測り、足りない場合は合格する色を見つけます。
入力色
変換する色を入力してください…
WCAG基準で色のコントラストを確認
コントラストの低いテキストは、Webで最もよく見られるアクセシビリティ上の問題の1つです。ロービジョンの人や色覚に特性のある人に影響するのはもちろん、日差しの下でスマートフォンを読む人も困ります。Web Content Accessibility Guidelines（WCAG）は、「十分に読みやすい」をコントラスト比という数値に置き換えています。
このページは、カラー変換ツールをコントラストタブで開きます。
WCAGの基準値一覧
| 確認する対象 | AA | AAA |
|---|---|---|
| 本文とラベル | 4.5:1 | 7:1 |
| 大きな文字（24px、太字なら18.7px） | 3:1 | 4.5:1 |
| アイコン、入力欄の枠、フォーカスリング、グラフの要素 | 3:1 | — |
AAは、多くの法律や調達基準が参照しているレベルです。AAAはより厳しく、長文を読ませる場面では目指す価値がありますが、サイトのすべての要素に求められるものではありません。
基準に届かない色の直し方
組み合わせが基準に届かない場合、チェッカーは背景に対して4.5:1に達する、同じ色相で最も近い色を提案します。ブランドカラーだと分かる状態を保ちながら、文字を読みやすくできます。よくある直し方は、文字色の明度を10〜20ポイント下げること、または大きな見出しやボタンにはブランドカラーを使い、小さな文字には暗めのバリエーションを使うことです。
よくある間違い
- 灰色のプレースホルダー：上品に見えても、4.5:1を大きく下回っていることがあります。
- 明るいブランドカラーの上の白い文字：オレンジ、黄色、明るい緑などです。
- ライトテーマだけを確認する：ダークモードにも個別の確認が必要です。
- 画像の上の文字：文字が重なりうる最も明るい部分で測るか、半透明の下地を敷いてください。
コントラスト比の計算式
sRGBの各チャンネルを0〜1に換算して線形化し、0.2126 R + 0.7152 G + 0.0722 Bとして合成すると相対輝度が得られます。コントラスト比は(L1 + 0.05) / (L2 + 0.05)で、L1は明るい方の色です。緑の係数が大きいのは人の目が緑に最も敏感だからで、白地に黄色がひどく不合格になるのもこのためです。テスト用に色を準備するには、HEXをRGBに変換で変換するか、HEXをHSLに変換で明度を調整してください。