COLOR CONTRAST DESK
その2色、読みやすく並んでいますか。
色コードを入れるだけ。コントラスト比と用途ごとの基準値を確認。
今の文字色を白・黒に近づけた候補を表示します。背景は固定し、「この文字色に変更」を押すまで元の色は変えません。
目標はこのタブだけの作業設定です。JSON・レポートには保存されません。
色の組み合わせ
#RGB / #RRGGBB · 不透明なsRGB色 · 最大12組
配色がありません。「配色を追加」から始められます。
色を変更すると、比率と判定がすぐに更新されます。
比率の読み方と、確認できる範囲
用途に合わせて基準値を確認
通常の文字：AA 4.5:1 ／ AAA 7:1
大きい文字：AA 3:1 ／ AAA 4.5:1
非テキスト：AA 3:1（適用条件あり）
大きい文字は原則18pt以上、または14pt以上の太字。日本語などCJK文字では使用フォントで同等の大きさか確認してください。
非テキストには条件があります
UI部品や状態の識別、内容理解に必要な図形と、その隣接色の関係が対象です。無効な部品などには例外があります。すべての装飾・境界に一律に適用するものではありません。
サイト全体の準拠判定ではありません
特定の不透明な2色の比率を確認するツールです。画像・半透明・グラデーション・重なった背景・広色域は非対応。文字サイズ、周辺の色、フォーカス状態、実際の見え方も確認してください。
比率は小数第2位まで表示します。判定は丸め前の値です。表示が4.50でも、計算値が4.5未満なら「基準値未満」になります。プレビューは見え方の参考です。
文字色候補の探し方
今の文字色を白・黒へ近づけ、RGBの各値を255段階で混ぜて確認します。目標に届く候補のうち、混ぜる段階が最小のものを表示します。同じ段階で両方が届く場合は黒側を選びます。見た目の変化が最小、または全色の中で最適という意味ではありません。黒・白でも目標に届かない背景では、背景色の変更を検討してください。
計算式とW3Cの出典
sRGBを線形化し、相対輝度から（明るい色の輝度 + 0.05）÷（暗い色の輝度 + 0.05）で計算します。