実装後のチェック項目には「グレースケール表示での確認」を追加したほうがいい
広告
グレースケール表示での確認を追加したほうがいい理由
アクセシビリティの確保のため
色に依存したデザインは、色覚に特性を持つ方や高齢者など、色の見え方に差がある利用者にとって識別が難しくなる場合があります。特に、要素のフォーカス状態やホバー状態の判別を色の変化のみで実装されることが多いですが、利用者によっては要素の状態変化が認識できなくなります。
そういった場合に備えてグレースケール表示でも情報が正しく伝わり、ユーザビリティが損なわれていないことを確認することはアクセシビリティ確保のために重要です。ウェブアクセシビリティの国際的なガイドラインであるWCAGでも適合レベルAの達成基準として定められています。
ただし、一部の色（濃い赤など）はグレースケール表示では確認しにくい場合があります。検証にかかるコストとのバランスを考慮しつつ、色覚特性のタイプごとに見え方をシミュレーションすることも有効かもしれません。
グレースケール表示で利用するユーザーも一定数いる
グレースケール表示で利用するユーザーも一定数います。例えば、白黒印刷した資料を参照したり、電子ペーパーデバイスを使用したりするユーザーが挙げられます。
また、スマートフォンへの依存を防ぐにはグレースケール表示が効果的という話もあり、スマホ依存を防ぐためにあえてグレースケール表示を行っているユーザーもいるでしょう。
このようなユーザーにとっても、グレースケールでの表示を予め確認しておくことでアクセシビリティを向上させることができます。
グレースケール表示を簡易的にチェックする方法
各デバイスが提供する表示切り替え機能を利用してチェックするのがベターですが、body要素にfilter:grayscale(1)を適応することで簡易的なチェックを行うことも可能です。
body { filter: grayscale(1);}デザインが大きく絡むため実装者だけでは対応が難しいかもしれませんが、デザイナーと相談してリンクのホバー表示は下線を追加するようにしたり、ボタンのホバー表示はアイコンを動かしたりボタンの形を変化させるといった比較的少ない工数で実現できる施策から始めると良いかもしれません。