色コントラストチェッカー
テキスト色と背景色のコントラストを、WCAG 2とAPCAに照らして確認できます。相対輝度からWCAG 2のコントラスト比を算出し、AAとAAAの通常サイズおよび大きなテキスト、UIグラフィックについて合格または不合格を表示します。また、APCAの明度コントラスト値と、その値の用途に関するガイダンスも示します。アクセシブルなインターフェースを構築するデザイナーや開発者向けです。
よくある質問
WCAGのレベルとは何ですか？
レベルAAでは通常サイズのテキストに4.5:1、大きなテキストに3:1が必要です（達成基準1.4.3）。レベルAAAでは7:1と4.5:1が必要です（1.4.6）。ユーザーインターフェースのコンポーネントと意味のあるグラフィックには、隣接する色に対して3:1が必要です（1.4.11）。このチェッカーは、これら5つのしきい値それぞれについて合格または不合格を表示します。
大きなテキストとはどのようなものですか？
WCAGでは、大きなテキストを、通常の太さで18ポイント以上（約24CSSピクセル）、または太字で14ポイント以上（約18.66CSSピクセル）と定義しています。それより小さいテキストはすべて通常サイズとみなされ、より高い比率が必要です。
4.499:1の比率がAAに合格しないのはなぜですか？
WCAGのしきい値は厳密です。4.5に丸められる比率でも、実際の値が4.5未満なら合格しません。このチェッカーは丸め前の比率を比較し、小数点以下2桁で切り捨てて表示するため、表示値が実際の値より良く見えることはありません。
APCAとは何ですか？
Accessible Perceptual Contrast Algorithm（アクセシブル知覚コントラストアルゴリズム）は、WCAG 3の草案向けに開発されたコントラスト方式です。知覚される明度のコントラストをモデル化し、テキストと背景を異なる方法で扱って、約-108から106までの明度コントラスト値Lcを返します。まだ公開済みのWCAG規格には含まれていないため、適合性の確認にはWCAG 2の結果を使い、APCAは追加のチェックとして利用してください。
APCAの値が負になることがあるのはなぜですか？
APCAは極性を考慮します。正の値は明るい背景に暗いテキスト、負の値は暗い背景に明るいテキストを示します。ガイダンスでは絶対値を使うため、Lc -75とLc 75は同じ段階に分類されます。
APCAのガイダンスの段階はどのように決められていますか？
APCA bronze simple modeに準拠しています。本文テキストにはLc 90が推奨値、Lc 75が最低値です。その他のコンテンツテキストにはLc 60、見出しや大きなテキストにはLc 45、プレースホルダーなど一目で読めるテキストにはLc 30、非テキスト要素にはLc 15が目安です。フォントサイズと太さも影響するため、これらの段階は判定結果ではなく出発点として扱ってください。
どのバージョンのAPCAが実装されていますか？
バージョン0.0.98 G、リビジョン4gのAPCA-W3定数を使用し、sRGBチャンネルに単純な2.4乗を適用しています。ソフトブラッククランプと低コントラストクリップも使用しています。白地に黒いテキストでは約Lc 106.0、黒地に白いテキストでは約Lc -107.9となり、参照実装と一致します。
どの色形式を入力できますか？
#の有無を問わない16進コード、CSS色名、rgb()、hsl()、hwb()、lab()、lch()、oklab()、display-p3などのoklch()色空間、color()、cmyk()を入力できます。どちらの数式もsRGB画面の色を対象としているため、sRGBの範囲外の色は、まずsRGBに変換されます。
透明色はどのように扱われますか？
半透明のテキスト色は、ブラウザーでの描画と同じように、測定前に背景色と合成されます。半透明の背景色は、まず白と合成されます。結果には、実際に比較した不透明なテキスト色と背景色が表示されます。
2つの色の順序は関係しますか？
WCAG 2では、明るい方と暗い方の輝度比は順序を入れ替えても同じなので、関係ありません。APCAではテキストと背景の重み付けが異なるため、順序が関係します。最初の欄にテキスト色、2つ目の欄に背景色を入力してください。