無料オンラインコントラストチェッカー（WCAG）

WCAG AAでは、通常テキストは4.5:1以上、大きいテキストは3:1以上が必要です。アイコン、入力欄の枠線などのUI部品は、隣り合う色に対して3:1が必要です。AAAではテキストの基準が、通常テキスト7:1、大きいテキスト4.5:1に上がります。

各色の赤、緑、青の値を線形光に変換し、重みづけして相対輝度を求めます。比率は、明るいほうの輝度に0.05を足した値を、暗いほうの輝度に0.05を足した値で割ったものです。そのため、同じ色の1:1から、白地に黒の21:1までの範囲になります。

大きいテキストとは、標準の太さで18pt(24px)以上、または太字で14pt(約18.66px)以上の文字です。AAは3:1、AAAは4.5:1で足ります。このチェッカーはフォントサイズを尋ねないため、文字がその大きさの場合のみ、大きいテキストの行を参照してください。

ほとんどの法律や方針が基準とするのはAAです。EUのEN 301 549や、州・地方政府のウェブサイトを対象とする2024年の米国の規則はどちらもWCAG 2.1 AAを採用しています。AAAはより厳しく、長い読み物のテキストには良い目標になります。

テキスト以外の部品に対する3:1のルール、WCAG達成基準1.4.11を確認します。アイコンの色、入力欄の枠線、フォーカスリング、グラフの線などに使ってください。部品の色を文字色のボックスに、その背後の色を背景色のボックスに入力します。

画面上の比率は小数点以下2桁に丸めて表示していますが、判定にはWCAGの規定どおり正確な値を使っています。白地に対するグレー #959595 は2.995:1なので、3.00:1と表示されても3:1の行では不合格になります。合格するには、色を少し濃くしてください。

読み取れるのは、#の有無を問わず6桁の16進数コードのみです。#fffのような短縮コード、透明度つきの8桁コード、rgb()、hsl()、色名は0.00:1となり、すべての行が不合格になります。#fffは#ffffffと入力してください。#12345gのように文字を間違えると、警告なしに別の色として読み取られます。

21:1で、純粋な黒 #000000 と純粋な白 #ffffff の組み合わせです。同じ色どうしだと最小の1:1になります。ここでの初期設定の組み合わせ、白地に #1a1a1a は17.40:1、白地に中間グレーの #767676 は4.54:1で、AAの基準4.5:1をわずかに上回っています。

直接はできません。このツールは単色どうしを比較するためです。グラデーションや画像の上のテキストは、テキストの色と明るさがいちばん近い背景部分を探し、その色を背景として入力して確認してください。

いいえ。WCAG 2.1、WCAG 2.2、現行の法令が拠りどころとしているWCAG 2.xのコントラスト比を使用しています。APCAは将来のWCAG 3向けのドラフト段階の手法で、文字サイズや太さに応じて採点しますが、このツールでは計算しません。

はい。無料で、アカウントは不要、チェック回数の制限もありません。入力した色はブラウザー内にとどまり、保存されません。公開サイトでは、Google Analyticsが「Copy ratio」のクリック数だけを計測し、色や比率は計測しません。