カラープリセット
よく使う配色をクリックして適用できます。
使い方
- 「前景色（文字色）」のカラーピッカーまたはHEX入力欄で文字の色を選んでください。
- 「背景色」のカラーピッカーまたはHEX入力欄で背景の色を選んでください。
- コントラスト比と各WCAG基準の合否がリアルタイムで更新されます。
- 中央の矢印ボタンで前景色と背景色を入れ替えられます。
- よく使う配色はカラープリセットから1クリックで適用できます。
- プレビューエリアで実際の見た目を確認しながら配色を調整してください。
WCAGコントラスト比とは
WCAG（Web Content Accessibility Guidelines）はW3Cが定めるWebアクセシビリティのガイドラインです。コントラスト比とは、前景色（文字色）と背景色の明るさの差を数値化したもので、1:1（差なし）から21:1（白と黒）の範囲で表されます。コントラスト比が高いほど、弱視や色覚特性のある方でも読みやすくなります。
WCAG 2.1 では通常テキストにAA基準4.5:1・AAA基準7:1、大きいテキスト（18pt以上または14pt以上Bold）にはAA基準3:1・AAA基準4.5:1が求められています。UIコンポーネントやグラフィックの境界線はAA基準3:1が必要です。日本のJIS X 8341-3もWCAGに準拠しており、公共機関・企業サイトでのAA準拠が推奨されています。
相対輝度（Relative Luminance）の計算方法
このツールはWCAG 2.1仕様の相対輝度計算式を正確に実装しています。各RGB成分を0〜1に正規化し、ガンマ補正（sRGB → 線形RGB変換）を施してから輝度に変換します。コントラスト比は（明るい色の輝度 + 0.05）÷（暗い色の輝度 + 0.05）で算出されます。HEX値をそのまま入力するだけで正確な計算が行われます。
AA基準とAAA基準の違い
AA基準はWCAGの「適合レベルAA」で、多くの公共・企業サイトが目標とする標準的な基準です。AAA基準はより厳格な「適合レベルAAA」で、すべてのコンテンツでの達成は困難ですが、重要な情報や見出しで達成することが推奨されます。まずAA基準のクリアを目指し、余裕があればAAA基準を目標にしましょう。
プライバシーについて
入力した色の情報はすべてお使いのブラウザ内のみで処理されます。外部サーバーへのデータ送信は一切行いません。