カラーコード・コントラストチェッカー

カラーコードのコントラストをチェックする方法

1. 前景色と背景色にHEXコードを入力するか、カラーピッカーで選びます。
2. コントラスト比と4種類の判定を確認します。
3. 本文・大きなテキスト・ボタンのプレビューで見え方を確認します。
4. 必要な色形式またはCSSコードをコピーして制作中の画面に使います。

文字色と背景色の組み合わせを確認する

コントラスト比は、明るい色と暗い色の相対輝度から求める比率です。数値が大きいほど、文字色と背景色の明るさの差が大きくなります。このツールではWCAG 2.2の計算方法に従い、sRGBを線形化して計算します。

WCAG 2.2のAA・AAA基準

AAは幅広い場面で求められる基準、AAAはさらに高い読みやすさを目指す基準です。目的、文字サイズ、利用環境に合わせて判断してください。通常テキストのAAは4.5:1以上、AAAは7:1以上です。

通常テキストと大きなテキスト

WCAGでは、大きなテキストを原則として18pt以上、または太字で14pt以上（CSSピクセル換算ではおおむね24px以上、太字で約18.66px以上）と説明しています。実際の文字サイズ、太さ、書体も確認してください。

HEX・RGB・HSL形式とCSS

前景色と背景色はHEX、RGB、HSL形式で確認でき、必要な表記をコピーできます。CSSコードも合わせて出力できるため、配色を実装へ反映するときに便利です。

Web制作・デザインのアクセシビリティ確認

Web本文の文字色と背景色、送信ボタンのラベル、管理画面のステータス表示、アプリUIの操作ラベルなどを確認できます。色だけで状態を伝えるUIでは、アイコンや文言も併用してください。

計算仕様と注意事項

判定は不透明な2色の組み合わせを対象にします。透明度付きカラー、グラデーション、画像上の文字はMVPの対象外です。また、コントラスト比の合格だけで、操作性、代替テキスト、見出し構造を含むアクセシビリティ全体への準拠を保証するものではありません。