WCAG 2.2 対応のコントラストチェッカー。
文字色と背景色を入力すると、コントラスト比と、WCAG 2.2 の AA と AAA を満たすかどうかがわかります。ブラウザ内で動き、入力した内容がアップロードされることはありません。
コントラスト比
13.79:1
- 通常の文字 AA · 4.5:1合格
- 大きな文字 AA · 3:1合格
- 通常の文字 AAA · 7:1合格
- 大きな文字 AAA · 4.5:1合格
- アイコンと UI 部品 AA · 3:1合格
ブラウザ内で動作します。ここに追加したものはアップロードも保存もされません。
色のコントラストをチェックする方法
- 文字色を入力します。
#1F2A22や#333のような HEX コードで入力するか、色見本から選びます。 - 背景色も同じように入力します。 2 つの入力欄の間にある入れ替えボタンで、色を入れ替えられます。
- 結果を確認します。 比率は入力に合わせて更新され、サンプルには 24px と 15px で色が表示され、WCAG の各レベルに合格か不合格かが表示されます。
入力欄には、# の有無を問わず、3 桁か 6 桁の HEX コードを入力できます。半透明の色の場合は、背景の上で実際に見える不透明な色を入力してください。比率は切り捨てで表示されるので、4.50:1 と表示された組み合わせは確実に基準を満たしています。
WCAG 2.2 のコントラスト要件
| 対象 | AA | AAA |
|---|---|---|
| 通常の文字 | 4.5:1 | 7:1 |
| 大きな文字（24px、または太字で 18.66px） | 3:1 | 4.5:1 |
| アイコンと UI 部品 | 3:1 | なし |
文字の基準は、達成基準 1.4.3（AA）と 1.4.6（AAA）です。アイコン、入力欄の枠線、フォーカスインジケーターなどの操作部品は 1.4.11 の対象で、こちらには AA レベルしかありません。ロゴと無効化された操作部品の文字は対象外です。比率は 1:1（コントラストなし）から 21:1（白地に黒）までで、WCAG 2 の相対輝度の計算式で求めます。
Codex でアクセシブルなデザインシステムを作る
色を選んでいる段階なら、1 組ずつチェックすれば十分です。プロダクト全体を読みやすく保つには、デザインシステムが前提にしている組み合わせをチェックし、そのルールを Codex が従うものに組み込みましょう。
- 中心となる組み合わせをチェックする。 ページの背景の上の文字、カードの上の文字、メインカラーの上のボタンの文字、そして補足の文字に使う薄いグレー。最も不合格になりやすいのは、この薄いグレーの組み合わせです。
- ルールを DESIGN.md に書く。 DESIGN.md ジェネレーターは、primary の上の on-primary、または surface や neutral の上の on-surface が 4.5:1 を下回ると警告し、「文字のコントラストは WCAG AA（4.5:1）以上を保つ。」という一文をファイルに加えます。
- ファイルを lint する。 DESIGN.md のガイドで説明しているように、
npx @google/design.md lint DESIGN.mdでもコントラスト比をチェックできます。 - 完成した画面のチェックを Codex に頼む。 画像の上の文字、バッジ、プレースホルダーの文字など、新しい組み合わせが現れるからです。
[screen.html] のすべての文字色と背景色の組み合わせを、WCAG 2.2 AA に照らしてチェックしてください。基準は、通常の文字が 4.5:1、24px 以上（または太字で 18.66px 以上）の文字が 3:1、アイコン、入力欄の枠線、フォーカスリングが 3:1 です。不合格の組み合わせを比率とともにすべて挙げ、色相を保ったまま合格する最も近い色を提案してください。色は DESIGN.md にあるものだけを使うか、どのトークンを変える必要があるかを教えてください。
よくある質問
良いコントラスト比の目安は？
通常の文字で 4.5:1 以上、大きな文字、アイコン、操作部品で 3:1 以上です。これが WCAG AA で、ほとんどのアクセシビリティ方針が求めるレベルです。通常の文字で 7:1 以上なら AAA を満たし、最大は 21:1 です。
「大きな文字」とはどのくらいですか？
24px（18pt）以上の文字、または太字なら 18.66px（14pt）以上の文字です。
APCA を使っていますか？
いいえ。WCAG 2.2 への適合を測るのに使われる、WCAG 2 のコントラストの計算式を使っています。APCA は将来の WCAG 3 に向けて議論されている別の方法で、WCAG 2.2 には含まれません。
無料ですか？
はい。無料で登録も不要、入力した色はブラウザの中にとどまります。