カラープリセット
よく使う配色をクリックして適用できます。
使い方
- 「前景色（文字色）」のカラーピッカーまたは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基準を目標にしましょう。
基準を満たしているのに読みにくい、という場合
コントラスト比は色の明るさの差だけを見ています。 4.5:1を満たしていても読みにくいことはあり、その原因は比率以外にあります。
- 細いフォントを使っている。 同じ色でも、線が細いほど背景に溶けます。 ウェイト300以下の書体を本文に使うなら、基準ぎりぎりではなく余裕を持たせてください。
- 彩度の高い色同士を組み合わせている。 赤と緑のように明度が近い有彩色は、比率上は通っても目が疲れます。 色覚特性によっては区別しにくい組み合わせでもあります。
- 背景が画像やグラデーション。 最も明るい部分と最も暗い部分で比率が変わります。 写真の上に文字を置くなら、半透明の帯を敷くのが確実です。
- 色だけで情報を伝えている。 必須項目を赤字だけで示す、グラフを色分けだけで区別する、といった作りは コントラストを満たしていても伝わりません。 記号や文言を併記してください（WCAG 1.4.1）。
どこまで満たすべきか
AAは多くの場面で実務上の目標とされる水準です。 日本では、行政機関のサイトがJIS X 8341-3の適合レベルAAを目標とすることが一般的で、 民間でも公共性の高いサービスはこれに準じています。
AAAは本文全体に適用すると配色の自由度がかなり下がります。 すべてをAAAにするより、本文はAAを確実に満たし、 小さな注釈や薄いグレーの補足テキストなど基準を割りやすい箇所を 潰していくほうが、実際の読みやすさは上がります。
見落としやすいのは、プレースホルダー・無効化されたボタン・ フォーカスの枠線です。これらは「薄くていいもの」と扱われがちですが、 プレースホルダーに入力例を書いているなら、それは読まれる必要のある文字です。
大きい文字の例外を正しく使う
18ポイント以上、または14ポイント以上の太字は「大きい文字」として扱われ、 AAの基準が3:1に緩和されます。CSSではおおよそ24px以上、 太字なら18.66px以上が該当します。
ただしこれは見出しのための例外です。 本文をこの例外に頼って薄くすると、拡大表示に依存する読者に負担がかかります。 緩和が使えるのは、あくまで単独で目立つ大きな文字の場合だと考えてください。
よくある質問
- このツールの計算方法は公式のWCAG基準と同じですか？
- はい。本ツールはWCAG 2.1仕様に定められた相対輝度（Relative Luminance）の計算式をそのまま実装しています。sRGBのガンマ補正を含めた正確な計算により、公式基準と同一のコントラスト比が算出されます。
- AA基準に合格すればアクセシビリティは万全ですか？
- コントラスト比はWebアクセシビリティを構成する要素の一つに過ぎません。AA基準への合格に加えて、代替テキストの設定・キーボード操作対応・見出し構造の適切さなど、他の基準も満たす必要があります。本ツールの合格表示だけでアクセシビリティ全体の適合を保証するものではありません。
- 半透明（アルファ値付き）の色は計算できますか？
- 現在のバージョンは#rrggbb形式の不透明な色のみに対応しています。半透明色を使う場合は、背景色と合成した後の実際に見える色をHEX値として算出してから入力してください。
- 「大きいテキスト」の基準（18pt以上・14pt以上Bold）とは何ですか？
- WCAG 2.1では文字サイズによって求められるコントラスト比の基準が異なります。18pt（約24px）以上、または太字（Bold）で14pt（約18.5px）以上のテキストは「大きいテキスト」に分類され、通常テキストより緩やかなAA基準3:1・AAA基準4.5:1が適用されます。
- 日本のJIS X 8341-3とはどう関係していますか？
- 日本産業規格JIS X 8341-3はWCAGに準拠して策定されており、コントラスト比の基準値もWCAG 2.1と同一です。本ツールでAA基準の合否を確認することで、JIS X 8341-3のレベルAAへの適合状況もあわせて参考にできます。
参照情報・免責事項
本ツールのコントラスト比計算式は W3C WCAG 2.1 達成基準 1.4.3（Understanding SC 1.4.3: Contrast Minimum） に基づいています。入力した色の情報はすべてお使いのブラウザ内のみで処理され、外部サーバーへのデータ送信は一切行いません。
免責事項：本ツールの判定結果はWCAG 2.1の計算式に基づく参考値です。実際のアクセシビリティ適合を保証するものではなく、法令・規格（障害者差別解消法、JIS X 8341-3等）への適合が必要な場合は、専門家による診断・監査を別途ご検討ください。