コントラスト比チェックツール

コントラスト比チェックツールの使い方

コントラスト比チェックツールは、文字色と背景色のコントラスト比を計算しWCAG基準の合否を判定できる無料ツールです。会員登録は不要で、入力内容はブラウザの外に送信されません。

1. 文字色と背景色をそれぞれ入力またはカラーピッカーで選びます。
2. プレビュー欄で実際の見た目を確認します。
3. コントラスト比とAA・AAA基準の合否が自動で表示されます。
4. 不合格の場合は色を調整し、基準を満たす組み合わせを探します。

WCAG基準について

WCAG（Web Content Accessibility Guidelines）2は、色覚特性やロービジョンの方でも文字を読み取れるよう、文字色と背景色のコントラスト比に基準を設けています。コントラスト比は1:1（同じ色）から21:1（黒と白）の範囲で、数値が大きいほど見分けやすくなります。

• レベルAA（推奨最低基準）：通常サイズの文字は4.5:1以上、大きな文字（18pt以上、太字なら14pt以上）は3:1以上。
• レベルAAA（高い基準）：通常サイズの文字は7:1以上、大きな文字は4.5:1以上。
• コントラスト比の計算は、各色をsRGBの相対輝度に変換してから比を求めるWCAG 2の公式アルゴリズムに基づいています。

よくあるつまずきポイント

• ロゴやアイコンなど装飾的な要素にはコントラスト基準は適用されません（本文・ボタンなど意味のあるテキストが対象です）。
• グラデーション背景の上に文字を置く場合、最もコントラストが低くなる箇所を基準に判定する必要があります。単色の背景色で確認する本ツールでは代表的な1色だけの判定になります。
• 薄いグレー文字（例：#999999）を白背景に使う場合、AA基準の4.5:1を下回ることが多く、可読性の観点でも避けたほうが無難です。