カラーコントラストチェッカー — WCAGアクセシビリティツール

カラーコントラストチェッカーの使い方

色の選択 — カラースウォッチをクリックするとブラウザ標準のカラーピッカーが開きます。HEX欄に直接入力することも可能です。HEX・RGB・HSLのタブで入力形式を切り替えられ、値は常に同期されます。

コントラスト比の確認 — 大きな数値がリアルタイムで更新されます。AA通常文字（4.5:1以上）、AA大きい文字（3:1以上）、AAA通常文字（7:1以上）、AAA大きい文字（4.5:1以上）の4基準に対して合格・不合格を表示します。

ライブプレビューの活用 — 見出し・大きいテキスト・通常本文の3サイズで実際の表示を確認できます。公開前にここで視認性を確かめましょう。

改善提案の適用 — AA基準を満たしていない場合、前景色または背景色を明るく・暗くした代替案が自動生成されます。候補をクリックすると即座に適用されます。

色覚シミュレーション — 通常の色覚、1型（赤色弱）、2型（緑色弱）、3型（青色弱）の4パターンで見え方を確認できます。コントラスト比が高くても色覚多様性によって識別しにくい組み合わせがあるため、実際の見え方の確認が重要です。

入れ替えボタン — 前景色と背景色を一瞬で交換します。ライトテーマとダークテーマを素早く比較できます。

ランダム生成 — WCAG AA基準を満たす配色ペアをランダムに提案します。デザインのアイデア出しにご活用ください。

WCAG 2.1 コントラスト基準について

WCAG（Web Content Accessibility Guidelines）は、W3C（World Wide Web Consortium）が策定するWebアクセシビリティの国際標準です。コントラスト比は2つの色の「相対輝度」の比率として計算され、数値が大きいほどコントラストが強くなります。

AA基準（最低限の要件） は、通常テキスト（18px未満、または14px未満のボールド）で 4.5:1以上、大きいテキスト（18px以上、または14px以上のボールド）で 3:1以上 が必要です。日本の「JIS X 8341-3:2016」やEU・米国の法律でも参照される実質的な国際標準であり、Webサイト公開時の最低ラインと言えます。

AAA基準（より高い水準） は、通常テキストで 7:1以上、大きいテキストで 4.5:1以上 が求められます。医療・行政・金融など、情報の正確な伝達が特に重要な場面での適用が推奨されます。

色覚多様性への配慮 も欠かせません。日本人男性の約5%、女性の約0.2%が色覚多様性を持つとされています。最も多いのは2型色覚（緑色弱）で、赤と緑の区別が難しい方が多くいます。色だけで情報を伝えることを避け、十分なコントラスト比と形・ラベルの組み合わせによる設計が重要です。

関連ツール

カラーピッカー → カラーピッカー

配色パレット生成 → カラーパレットジェネレーター

グラデーション作成 → CSSグラデーションジェネレーター

デザイナー・Web制作者の経理を効率化

クリエイティブな制作業務に集中したいのに、請求書作成・経費管理・確定申告の準備に時間を取られていませんか？クラウド会計ソフト「freee」なら、バックオフィス業務を大幅に削減できます。