CSS配色テスター
背景 × 文字 — —
背景 × アクセント — —
プレビュー見出し
これは配色テスト用のサンプルテキストです。読みやすさを確認するため、複数行の文章を配置しています。背景色と文字色のコントラスト比が十分かどうかを目で確認できます。
—
このツールでできること
背景色・文字色・アクセント色の3色を指定してリアルタイムでデザインプレビューが確認できる配色テスターです。WCAG（Web Content Accessibility Guidelines）準拠のコントラスト比を自動計算し、AA・AAA基準を満たしているか判定します。CSSカスタムプロパティ形式のコードもコピーできます。
特徴
- 3色同時プレビュー — 背景・文字・アクセントを組み合わせた実際の見え方を確認できます。
- コントラスト比計算 — WCAG 2.1 のアルゴリズムで正確な比率（例: 4.5:1）を計算します。
- AA・AAA判定 — 通常テキスト・大きなテキストそれぞれの基準を満たすかを表示します。
- カラーピッカー + HEX入力 — ネイティブのカラーピッカーとHEXコードの両方で色を指定できます。
- CSSコード出力 — CSSカスタムプロパティ形式でそのままコピー可。
WCAG コントラスト基準
- AA（通常テキスト） — 4.5:1 以上
- AA（大きなテキスト） — 3:1 以上（18pt 以上または14pt太字）
- AAA（通常テキスト） — 7:1 以上
- AAA（大きなテキスト） — 4.5:1 以上
使い方
- 背景色・文字色・アクセント色をカラーピッカーまたはHEXコードで入力します。
- プレビューエリアで実際の見た目を確認します。
- コントラスト比の判定を見て、基準を満たすように色を調整します。
- 気に入った配色ができたら「コピー」ボタンでCSSコードをクリップボードにコピーします。
よくある質問
- コントラスト比はどう計算していますか？
- WCAG 2.1 の相対輝度（relative luminance）公式に基づいて計算しています。(L1 + 0.05) / (L2 + 0.05) の形で 1:1 〜 21:1 の範囲で算出します。
- 色覚多様性への配慮は？
- コントラスト比はアクセシビリティの一部です。赤緑色覚などの色覚多様性への配慮は別途シミュレータのご利用をおすすめします。
- HEX以外の色指定はできますか？
- 現在は HEX (#RRGGBB) のみ対応しています。RGB や HSL を使いたい場合はカラーコード変換ツールをご利用ください。
