アクセシビリティに配慮した配色が分かるWebアプリ「Accessible color palette generator」

PageSpeed Insights(ページスピードインサイト)のレポートに「ユーザー補助」の項目が登場したこともあり、アクセシビリティについて意識し始めた方も多かったのではないでしょうか。WCAG(ウェブコンテンツ アクセシビリティ ガイドライン)に準拠した色のペアリングやカラーパレットのジェネレータなど、探してみると多数提供されています。

「Accessible color palette generator」もその中の一つ。4.5:1 のコントラスト比に基づき、WCAG 2.1 AA に従った色の組み合わせを提案してくれます。通常のテキスト、大きなテキスト、グラフィックで使用するのに十分なコントラストです。

Accessible color palette generator
acpg

「Random palette」、またはカラーコードを指定して Generate するとパレットが生成されます。パレットは6種類8パターンあり、それぞれカラーコードをダウンロードできるようになっています。

  • Vibrant (明るめ)
  • Monochromatic (単色)
  • Contrasting (対比色)
  • Pastel (淡色)
  • Pastel contrating (淡い対比色)
  • Dark to light (濃色から淡色)

トラックバックURL