カラーコントラストチェッカー
文字の色と背景の色を入力すると、WCAG 2.2のコントラスト比、通常の文字と大きな文字、UIのグラフィックに対するAAとAAAの合否、そして合格する最も近い色が得られます。スライド、ポスター、図、Webページに使えます。ブラウザ内で動作し、アップロードはされません。無料で、登録は不要です。
コントラストの結果
4.47:1
コントラスト比
通常の文字 — 色の組み合わせを確認するための例文です（16px）。
大きな文字、24px（18pt）
太字の大きな文字、18.7px（14pt）
ボタンまたはアイコン
小数第2位で切り捨てて表示しています。WCAGは惜しい値を切り上げないため、4.499は4.5に不合格です。
| 要件 | 必要な比率 | 結果 |
|---|---|---|
| 通常の文字、AA（1.4.3） | 4.5:1 | 不合格 |
| 通常の文字、AAA（1.4.6） | 7:1 | 不合格 |
| 大きな文字、AA（1.4.3） | 3:1 | 合格 |
| 大きな文字、AAA（1.4.6） | 4.5:1 | 不合格 |
| UIコンポーネントとグラフィック、AA（1.4.11） | 3:1 | 合格 |
大きな文字とは、18pt（24px）以上の通常の太さ、または14pt（約18.7px）以上の太字を指します。スライドやポスターでは本文が大きいことが多いですが、脚注やキャプションは大きくないことがよくあります。
合格する推奨色
文字の色を変える
背景を変える
各推奨色は、色相と彩度を保ち、合格する最小の段階で明るさだけを変えています。
カラーコントラストチェッカーの使い方
- 1. 2色を入力します。 各色を16進数（
#777777）、rgb()、hsl()、CSSの色名のいずれかで入力するか、カラーピッカーを使います。入れ替え で2色を交換でき、明るい背景の暗い文字と、暗い背景の明るい文字の両方を確認するのに便利です。 - 2. 比率と表を読みます。 比率は1:1（同じ色）から21:1（白地の黒）までです。表では各WCAGの要件と比べ、色だけでなく言葉で「合格」または「不合格」を示します。
- 3. 大きさを判断します。 大きな文字は要件が低くなります。プレビューには通常の文字、大きな文字、太字の大きな文字、枠線付きのコントロールが表示されるので、ご自身の場合を判断できます。
- 4. 不合格の組み合わせを直します。 目標のレベルを選び、提案された文字色または背景色を使ってください。このツールは色相を保ったまま、合格する最小の段階で明るさだけを変えます。
WCAG 2.2の要件
Web コンテンツのアクセシビリティ・ガイドライン（WCAG）2.2は、3つの達成基準で最小のコントラスト比を定めています。比率は (L₁ + 0.05) ÷ (L₂ + 0.05) で、L₁は明るい方の色、L₂は暗い方の色の相対輝度です。
| 基準 | レベル | 通常の文字 | 大きな文字 |
|---|---|---|---|
| 1.4.3 コントラスト（最低限） | AA | 4.5:1 | 3:1 |
| 1.4.6 コントラスト（拡張） | AAA | 7:1 | 4.5:1 |
| 1.4.11 非テキストのコントラスト | AA | UIコンポーネントと意味を持つグラフィックは3:1 | — |
大きな文字は、18ポイント以上の通常の太さ、または14ポイント以上の太字です。96dpiの画面では24ピクセルと約18.7ピクセルに当たります。ロゴ、装飾目的のみの文字、非アクティブなコントロールは1.4.3の対象外です。1.4.11の3:1のルールは、コントロールを見つけるために必要な部分（ボタンの枠線、チェックボックスの輪郭）、フォーカスなどの状態、そして図の線など、読み手が内容を理解するために必要なグラフィックに適用されます。
比率の計算方法
各sRGBチャンネルを0〜1に換算し、線形化します。値が0.04045以下の場合は c ÷ 12.92、それ以外は ((c + 0.055) ÷ 1.055)2.4 です。相対輝度は 0.2126 R + 0.7152 G + 0.0722 B です。目は緑に最も敏感なため、緑の寄与が最も大きくなります。
0.03928の誤記について
WCAG 2.0と2.1は閾値を0.03928と記載しています。これはsRGB標準の初期草案の名残で、標準では0.04045を使います。WCAG 2.2の用語集では0.04045に修正されており、その差が実際の結果を変えることはないと注記しています。このチェッカーは0.04045を使います。
わずかに不合格になる組み合わせ
白地の#777777：4.48:1 — 通常の文字のAAには不合格（4.5:1が必要）ですが、大きな文字では合格です。
白地の#767676：4.54:1 — 白地でAAに合格する最も明るい灰色です。
白地の#0000ff：8.59:1 — AAAに合格します。白地の#ff0000：4.0:1 — 通常の文字のAAには不合格です。
WCAGでは四捨五入しません。4.4999は4.5に不合格です。そのためこのチェッカーは、比率を小数第2位で切り捨てて表示します。ぎりぎり不合格の組み合わせが合格と表示されることはありません。
スライド、ポスター、図の確認
- スライドやポスターはWebページではありませんが、 WCAGの比率は、それらにも広く認められた基準です。スライドの本文は通常大きな文字になります（24ピクセルは18ポイント）。キャプション、脚注、軸ラベルは大きな文字ではないため、通常の文字として確認してください。
- 投影には最低限より高い目標を。 明るい部屋のプロジェクターは、誰にとってもコントラストを下げます。明るい部屋で示すスライドの文字には、AAA（7:1）を選んでください。
- 写真やグラデーションの上の文字には、単一の背景がありません。文字の後ろの最も明るい部分と最も暗い部分を確認するか、文字を単色のパネルの上に置いてください。
- グラフや図は1.4.11の対象です。線、棒、マーカーは背景に対して3:1が必要です。意味を色だけで伝えるべきではありません。色覚多様性シミュレーターで確認してください。
- 半透明の色は、測定の前に平坦化されます。背景を白の上に重ね、次に文字を背景の上に重ねます。後ろに別のものがあるページでは、その色を直接入力する必要があります。
APCAについて
Accessible Perceptual Contrast Algorithm（APCA）は、WCAG 3の作業草案にある候補の手法で、文字の大きさ、太さ、極性を考慮します。これは草案であり要件ではなく、現在どの法律や規格もこれを求めていません。このツールで扱うWCAG 2.xの比率は、適合の主張の基礎であり続けています。
よくある質問
- 良いコントラスト比とは何ですか？
- 通常の文字でWCAG AAを満たすには4.5:1以上、AAAには7:1です。大きな文字はAAで3:1、AAAで4.5:1が必要です。白地の黒が最大の21:1です。3:1未満は、視力が良い人にとっても読みにくい場合が多いです。
- WCAGで大きな文字とされるのは何ですか？
- 通常の太さで18ポイント（24ピクセル）以上、または太字で14ポイント（約18.7ピクセル）以上の文字です。大きさは表示されたとおりに測ります。そのため、配布資料では小さく見えるスライドの文字も、投影すると大きな文字になることがあります。
- コントラストの要件はアイコンやグラフの線にも適用されますか？
- はい。達成基準1.4.11「非テキストのコントラスト」によります。内容を理解するために必要なUIコンポーネントやグラフィックは、隣接する色に対して少なくとも3:1が必要です。装飾的なグラフィックや非アクティブなコンポーネントは対象外です。
- ほぼ4.5なのに、なぜ4.49と表示されるのですか？
- WCAGは正確な比率で比べ、四捨五入を認めないためです。4.4999:1の組み合わせは4.5:1の要件に不合格になるので、このツールは4.50ではなく、小数第2位で切り捨てた値を表示します。
- 推奨色はどのように決まりますか？
- このツールは、お使いの色の色相と彩度を保ち、HSLの明るさを小さな段階で上下させます。目標の比率に達する最も近い値を、8ビットの16進数コードで返します。どの明るさでも届かない場合（例えば中間の灰色に対する7:1）は、その旨を示し、もう一方の色を変えるよう提案します。
- APCAはWCAGの比率より優れていますか？
- APCAは知覚をより正確にモデル化します。特にダークモードや細い文字の場合です。しかし、WCAG 3の草案の一部であり、認められた要件ではありません。WCAG 2.xを引用する法令や調達基準では、このツールで計算される比率が使われます。