AAとAAAの違いは何ですか？

どちらもWCAG（Webアクセシビリティの国際的な指針）の達成レベルです。AAは多くのサイトで目標とされる標準レベルで、通常文字は4.5:1以上が必要です。AAAはより厳しい最高レベルで、通常文字は7:1以上が必要になります。一般的なWebサイトではまずAAの達成を目指すのがおすすめです。

「大きい文字」の定義は何ですか？

WCAGでは、18ポイント以上の文字、または14ポイント以上の太字を「大きい文字（Large Text）」としています。CSSのピクセルに換算すると、おおよそ24px以上、太字なら約18.5px以上が目安です。大きい文字は判読しやすいため、基準が通常文字より緩く設定されています（AAで3:1以上）。

4.5:1を満たせないとき、どう調整すればよいですか？

色相（色味）はそのままに、明度を動かすのがコツです。文字色を暗く（または背景色を明るく）するだけで比率は大きく改善します。HSLのL（明度）の値を少しずつ変えて試すと、ブランドカラーの印象を保ったまま基準を満たしやすくなります。彩度を少し下げるのも有効です。

カラーコントラストチェッカー（WCAG）

文字色と背景色のコントラスト比と、WCAG基準を満たすかを確認できます。

文字色

#333333

rgb(51, 51, 51)

hsl(0, 0%, 20%)

背景色

#ffffff

rgb(255, 255, 255)

hsl(0, 0%, 100%)

大きい文字のサンプルです（24px）

通常文字のサンプルです。本文の読みやすさをこの大きさで確認できます（16px）。

コントラスト比 12.63 : 1

AA 通常文字 4.5 : 1 以上合格

AA 大きい文字 3 : 1 以上合格

AAA 通常文字 7 : 1 以上合格

AAA 大きい文字 4.5 : 1 以上合格

使い方

文字色と背景色を、カラーピッカーまたはHEXコード（#333333 など）で指定します。
コントラスト比とWCAGのAA・AAA判定がリアルタイムで更新されます。
「⇄ 入れ替え」で文字色と背景色を入れ替えて比較できます。RGB・HSLの値はそのままコピーしてCSSに使えます。

コントラスト比とは

コントラスト比は、2つの色の明るさ（相対輝度）の差を 1:1 〜 21:1 の数値で表したものです。 1:1 は同じ色、21:1 は黒と白の組み合わせを意味し、数値が大きいほど文字が読みやすくなります。このツールはWCAG 2で定められた正式な計算式（sRGBの相対輝度に基づく式）で算出しています。

なぜコントラストが重要なのか

十分なコントラストがないと、ロービジョン（弱視）の方や色覚特性のある方にとって文字が読み取れない場合があります。また、晴れた屋外でスマートフォンを見るときや、輝度を下げたディスプレイなど、誰にとっても読みにくい状況は日常的に発生します。 WCAGでは通常文字で 4.5:1 以上（AA）が基準とされており、公共機関のサイトや企業サイトでも達成が求められる場面が増えています。デザインの早い段階でコントラストを確認しておくと、あとからの手戻りを防げます。

WCAGの基準値まとめ

レベル	通常文字	大きい文字
AA	4.5 : 1 以上	3 : 1 以上
AAA	7 : 1 以上	4.5 : 1 以上

よくある質問

AAとAAAの違いは何ですか？: どちらもWCAG（Webアクセシビリティの国際的な指針）の達成レベルです。AAは多くのサイトで目標とされる標準レベルで、通常文字は4.5:1以上が必要です。AAAはより厳しい最高レベルで、通常文字は7:1以上が必要になります。一般的なWebサイトではまずAAの達成を目指すのがおすすめです。
「大きい文字」の定義は何ですか？: WCAGでは、18ポイント以上の文字、または14ポイント以上の太字を「大きい文字（Large Text）」としています。CSSのピクセルに換算すると、おおよそ24px以上、太字なら約18.5px以上が目安です。大きい文字は判読しやすいため、基準が通常文字より緩く設定されています（AAで3:1以上）。
4.5:1を満たせないとき、どう調整すればよいですか？: 色相（色味）はそのままに、明度を動かすのがコツです。文字色を暗く（または背景色を明るく）するだけで比率は大きく改善します。HSLのL（明度）の値を少しずつ変えて試すと、ブランドカラーの印象を保ったまま基準を満たしやすくなります。彩度を少し下げるのも有効です。