AAとAAAはどちらを目指すべきですか？

一般的なサイトはAA（本文4.5:1）を満たせば十分とされています。AAAは公共性の高いサイトや、高齢者の利用が多いサービスで目指す水準です。

背景が画像やグラデーションの場合は？

このツールは単色どうしの比較用です。背景が一様でない場合は、最も明るい部分と最も暗い部分の両方で確認し、どちらでも基準を満たす文字色を選んでください。

あります。周囲の文字と色だけで区別している場合、リンク色と本文色の間にも3:1以上のコントラストが必要とされます。下線を付ければこの制約はなくなります。

文字色と背景色を入れると、WCAGのコントラスト比を計算して読みやすさを判定します。小さい文字で読めるか、大きい見出しなら許容できるかを基準ごとに表示し、実際の見え方も確認できます。

文字色背景色

小さい文字での見え方（14px）

大きい見出しでの見え方

コントラスト比は、文字色と背景色の明るさの差を1:1から21:1までの数値で表したものです。白と黒の組み合わせが最大の21:1で、同じ色どうしなら1:1になります。

重要なのは、これが色の違いではなく明るさの違いを測っている点です。赤と緑のように見た目がまったく違う色でも、明るさが近ければコントラスト比は低くなり、読みにくくなります。色覚に特性のある人にとっては、なおさら判別できません。

ウェブアクセシビリティの国際的な指針（WCAG）では、本文に使う文字は4.5:1 以上が求められます。これは視力0.5程度の人が、拡大せずに読める水準として決められた数字です。

大きい文字（およそ18pt以上、または太字で14pt以上）は3:1まで許容されます。見出しは文字が大きいぶん判別しやすいためです。ただし、見出しだけ薄い色にするデザインはよく見かけますが、3:1を下回っていることも多いので確認する価値があります。

白背景に薄いグレーの文字を置くデザインは洗練されて見えますが、コントラスト比が足りていないことが非常に多いです。白（#ffffff）に対して、よく使われる #999999 は2.85:1しかなく、本文の基準を大きく下回ります。

本文で白背景を使うなら、文字色は少なくとも #767676 程度まで濃くする必要があります。上の入力欄で色を変えながら、実際の見え方と数値の両方を確認してみてください。

この基準はウェブページ向けに作られたものですが、考え方は画像の中の文字にもそのまま使えます。特にサムネイルは小さく表示されるため、背景写真の上に置いた文字が沈んでしまうと、内容が伝わる前に読み飛ばされます。

背景が写真の場合はコントラスト比を一律に計算できないので、文字に縁取りや影を付けるか、文字の下に帯を敷いて背景色を固定するのが確実です。

AAとAAAはどちらを目指すべきですか？: 一般的なサイトはAA（本文4.5:1）を満たせば十分とされています。AAAは公共性の高いサイトや、高齢者の利用が多いサービスで目指す水準です。
背景が画像やグラデーションの場合は？: このツールは単色どうしの比較用です。背景が一様でない場合は、最も明るい部分と最も暗い部分の両方で確認し、どちらでも基準を満たす文字色を選んでください。
リンクの色にも基準はありますか？: あります。周囲の文字と色だけで区別している場合、リンク色と本文色の間にも3:1以上のコントラストが必要とされます。下線を付ければこの制約はなくなります。