アクセシビリティ

WCAG に沿って文字色のコントラストをチェックする方法

前景色と背景色のコントラストを測り、AA と AAA の基準を理解して、基準を満たさない文字を勘に頼らず修正する方法。

公開日 2026/07/05 更新日 2026/07/29

読みやすいコントラストは、どちらか一方の色ではなく、前景色と背景色の組み合わせで決まります。WCAG のコントラストは 2 色の相対輝度を比較し、1:1 から 21:1 までの比率で表します。

基準値を知る

実際の組み合わせをカラーコントラストチェッカーに入力しましょう。通常、ホバー、無効、選択、訪問済み、フォーカスなど、意味のあるすべての状態をテストします。透明な色は、最終的な背景に合成してから測定する必要があります。

プロダクトの UI では、小さなコントラストのチェックリストを作ると便利です。本文、補足テキスト、リンク、ボタンのラベル、アイコンだけのボタン、フォームのボーダー、フォーカスリング、選択状態、ダークモードのバリエーション。「見た目は問題ない」と思える場所ほど、基準に届いていないことがよくあります。

まずは意図した色相を保ったまま明度を変えます。明るい面では文字を暗く、暗い面では文字を明るくします。チェッカーは近い AA 適合色を提案できますが、階層やブランドとの相性はデザイナーが確認しましょう。

ブラックとホワイトの組み合わせは最大の比率になりますが、すべての段落に最大のコントラストが必要なわけではありません。黒に近い文字でも十分に AA を満たし、目にやさしく読めます。

ブランドカラーが基準を満たさなくても、すぐにその色相をあきらめる必要はありません。まずは暗い、または明るい濃淡を試し、近いアクセシブルな色でブランドらしさを保てるか確認しましょう。

コントラストだけをアクセシビリティの確認にしてはいけません。リンクには色以外の手がかりが必要で、フォーカスインジケーターははっきり見える必要があり、状態の表示にはテキストやアイコンを添えるべきです。拡大表示やモバイルでのテストでは、数値では分からないレイアウトの問題も見つかります。

これらの測定は、HTML と CSS で文字色を設定するときに活用しましょう。