カラーコントラスト

カラーコントラストとは

カラーコントラストは、文字や操作部品と背景の明るさの差を比較し、見分けやすさを評価する考え方です。ウェブアクセシビリティでは相対輝度から求めたコントラスト比を使います。

どんな場面で使うか

本文、ボタン、フォーム、リンク、フォーカス表示、グラフなどの色を決め、視力や色覚、屋外表示などの条件が異なっても内容と操作を認識できるか確認するときに使います。

選ぶとき・使うときのポイント

WCAGのレベルAAでは、通常の文字は原則4.5対1以上、大きな文字は3対1以上が基準です。ロゴなどの例外や非テキスト部品には別の基準があるため、数値だけでなく、ホバー、無効状態、画像上の文字、実機での見え方も確認します。