CSSで読みやすい文字の色を設定する
Webデザインにおいて、明るい背景色に明るい文字、暗い背景色に暗い文字を配置すると、視認性が低下します。誰にでも読みやすいデザインにするためには、背景色と文字色のコントラスト比を高くする必要があります。 WCAGのAA基準では、このコントラスト比を4.5:1以上にすることが推奨されています。 Web Content Accessibility Guidelines (WCAG) 2.2 CSSではcontrast-color()関数を使用することで、背景色に応じて読みやすい文字色を計算することができます。 この関数は、指定された色に対して白か黒のうち、よりコントラスト比の高い色を返します。 .content { background-color: var(--bg-color); /* 背景色に応じて、自動で白か黒の読みやすい方が選ばれる */ color: contrast-color(var(--bg-color)); } ただしグレーのような中間色の場合、必ずしも最適な色になるとは限りません。それでも、色の管理がしやすくなり、とても便利な機能です。 5/19(火)~ 5/20(水)開催の バックオフィスDXPO に出展します。