コントラストチェッカー
コントラストチェッカーは、テキストの色をその背景に対して測定し、WCAG 2.2のコントラスト比と合格するレベル、さらにAPCAの明度コントラストを併せて報告します。測定の前に半透明の前景色を合成します。多くのチェッカーがブラウザの判定と食い違うのはこのためです。ペアが不合格のときは、OKLChで明度を動かして最も近い合格色を探すため、結果は最初の色相を保ったままになります。
比率5.13:1
これは通常サイズの本文の例です。WCAG で通常のテキストとされる大きさで表示しています。
こちらは大きな文字です。
本文：通常の太さでは 18pt（24 CSS px）未満、太字では 14pt（約 18.67 CSS px）未満。WCAG 1.4.3。
同じ文字サイズに対するより高い基準です。WCAG 1.4.6。
通常の太さでは 18pt（24 CSS px）以上、太字では 14pt（約 18.67 CSS px）以上。WCAG 1.4.3。
アイコン、フォーカス枠、入力欄の境界、グラフの凡例。WCAG 1.4.11。
標準の太さなら 18px 以上の本文に適しています。 APCA は WCAG 3 の草案段階のモデルで、合否の判定はありません。数値から適切な文字サイズと太さを判断します。
5.13:1#6d6d74#ffffffコントラストチェッカーはどう動きますか？
コントラストは、2つの相対輝度の比です。各チャンネルはsRGBのエンコードから取り出されます。これはIEC 61966-2-1の区分線形の伝達関数であって、単純なガンマ2.2ではありません。その後、赤0.2126、緑0.7152、青0.0722の重みが付けられます。これは、人が明るさと感じるものへの、各成分のおおよその寄与です。2つの輝度は(lighter + 0.05) / (darker + 0.05)の式に入ります。この0.05は、画面が部屋の光を反射する分を表すフレア許容値です。
半透明の色を先に合成する理由
アルファ50%の色には、それ自身のコントラスト比が存在しません。読み手に見えるのは、その色と背後の何かとのブレンドであり、測定されるのもそのブレンドです。この工程を省くチェッカーは、ブレンドしていない色の比を報告します。それは常に実態より良い数値であり、ツールの判定がブラウザ自身のインスペクターと食い違う最もよくある原因です。
WCAG 2.xが誤りだと分かっている場合
2.xの計算式は可読性の研究から導かれたものではありません。単純な輝度比であり、両方向で失敗します。誰にも読めない白背景の薄いグレーの一部を合格とし、完全に読める暗い色のペアの一部を不合格にします。さらに、白地に黒と黒地に白を、どちらも21:1で同一視します。しかし同じ比でも、暗い背景に置かれた明るいテキストの方が、測定上は読みにくいのです。
APCAは、WCAG 3ドラフトの基盤となっているモデルです。極性を考慮しており、数値の符号がペアのどちら向きかを示します。また、比ではなく明度コントラスト値（Lc）を返します。ここでは2.xの比と併せて表示し、決して置き換えにはしません。適合は依然として2.xに対して測られるためで、密かに指標をすり替えるツールは、実は合格していない監査に合格したと人々に伝えることになるからです。
提案色の見つけ方
ペアが不合格のときは、OKLChで色相とクロマを固定したまま明度を動かして、最も近い合格色が見つけられます。代わりにsRGBのチャンネルを動かすと、色が暗くなるにつれて色相がずれ、提案色がパレットの色とは別の色になってしまいます。探索はまず背景から離れる方向へ進みます。明るいページなら暗く、暗いページなら明るく。これにより、暗いブランドカラーは白に近い色へ反転する代わりに、暗いまま保たれます。
2つの色
foreground #6d6d74 background #ffffff
表示される内容
ratio 5.13 : 1 normal AA pass (needs 4.5) normal AAA fail (needs 7) large AA pass (needs 3) APCA Lc 75.4
コントラストチェッカーが対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| 4.5:1 | AA | 1.4.3 | 通常のテキスト：通常の太さでは 18pt（24 CSS px）未満、太字では 14pt（約 18.67 CSS px）未満。レベル AA では 4.5:1 以上が必要です。 |
| 3:1 | AA | 1.4.3 | 大きなテキスト：通常の太さでは 18pt（24 CSS px）以上、太字では 14pt（約 18.67 CSS px）以上。親要素の宣言ではなく、計算済みのフォントサイズと太さを使用します。 |
| 7:1 | AAA | 1.4.6 | 通常のテキストの強化コントラスト。公的部門の調達以外ではほとんど要求されず、ブランドパレットでは達成が難しい場合があります。 |
| 3:1 | AA | 1.4.11 | 非テキスト：アイコン、フォーカスインジケーター、入力フィールドの境界線、チャートの系列、ボタンの境界線。WCAG 2.1で追加され、今でも最も見逃されやすいルールです。 |
| Lc 60 | APCA | ドラフト | 16pxの太字または24pxの通常テキストが快適になる程度。APCAには合格・不合格の概念がなく、数値がサイズと太さに対応します。 |
| Lc 90 | APCA | ドラフト | どんなサイズと太さにも対応できる十分なコントラスト。細いフォントや長い本文にも対応します。 |
| アルファ | 0–1 | 1 | 半透明の前景色は、測定前に背景に合成されます。なぜなら、それが読者が実際に見るものだからです。 |
| 無効なテキスト | — | 除外 | WCAGは非アクティブなコントロールを1.4.3の要件から完全に除外しています。非読み取り可能なままにすることは法的に許可されていますが、修正することに価値があります。 |
よくある質問
WCAGに合格するには、コントラスト比はどのくらい必要ですか？
レベル AA では、通常のテキストは 4.5:1、大きなテキストは 3:1 以上が必要です。大きなテキストとは、通常の太さで 18pt（24 CSS px）以上、または太字で 14pt（約 18.67 CSS px）以上を指します。レベル AAA では、それぞれ 7:1 と 4.5:1 に引き上げられます。WCAG 1.4.11 は別途、UI コンポーネントとその状態を識別するために必要な視覚情報、およびグラフィックの意味を持つ部分に 3:1 以上を求めています。ただし、同基準で定める例外が適用されます。
このツールが別のチェッカーと違う比を表示するのはなぜですか？
ほとんどの場合、原因はアルファです。不透明度が100%未満の前景色には、それ自身の比がありません。読み手に見えるのは背景とブレンドされた色であり、測定されるのもそのブレンドです。このツールは先に合成しますが、いくつかの有名なチェッカーはそうしておらず、ページの実態よりも良い比を報告します。両方の色が不透明なのに数値が違う場合は、どちらか一方がsRGBの区分線形の伝達関数ではなく、単純なガンマ2.2を使っています。
14pxのフォントに4.5:1は十分ですか？
AAが要求する値ではありますが、ぎりぎりの水準です。4.5:1は目標ではなく最低値として定められました。14pxで細字、屋外のスマートフォンなら、実際かなり読むのが難しいものです。重要なテキストなら7:1超を目指すか、サイズを上げてください。この用途では、すべてのテキストを同じに扱う2.xの比よりも、数値をサイズとウェイトに結び付けるAPCAの方が有用です。
APCAとWCAG 2.x、どちらを使うべきですか？
目的が違うので、両方です。今日、適合の判定に使われているのはWCAG 2.xであり、報告すべきはその値です。実際に読めるかどうかのより良い指標はAPCAで、標準もそちらへ向かっています。両者が食い違う場所（たいてい白背景の薄いグレーか、暗い背景上の中間トーン）では、自分の目で確かめるならAPCAを信頼してください。
無効なボタンやプレースホルダーテキストにもコントラストは適用されますか？
無効化されたコントロールは、WCAG 1.4.3の適用を丸ごと免除されます。プレースホルダーテキストは免除されません。これもテキストであり、情報を運ぶものなので、本文と同じく4.5:1が必要です。2.5:1前後のグレーのプレースホルダーというよくあるパターンは不合格であり、不合格を食らうのは、まさにそのヒントを最も必要としている人々です。
透明度のある色でも使えますか？
使えます。8桁のhexかrgbaの値を入力すると、比を計算する前に、前景色が背景の上へ合成されます。これはブラウザが実際に描画する色です。合成後の色も表示されるため、比が実際どの値を指しているのか目で確認できます。