このツールを使う場面
- ボタン・リンク・本文テキストの色を公開前に確認したいとき
- レビューで『文字が読みにくい』と言われたとき
- ブランドカラーを明暗両方の背景で検証したいとき
Contrast Checker
文字色と背景色を比較し、コントラスト比と WCAG アクセシビリティ基準を確認します。
使い方
- 前景色と背景色の HEX 値を入力するか、カラーピッカーで選択します。
- 「色を入れ替え」で前景色と背景色をすばやく交換できます。
- 下のコントラスト比と WCAG の合否結果を確認します。
6 桁の HEX を使用してください（例: #111827）。
6 桁の HEX を使用してください（例: #111827）。
コントラスト確認クイックガイド
このツールで可読性を素早く確認し、必要に応じて関連ガイドで改善手順を深掘りできます。
クイックステップ
- 文字色（前景）と背景色のHEXを入力します。
- 比率とWCAG AA/AAA結果を確認します。
- 主要テキストが合格するまで色を調整して再確認します。
よくあるミス
- 見出しだけ確認して本文の小さな文字を見ないこと
- 通常状態だけ確認してhover/focus/disabledを省くこと
- 比率を見ずに見た目の印象だけで判断すること
関連Contrast Checkerガイド
低コントラスト修正とアクセシブルなUI配色を学べる短い実践ガイドです。