コントラスト比チェック

文字色と背景色のコントラスト比を計算し、WCAG（ウェブアクセシビリティ基準）に適合するかを判定します。2つのHEX値を入れると比率と合否が出て、実際の見え方もプレビューで確認できます。読みにくい配色を公開前に見つけられます。

使い方

1. 「文字色」と「背景色」にHEXコードを入力します。
2. コントラスト比と、AA・AAA それぞれの判定が表示されます。
3. プレビュー欄で実際の見え方を確認します。
4. 基準を満たさない場合は、背景か文字のどちらかの明度を動かして再確認します。

こんなときに

• サイトやアプリの配色が、アクセシビリティ要件を満たしているか確認したいとき。
• 薄いグレーの注釈テキストが読みにくいと指摘され、どこまで濃くすべきか決めたいとき。
• ブランドカラーの上に白文字を載せられるか、公開前に判断したいとき。
• 官公庁や教育機関向けの納品物で、WCAG適合が要件に入っているとき。

WCAG の基準値

コントラスト比は両色の相対輝度から求め、1:1（同色）から21:1（黒と白）の範囲を取ります。WCAG 2.1 のレベルAAは通常の本文で4.5:1以上、18ポイント以上または14ポイント太字以上の大きい文字では3:1以上を求めます。より厳しいAAAはそれぞれ7:1と4.5:1です。ボタンの枠線やアイコンなど文字以外のUI部品にも3:1の基準があります。注意点として、この比率は色覚特性の違いまでは評価しません。赤と緑のように輝度が近い組み合わせは比率上は通っても実際には判別しにくいことがあるため、色だけに意味を持たせない設計と併せて確認してください。

関連ツール

よくある質問

コントラスト比チェックはどのカラー形式に対応していますか?

HEX は 3 桁・6 桁・8 桁の各形式、そして RGB と RGBA、HSL と HSLA に対応しています。共通の内部表現を経て変換するため、形式を行き来しても値がずれません。

アクセシビリティ基準を満たすにはどのくらいのコントラスト比が必要ですか?

WCAG 2.1 の AA 等級は本文テキストに 4.5 対 1、大きいテキストに 3 対 1 を求めます。大きいテキストとは太字 18.66 ピクセルまたは通常 24 ピクセル以上を指します。AAA 等級ではそれぞれ 7 対 1 と 4.5 対 1 に上がります。

出力をそのまま CSS に貼り付けられますか?

はい。生成される値は正しい CSS の色指定なので、スタイルシートやデザイントークンのファイル、コンポーネントのインラインスタイルに手を加えずそのまま貼り付けられます。