コントラスト比とは何か
コントラスト比とは、文字色と背景色の明るさの差を数値化したものです。「1:1」は同じ色（全く見えない）、「21:1」は白と黒の組み合わせ（最大コントラスト）を意味します。コントラストが低いと、弱視の方や高齢者はもちろん、屋外でスマートフォンを見るときや照明の反射がある環境でも文字が読みにくくなります。
WCAG（Webコンテンツアクセシビリティガイドライン）では、達成基準に応じてコントラスト比の最低値を以下のように定めています。
| 基準 | 通常テキスト | 大きいテキスト（18px以上 or 14px太字） |
|---|---|---|
| AA（推奨最低基準） | 4.5:1以上 | 3:1以上 |
| AAA（より高い基準） | 7:1以上 | 4.5:1以上 |
一般的なWebサイトではAA準拠を目標にするのが現実的です。政府機関や医療・福祉関連サービスではAAAを目指すことが望ましいとされています。
NG例とOK例で理解するコントラスト
特に注意が必要なのは、プレースホルダーテキスト（入力欄のヒント文）とリンク色です。プレースホルダーは意図的に薄い色にしがちですが、最低でも3:1以上を確保してください。リンク色は背景色との比較だけでなく、周囲のテキスト色との区別も考慮が必要です。
色覚多様性への配慮
日本人男性の約5%、女性の約0.2%が何らかの色覚特性を持つとされています。赤と緑を区別しにくい方（1型・2型色覚）が多いため、「エラーは赤・成功は緑」という色だけの区別は避け、アイコンやテキストを合わせて使うことが重要です。
無料チェックツール
WebAIM Contrast Checker（webaim.org/resources/contrastchecker/）は、HEXカラーコードを入力するだけでAA/AAAの合否を即座に確認できる定番ツールです。
ブラウザの開発者ツールでも確認できます。ChromeのDevToolsでは要素を選択し、Accessibilityパネルを開くとコントラスト比が表示されます。
**Figmaプラグイン「Contrast」**は、デザイン段階でリアルタイムにコントラストをチェックできるため、デザイナーと制作会社の双方が確認しやすい環境を整えられます。
まとめ
コントラスト比はアクセシビリティの中でも最も実装しやすい対策の一つです。文字色と背景色の組み合わせをチェックするだけで、多くのユーザーにとって読みやすいサイトに近づきます。新規サイト制作はもちろん、既存サイトの部分改善としても取り組みやすいため、まず自社サイトのコントラストチェックから始めてみてください。