Accessibility
Guidelines

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

適合レベル

AA

※各レベルについては適合レベルとはをご覧ください

概要

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

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

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

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

ここでいう「大きな文字」とは以下の通り。Amebaでは主に日本語が用いられているため、日本語の全角文字の場合の基準値を用いている(参考文献を参照)

  • 24px以上の太字(18pt相当)
  • 29px以上(22pt相当)

例外

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

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

テスト・チェック方法

企画時

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

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

デザイン時

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

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

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

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

実装時

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

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

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

参考文献