♿ アクセシブルカラーパレット生成
基準となる色を1つ選ぶだけで、その色相を保ったまま明度を変化させた10段階のカラーパレットを生成し、それぞれの色と白テキスト・黒テキストとのコントラスト比(WCAG 2.1基準)を同時に確認できるツールです。コントラスト比が4.5:1以上の組み合わせには合格マークが表示されます。Webサイトやアプリのアクセシブルな配色を検討する際に便利です。
使い方
- カラーピッカーまたはHEXコード入力欄で基準となる色を選びます。
- 10段階の明度パレットが自動的に生成されます。
- 各色をクリックするとHEXコードがコピーされます。バッジは白・黒テキストそれぞれとのコントラスト比とWCAG AA基準(4.5:1以上)の合否を示します。
よくある質問
コントラスト比4.5:1とはどういう基準ですか?
WCAG(Webコンテンツアクセシビリティガイドライン)2.1のレベルAAが定める、通常サイズの文字に求められる最低限のコントラスト比です。この基準を満たすと、視力の弱い方でも文字を読みやすくなります。
生成される10段階の色は何を基準に決まっていますか?
選んだ基準色の色相(Hue)と彩度(Saturation)を保ったまま、明度(Lightness)を95%から8%まで10段階に変化させています。
大きな文字(見出しなど)の基準も同じですか?
いいえ。WCAG AA基準では、18pt以上(太字は14pt以上)の大きな文字は3:1以上のコントラスト比で合格となります。このツールは通常サイズの文字向けの4.5:1を基準に判定しています。