このツールが計算するもの
画面上の文字が背景からどれだけはっきり区別できるかを、WCAG(Web Content Accessibility Guidelines)2.xの達成基準1.4.3(コントラスト最低限、AA)と 1.4.6(コントラスト強化、AAA)が定める方法そのままに数値化します。入力した2色はsRGBとして扱い、HEXの3桁(#abc)と6桁(#aabbcc)に対応しています。 結果欄にはコントラスト比のほか、2色の相対輝度と計算の途中式も表示され、基準に届かない場合は文字色だけを必要最小限に暗く、または明るくして 適合する色を提案します。配色を一から考える作業はカラーパレットジェネレーターの役目で、このページは決まった組み合わせを点検するためのものです。
相対輝度の求め方
2色を比べる前に、まず各色の相対輝度L(0が黒、1が白)を求めます。手順は3段階です。
- R・G・Bをそれぞれ255で割り、0〜1の値sにします。
- ガンマ補正されたsRGB値を線形の光量に戻します。sが0.03928以下ならs ÷ 12.92、それより大きければ((s + 0.055) ÷ 1.055)の2.4乗です。暗い側は直線、その他はべき乗の曲線という構造です。
- 3つのチャンネルを目の感度に比例して合算します。L = 0.2126 × R + 0.7152 × G + 0.0722 × B で、係数はRec.709の原色に基づきます。
要点は、緑の係数が最も大きく、青が最も小さいことです。同じ255でも純色の緑(#00FF00)の輝度は0.7152、純色の青(#0000FF)は0.0722にとどまります。 「鮮やかに見える」ことと「コントラストが高い」ことは別物なのです。
細かい補足を一つ。sRGBの国際規格(IEC 61966-2-1)は境界値を0.04045と書きますが、WCAG 2.xの本文は0.03928を使っています。このツールはWCAGの値に従います。 0〜255の整数チャンネルでは両者の間に入る値がないため、どちらを使っても結果は同じです(256通りすべてで確認しました)。
コントラスト比の式と0.05の意味
コントラスト比 =(明るい色のL + 0.05)÷(暗い色のL + 0.05)です。両辺に足す0.05は、画面に映り込む周囲の光や、モニターの黒が完全な0ではないことを織り込んだ補正値です。 この補正により黒(L=0)と白(L=1)の比は1.05 ÷ 0.05 = 21となり、結果は必ず1:1から21:1の範囲に収まります。どちらが文字でどちらが背景かは結果に影響せず、 黒地に白文字でも白地に黒文字でも同じ21:1です。
適合基準の一覧
WCAGでいう「大きな文字」は、18pt(CSSの24px)以上、または太字で14pt(約18.67px)以上の文字です。1ptは1/72インチ、CSSの1pxは1/96インチなので、ptに96/72を掛けるとpxになります。
| 区分 | サイズの基準 | AA(最低限) | AAA(強化) |
|---|---|---|---|
| 通常のテキスト | 下の2つ以外のすべての文字 | 4.5 : 1 | 7 : 1 |
| 大きな文字(標準の太さ) | 18pt = 24px 以上 | 3 : 1 | 4.5 : 1 |
| 大きな文字(太字) | 14pt = 18.67px 以上 | 3 : 1 | 4.5 : 1 |
文字以外の要素には別の基準があります。達成基準1.4.11(非テキストのコントラスト、WCAG 2.1で追加)は、入力欄の枠線、チェックボックス、意味を持つアイコンなど、 操作部品や状態を伝えるUI要素を、隣り合う色と3:1以上で区別するよう求めています。上のツールの「UI部品・アイコン」のチップがこの基準を確認します。 また1.4.1(色の使用)は、色だけで情報を伝えないことを求めており、本文中のリンクなら周囲の文字と3:1以上離れた色にするか、下線などの手がかりを加える方法が知られています。
グレーの文字はどこまで薄くできるか
白背景でのグレー文字のコントラスト比です。ページのビルド時に計算した値で、小数第3位以下は切り上げず切り捨てています。
| 文字色 | 比 | AA 通常 | AAA 通常 | AA 大きな文字 |
|---|---|---|---|---|
| #595959 | 7.00 : 1 | 適合 | 適合 | 適合 |
| #767676 | 4.54 : 1 | 適合 | 不適合 | 適合 |
| #777777 | 4.47 : 1 | 不適合 | 不適合 | 適合 |
| #949494 | 3.03 : 1 | 不適合 | 不適合 | 適合 |
| #AAAAAA | 2.32 : 1 | 不適合 | 不適合 | 不適合 |
| #CCCCCC | 1.60 : 1 | 不適合 | 不適合 | 不適合 |
白背景でAA(通常、4.5:1)を満たす最も明るいグレーは#767676(4.54:1)で、ひとつ明るい#777777は4.47:1で届きません。目で見て違いはほとんど分かりませんが、 自動チェックは別の判定を出します。AAA(通常、7:1)を満たすには#595959(7.00:1)まで暗くする必要があります。プレースホルダーや補足文でよく使われる #AAAAAAは2.32:1で、大きな文字の基準3:1にも届きません。
純色やブランドカラーは意外と低い
| 文字色 | 背景 | 文字のL | 比 | AA 通常 | AA 大きな文字 |
|---|---|---|---|---|---|
| 純色の赤 #FF0000 | 白 | 0.2126 | 3.99 : 1 | 不適合 | 適合 |
| 純色の青 #0000FF | 白 | 0.0722 | 8.59 : 1 | 適合 | 適合 |
| 濃い緑 #008000 | 白 | 0.1544 | 5.13 : 1 | 適合 | 適合 |
| 純色の黄 #FFFF00 | 白 | 0.9278 | 1.07 : 1 | 不適合 | 不適合 |
| ゴールド #C9A961 | 白 | 0.4166 | 2.25 : 1 | 不適合 | 不適合 |
| ゴールド #C9A961 | 黒 | 0.4166 | 9.33 : 1 | 適合 | 適合 |
| 純色の青 #0000FF | 黒 | 0.0722 | 2.44 : 1 | 不適合 | 不適合 |
純色の赤は白背景で3.99:1です。四捨五入すると「4.00」に見えますが、通常テキストの基準4.5には遠く及ばないため、本文には使えません。 このツールが小数第2位を四捨五入でなく切り捨てにしているのも、4.496が「4.50 : 1 なのに不適合」と表示される矛盾を避けるためです。 反対に純色の青は白背景では8.59:1と高いのに、黒背景では2.44:1まで下がります。同じ色でも背景しだいで適合と不適合が入れ替わります。
計算例
例1 ― 濃い紺#1A1A2Eの文字、白背景。チャンネル値26・26・46を線形化するとR・Gは約0.0103、Bは約0.0273で、合算したLは0.0116です。 白のLは1なので、コントラスト比は(1 + 0.05)÷(0.0116 + 0.05)= 17.05 : 1。通常テキストのAAAにも余裕で適合します。
例2 ― 純色の赤#FF0000の文字、白背景。赤チャンネルだけが255なので、L = 0.2126 × 1 = 0.2126。比は1.05 ÷ 0.2626 = 3.99 : 1です。 大きな文字のAA(3:1)は満たしますが、通常テキストのAA(4.5:1)は不適合なので、エラーメッセージのような小さな文字に使うなら、より暗い赤に変えるのが安全です。
例3 ― ゴールド#C9A961。このLは0.4166で中程度の明るさです。白文字との比は2.25:1で3:1にも届きませんが、 黒文字なら9.33:1になります。白と黒のどちらが有利かは、背景のLが約0.179(= √(1.05 × 0.05) − 0.05)を境に入れ替わり、 それより明るい背景では黒文字が有利です。
適合色の提案のしくみ
基準に届かないとき、文字色を黒方向・白方向へ混ぜる割合を二分探索で絞り込み、目標(4.5:1または7:1)を初めて満たす最小の変更点を探します。 元の色の色相をできるだけ保つために明るさだけを動かし、2方向のうち変更量が小さいほうを選びます。背景が中間の明るさで、どちらの方向でも目標に届かない場合は 「文字色の調整だけでは達成できない」と表示するので、そのときは背景色も変える必要があります。提案色はあくまで出発点です。最終的な色はブランドガイドと合わせて判断してください。
よくある間違いとツールの限界
- 画像やグラデーションの上の文字:背景が単色でない場合、単一の比はあまり意味を持ちません。文字の背後の最も明るい箇所と最も暗い箇所の両方で確認してください。
- 透明度(opacity、RGBA):半透明の文字は、背景と重なった結果の実際の色に換算してから入力します。8桁のHEXには対応していません。
- 無効状態の部品・装飾・ロゴ:WCAGはこれらに最低コントラストを求めていませんが、無効であることが利用者に分かる必要はあります。
- ダークモード:ライトモードで適合した組み合わせが、ダークモードで自動的に適合するとは限りません。モードごとに確認します。
- 数値がすべてではない:細い書体、小さなサイズ、まぶしさは、同じ比でも読みやすさを下げます。比は最低ラインであって読みやすさの保証ではありません。WCAG 3.0の名で議論されている次世代の草案ではAPCAなど文字の太さやサイズを考慮する方式も検討されていますが、現在の一般的なチェックで使われているのはこのページのWCAG 2.xの式です。
- 色覚の違い:コントラスト比は明るさの差しか見ません。色相だけで情報を区別していると、見分けにくい人がいます。色覚テストで、見え方の幅を体験してみてください。
結果の使い方
- 本文、ボタンのラベル、入力欄の補足など「読ませる文字」は、通常テキストのAA(4.5:1)を最低目標にします。見出しのような大きな文字は3:1から認められます。
- 適合した色はCSSカスタムプロパティ1か所に定義しておくと、サイト全体で一貫して使えます。HEXをRGBやHSLに直したいときはカラーコンバーターが使えます。
- 「結果をコピー」で色の組み合わせ、比、各判定をテキストとしてコピーでき、デザイン資料やアクセシビリティの確認記録にそのまま貼れます。
- ウェブアクセシビリティへの対応要件は国や分野によって異なり、WCAGを参照するものも多くあります。記憶にある数値に頼らず、自分に適用される最新の規定と、そこで求められる版・適合レベルを確認してください。
よくある質問
明るさとコントラスト比は同じものですか?
違います。輝度は色ひとつの値で、コントラスト比は2色の輝度を比べた比率です。またWCAGの相対輝度はR・G・Bに0.2126、0.7152、0.0722を掛けるため、3チャンネルの単純平均とは違い、緑が明るさに最も大きく寄与します。
ロゴや装飾にもこの基準は適用されますか?
WCAG 1.4.3は、ロゴタイプ、純粋な装飾、無効状態のUI部品、写真に写り込んだ文字を例外としています。ただしアイコンボタンのように情報や操作を伝えるグラフィックは1.4.11の対象で、3:1が必要です。
4.5:1にわずかに届かないときはどうしますか?
4.49:1も基準上は不適合です。自動チェックや審査では四捨五入が認められないので、文字をもう少し暗くするか背景を明るくしてください。提案機能は適合する最も近い色を探します。
文字が「大きい」かどうかはどう判断しますか?
実際に描画されるサイズで判断します。18pt(24px)以上、または太字で14pt(約18.67px)以上なら大きな文字です。利用者がブラウザの文字サイズを変えられるため、迷うときは通常テキストの基準を当てはめるほうが安全です。
白と黒以外でコントラストが高い組み合わせは?
黒と白の21:1が理論上の最大です。完全な黒の代わりに、濃い紺や濃いグレーを白背景に使うと、例1のように17:1前後を確保しながら目への負担をやわらげられます。
入力した色はサーバーに送信されますか?
いいえ。計算はすべてブラウザ内で行われ、入力値が保存されたり送信されたりすることはありません。
関連ツール
- カラーパレットジェネレーター - 補色・類似色などの配色候補づくり
- カラーコンバーター - HEX・RGB・HSLの相互変換
- 色覚テスト - 色の見え方の違いを体験