コントラスト比チェッカー

1から21までの1つの数値

文字が読めるのは、背景よりはっきり明るいか暗いときです。色相はほとんど関係ありません。純粋な赤と純粋な緑はまったく違う色ですが明るさはほぼ同じで、文字がちらついて見えます。そこでWCAGは相対輝度の差を測ります。色が目に届ける光の量を、0（黒）から1（白）の尺度で表したものです。

計算では、赤、緑、青の各チャンネルを保存された値から線形の光に変換し、目の感度に応じて3つに重みを付けます。

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)

結果のうち緑が70%以上、青は約7%を占めます。だから純粋な青#0000ffは暗い色のように、純粋な黄色は明るい色のようにふるまいます。同じ色同士なら1:1、白地に黒なら21:1です。文字と背景を入れ替えても比は変わりません。

基準値と適用範囲

法律や調達の規則が一般に求めるのはAAです。欧州規格EN 301 549や米国のSection 508もそうです。AAAは、長い文章を読む場所で目指すべき水準です。ロゴ、無効化されたコントロール、純粋に装飾的な文字は対象外です。

便利な目安はグレーの#767676で、白地で4.54:1になりAAに合格します。1段階明るい#777777は4.47:1で不合格です。

提案する色の選び方

通常サイズの文字が4.5:1に届かないとき、ツールは文字色を色相、彩度、明度に変換します。最初の2つはそのままにして、明度を0.5%ずつ暗い方向と明るい方向に交互に動かし、背景とのコントラスト比が4.5に届くまで続けます。最初に当たったものが合格する最も近い色なので、あなたの青は青のままです。中間色の背景などで、文字色の明度をどう変えても合格できないこともあります。その場合は背景を同じ方法で調整してみます。使用を選ぶと提案が適用されます。

難しいのは中間色の背景です。#808080のような中程度のグレーは、白に対して約3.9:1、黒に対して5.3:1なので、使えるのはとても暗い文字だけです。ブランドのオレンジや鮮やかな緑も、白い文字では同じ問題を抱えます。背景を暗くするか、暗い文字に切り替える必要があります。

色の入力と取り出し

どちらの欄も、ブラウザーがCSSの色として理解できるものなら何でも受け付けます。#1d3557、1d3557、rgb(29 53 87)、hsl(215 50% 23%)、tealのような色名などです。公開中のページから色を読み取るには、開発者ツールを開いて文字を選択し、計算済みのcolorとbackground-colorの値をコピーします。

ページのアドレスは変更のたびに?fg=1d3557&bg=ffffffの形で更新されます。これをコピーすれば、議論している組み合わせをそのまま同僚に送れます。ブランドのパレット全体を一度にテストするには、パレットのコントラスト表を使ってください。

コントラスト比からはわからないこと

• 透明度。アルファ値は無視します。半透明の文字は、画面に最終的に表示される混ざった色を測ってください。
• 画像とグラデーション。背景の写真には多くの色があります。文字の背後で一番明るい部分と一番暗い部分をテストするか、文字の下に単色のパネルを敷いてください。
• 基準未満のフォントの太さとサイズ。細い12 pxのフォントは4.6:1で書類上は合格でも、やはり読みにくいものです。
• ダークテーマ。WCAG 2の式は、暗い組み合わせの一部を過大評価することが知られています。暗い背景の明るい文字がぎりぎり合格なら、視覚シミュレーターなどで自分の目でも確かめてください。