カラーコントラストチェッカー
比率はこのタブの中で計算します。アップロードなし。
コントラスト
通常の文字は 16px でこのように見えます。
大きな文字 24px
5.79:1
WCAG 2 のコントラスト：AA は通常文字 4.5:1、大きな文字 3:1。AAA は 7:1 と 4.5:1。非テキストは 3:1。
使い方
文字色と背景色の組み合わせを WCAG 2 の AA / AAA で判定します。アップロードなし。
コントラストチェッカーを開く
サンプルとしてクリーム地にピンクの組み合わせが入っています。右側に文字サンプルと、比率および合否の行。
色を入力
文字色と背景色を 16 進数で入力するか、カラーピッカーで選びます。「入れ替え」で 2 色を交換。
不合格の組み合わせを直す
通常文字が AA に満たないと、表の下に合格する最も近い文字色を提案します。コピーで比率と結果をクリップボードへ。
よくある質問
コントラスト比とは何ですか？
文字色と背景色の相対輝度を比べた値で、1:1（同じ色）から 21:1（白地に黒）までの尺度です。WCAG 2 で定義されています。
アップロードされますか？
いいえ。比率はこのタブの中で計算します。
どの比率が必要ですか？
WCAG AA は通常文字 4.5:1、大きな文字 3:1。AAA は 7:1 と 4.5:1。アイコン、枠線、フォーム部品は 3:1（非テキストコントラスト）が必要です。
大きな文字とは？
18pt（24px）以上の通常の太さ、または 14pt（約 18.7px）以上の太字です。
提案はどう決めていますか？
通常文字で AA に満たない場合、文字色を黒か白のうち効く方へ少しずつ寄せ、4.5:1 に達した色を出します。色相はできるだけ保ちます。