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

適合レベル

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

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

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

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

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

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

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

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

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

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

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

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

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

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