「デザイン的にはおしゃれだけど、なんだか文字が読みにくい」——そんなWebサイトやアプリを見たことはありませんか？多くの場合、原因は文字色と背景色のコントラスト（明暗差）不足です。このガイドでは、コントラスト比とは何か、WCAG（Web Content Accessibility Guidelines）の基準、そして色を選ぶだけで合否判定できる無料ツールの使い方を解説します。
コントラスト比とは
コントラスト比は、2色の明るさの差を 1:1（差なし）〜21:1（黒と白の最大差） の数値で表したものです。数値が大きいほど文字が読みやすくなります。W3Cの計算式は、各色の相対輝度（relative luminance）を求めてから比を取るという少し複雑な計算ですが、ツールに色を入れるだけで自動計算されます。
WCAGのAA基準・AAA基準
| 対象 | AA（標準） | AAA（強化） |
|---|---|---|
| 通常テキスト | 4.5:1以上 | 7:1以上 |
| 大きいテキスト（18pt以上、または14pt太字以上） | 3:1以上 | 4.5:1以上 |
| UIコンポーネント・図形の境界線 | 3:1以上 | 規定なし |
多くの企業のアクセシビリティガイドラインやウェブアクセシビリティ基準（JIS X 8341-3など、WCAG 2.1準拠）で求められるのはAA基準です。AAAはより厳しい基準で、政府機関サイトや医療・金融など特に配慮が必要な場面で採用されることがあります。
なぜコントラストが重要なのか
低コントラストのテキストは、ロービジョン（弱視）の方や色覚特性を持つ方にとって読みづらいだけでなく、実は誰にとっても読みにくいものです。屋外でスマホ画面を見るとき、画面の明るさを落としているとき、単に疲れ目のときなど、健常者でも状況次第で低コントラストは読みにくくなります。コントラストを確保することは、一部の人のためではなく、すべてのユーザーの体験を底上げする施策です。
使い方
- 文字色（前景色）をカラーピッカーまたはHEXコードで指定
- 背景色を同様に指定
- プレビューエリアで実際の見え方を確認
- コントラスト比と、通常/大きいテキストそれぞれのAA/AAA判定結果を確認
- 不合格の場合は「⇅ Swap」で色を入れ替えたり、明度を調整して再チェック
不合格だったときの改善方法
コントラストが不足している場合、一般的には次のような調整で改善できます。
- 文字色を背景に対してより暗く（背景が明るい場合）、またはより明るく（背景が暗い場合）調整する
- 彩度の高い中間色同士の組み合わせ（例：オレンジ×黄緑）は明度差が出にくいので避ける
- ブランドカラーがどうしても低コントラストな場合は、本文には別の濃い色を使い、ブランドカラーはアクセントや大きい見出しに留める
- ダークモード対応時は、ライトモードとダークモードそれぞれで個別にコントラストを確認する
まとめ
コントラストチェックは、デザインの見た目を保ちながらアクセシビリティを向上できる、コストの低い改善策です。公開前のチェックリストに加えるだけで、視認性の問題を未然に防げます。配色を決める段階でツールを使い、AA基準（できればAAA基準）を満たしているか確認する習慣をつけましょう。