コントラスト判定ツール
色を二つ入れると比率が出て、WCAGが別々に評価する各サイズごとの判定も出ます。組み合わせが基準を満たさないときは、色相を動かさずに通る最も近い色を探すので、修正してもブランドから外れません。より新しいAPCAの数値は隣に並び、まだ標準ではないことを明示してあります。
| 使われる場所 | 必要値 | AA | AAA |
|---|
大きい文字、24px以上
通常サイズの本文。ほとんどのページが実際に通さなければならないのはこの場合です。
この比率が実際に測っているもの
各色はまず相対輝度に変換されます。sRGBのガンマカーブを戻したうえで、赤・緑・青のチャンネルを重み付けして足した値です。緑の重みがいちばん大きいのは、目が緑にもっとも敏感だからです。比率は、明るいほうの輝度に小さな定数を足したものを、暗いほうに同じ定数を足したもので割った値になります。この定数があるおかげで、純黒に対して目盛りが無限大へ飛ばずに済みます。そして同じ定数が、この式を暗い背景に対してたいていの人の目より寛容にしている原因でもあります。
同じ組み合わせに判定が複数つく理由
WCAGは色の組み合わせを一度だけ評価するわけではありません。大きい文字の基準が本文より低いのは、サイズがコントラストの仕事の一部を肩代わりするからです。さらにインターフェースの部品——チェックボックスの枠線、フォーカスリング——は別枠で評価されます。本文では落ちるパレットが見出しには申し分ないこともあるので、この表は単一の合否ではなく、すべての場合を並べています。
直すときに色相を保つ
基準を満たさない組み合わせへの通常の対処は、もっと暗いグレーに手を伸ばすことです。それはブランドから色を静かに抜き取っていきます。ここでの提案は明度だけを、しきい値を超える最小の幅で動かし、色相と彩度はあなたが置いた場所に残します。同じ色のまま、読める位置まで進めるだけです。
APCAの数値について
APCAは、次期版のガイドラインに向けて開発が進むコントラストのモデルです。WCAG 2の比率が扱わないもの——極性、文字の太さ、暗い背景で知覚コントラストが落ちていく様子——を織り込んでおり、古い式があなたの目と食い違う場面でも、たいていは目のほうと一致します。ここに表示しているのは実際に参考になるからで、はっきり但し書きを付けているのは、評価の基準がこれではないからです。今日の適合はあくまで比率であって、Lcではありません。
よくある質問
どこからが「大きい文字」ですか。
18ポイント、おおよそ24ピクセル、または14ポイントの太字、おおよそ18.66ピクセルの太字です。それ未満は通常の文字とみなされ、高いほうの比率が必要になります。
白背景では通るグレーが、暗い背景では落ちます。なぜですか。
WCAG 2の式は、知覚が対称であるようには対称になっていません。暗い背景に載る明るい文字は、比率が示すよりも目には低コントラストに見えます。これはAPCAが埋めようとした隙間のひとつです。暗い背景でぎりぎり通っているだけなら、自分の目を信じてもう少し足してください。
アイコンや境界線にも比率は当てはまりますか。
はい、3:1で、非テキストコントラストの規定に基づきます。対象は、操作するために見えている必要のある部品——入力欄の輪郭、トグル、フォーカス表示——であって、装飾的なグラフィックやロゴは含みません。
ここに入力した内容はどこかに送られますか？
いいえ。色がこのページを出ることはなく、送信も保存もされません。
GO AIチームが作りました。 OKLCHコンバーター · 当社のアクセシビリティ方針 · 無料ツール一覧