Accessibility
Guidelines

1.4.3 テキストや文字画像のコントラストを確保する

詳細

テキストと背景の間に充分なコントラストを確保する。

晴れの日に太陽光でディスプレイの文字が読みにくかったりなど、コントラストを確保していないことで視認性が悪化することは多々ある。こうした場合にコントラストを充分に確保することで、テキストの視認性を上げるだけでなく、中度のロービジョンの人に対してもコンテンツを提供できるようにする。

具体的には、次の基準とする。

  • 大きな文字の場合、コントラスト比を3:1以上にする
  • それ以外の場合、コントラスト比を4.5:1以上にする

ここで、「大きな文字」とは次の通り。

  • 18.5px以上の太字(14pt相当)
  • 24px以上(18pt相当)

例外

次のような、テキストとして理解されることを目的としていないコンテンツは例外とする。

  • 写真に含まれる道路標識などの付随的な文字
  • 企業のロゴやロゴタイプ
  • 何らかの実装上の理由で隠している文字

レビュー・テスト方法

企画時

発生しうるコンテンツを、サービス提供側でコントロール可能なものかどうかで切り分ける。

サービス提供側でコントロールできるコンテンツの場合は、デザインや実装段階に後述する方法でチェックする。ユーザーが投稿するコンテンツに対しても可能な限り基準が達成できるよう配慮するが、サービスの性質上コントロールできない場合などには適用しない。

デザイン時

Sketch の場合は stark-contrast/stark-sketch-plugin というプラグインを用いて、テキストとその背景のコントラスト比を前述した基準に保つ。チェックのタイミングは適時とするが、少なくとも Git などのバージョン管理システムでコミットする時に漏れ無くチェックする。

Stark の使い方は色盲・色弱のシミュレーションやコントラストをチェックするSketchプラグイン「Stark」が詳しい。

サービスで用いる色はあらかじめ決められているケースが多く、サービス運用時の変更は難しいことが多い。そのため、新規サービスの開発時に、あらかじめコントラスト条件を満たすカラーパレット・組み合わせを一覧化しておくことが望ましい。

コントラストのチェックには、色同士のコントラストを一括してチェックできる Contrast Grid というツールが便利である。

実装時

デバッグ時に Chrome DevTools の Audits パネルで、Accessibility にチェックをして監査を実行することで、コントラスト比が保たれていないテキストを洗い出せる。

また tota11y というツールを使うことでもチェックできる。tota11y は、Chrome Extension としても入手できる。

これらを用いて実装時に適時チェックするものとし、少なくとも Git などのバージョン管理システムでコミットする時に漏れ無くチェックする。

参考文献