ようこそ! tellogs.com

アクセシビリティ

カラーピッカー

Webデザインにおける色のアクセシビリティは、すべてのユーザーがコンテンツを閲覧できるようにするための重要な要素です。WCAG2.1の基準では、テキストと背景のコントラスト比が、通常テキストで4.5:1以上、大きなテキスト(18pt以上)で3:1以上であることが推奨されています。色覚障害者への配色設計として、色だけに情報を依存しないことが重要です。赤と緑の違いを伝える場合は、色だけでなくアイコンやテキストも併せて使用します。日本国内では、男性の約5%、女性の約0.2%が何らかの色覚異常を持っています。色覚障害に対応した配色のポイントとして、まず色の組み合わせを確認します。赤と緑、青と黄の組み合わせは、一部の色覚障害者には区別がつきにくいです。其次、明度差を確保します。色が区別できなくても、明るさの違いで判断できるようにします。カラーピッカーのアクセシビリティ機能を使用して、コントラスト比を確認し、色覚障害シミュレーションで配色を検証することが推奨されます。

カラーピッカーを使ってみる

このページで紹介した内容を、カラーピッカーで実際に試してみましょう。

カラーピッカーを開く