背景色と文字色のコントラスト比が4.5:1（大きな文字: 18px以上は3:1）以上ある
概要
この基準では、背景色と文字色のコントラストが4.5:1以上(18px以上の文字は3:1以上)確保されていることを確認してください。視覚障害を持つユーザーや色を見分けることが難しいユーザーにとって、ウェブページの内容が見やすくなります。
メリット
- 色覚特性・多様性のあるユーザー: 色の差がはっきりしているため、情報を正確に認識しやすくなります。
- 高齢者や視力の低下しているユーザー: テキストが背景から際立つため、読みやすさが向上します。
- 屋外や明るい場所でモバイルデバイスを使用するユーザー: 日光の下でもコンテンツが見やすくなります。
達成方法
SmartHRデザインシステムで定義されているコンポーネントの色をそのまま利用すれば、コントラスト比の基準を満たすことができます。独自の配色や定義されていないコンポーネントの場合は、以下の方法で検証してください。
- コントラスト比を計算するツールの利用:
- WebAIMのコントラストチェッカーなどのツールを使い、テキストと背景色のコントラスト比が基準を満たしているかを確認します。
テスト方法
- 開発者ツールを使用した検証:
- Google ChromeのDevToolsを開き、Inspect(検証)アイコンをクリックして特定の要素を検証すると、コントラスト比がツールチップに表示されます。（参考: Chrome DevTools を使用して低コントラストのテキストを検出して修正する）
- コントラスト比計算ツールの使用:
- WebAIMのコントラストチェッカーなどのオンラインツールを使用して、ページ上のテキストと背景色のコントラスト比を計算し、基準に適合しているかを確認します。