♿ アクセシブルカラーパレット生成
基準となる色を1つ選ぶだけで、その色相を保ったまま明度を変化させた10段階のカラーパレットを生成し、それぞれの色と白テキスト・黒テキストとのコントラスト比(WCAG 2.1基準)を同時に確認できるツールです。コントラスト比が4.5:1以上の組み合わせには合格マークが表示されます。Webサイトやアプリのアクセシブルな配色を検討する際に便利です。
使い方
- カラーピッカーまたはHEXコード入力欄で基準となる色を選びます。
- 10段階の明度パレットが自動的に生成されます。
- 各色をクリックするとHEXコードがコピーされます。バッジは白・黒テキストそれぞれとのコントラスト比とWCAG AA基準(4.5:1以上)の合否を示します。
計算の仕組み
このツールは、基本の色1つから明るさの違う10段階の色（パレット）を作り、それぞれの色について、白・黒の背景とのコントラスト比を表示します。 1. 基本の色をHSL（色相・彩度・明度）に変換します。 2. 色相と彩度はそのままで、明度を95%から8%まで10段階に変えた色を作ります。 3. 各色と白・黒とのコントラスト比を、WCAG 2.xの式で計算します。 コントラスト比 ＝ (明るい方の相対輝度 ＋ 0.05) ÷ (暗い方の相対輝度 ＋ 0.05) WCAGでは、通常の文字は4.5:1以上（AA）、7:1以上（AAA）、大きな文字は3:1以上（AA）が基準です。どの明るさの色なら白い背景の文字に使えるか、黒い背景なら使えるかを一目で確認できます。
計算例
基本の色 #2563eb（色相221°、彩度83%）の場合 明度65%: #5c8af0 → 白とのコントラスト比 3.31（大きな文字のみAA） 明度55%: #2d69ec → 4.86（通常の文字でもAA） 明度45%: #134fd2 → 6.81（AA） 明度35%: #0f3ea3 → 9.41（AAA） 白い背景の本文には明度45%より暗い色、黒い背景の本文には明度65%より明るい色が使えることがわかります。
使用上の注意
- HSLの明度が同じでも、色相によって見た目の明るさは大きく違います（黄色は明るく、青は暗く見えます）。そのため、色相によっては同じ段階でもコントラスト比が大きく変わります。
- コントラスト比は、色の見分けやすさの目安のひとつです。色だけで情報を伝えないようにすることも大切です。
- 次の版のWCAG 3で検討されているAPCAという方式では、コントラストの計算方法が異なります。
よくある質問
コントラスト比4.5:1とはどういう基準ですか?
WCAG(Webコンテンツアクセシビリティガイドライン)2.1のレベルAAが定める、通常サイズの文字に求められる最低限のコントラスト比です。この基準を満たすと、視力の弱い方でも文字を読みやすくなります。
生成される10段階の色は何を基準に決まっていますか?
選んだ基準色の色相(Hue)と彩度(Saturation)を保ったまま、明度(Lightness)を95%から8%まで10段階に変化させています。
大きな文字(見出しなど)の基準も同じですか?
いいえ。WCAG AA基準では、18pt以上(太字は14pt以上)の大きな文字は3:1以上のコントラスト比で合格となります。このツールは通常サイズの文字向けの4.5:1を基準に判定しています。