アクセシビリティのために色のコントラストを確認する方法

男性の約12人に1人、女性の約200人に1人が何らかの色覚異常を持っています。さらに数百万人が低視力、加齢する目を持つ、または直射日光の下で画面を見ています。テキストと背景のコントラストが不十分な場合、これらの人々はそれを読むことができません。

色のコントラストは「あれば良いもの」ではありません — 中心的なアクセシビリティ要件です。

WCAGの要件

Web Content Accessibility Guidelines(WCAG)は、テキストと背景の間の最小コントラスト比を定義しています:

「大きなテキスト」とは、太字18 pxまたは通常24 px以上を意味します。

コントラスト比は1: 1(コントラストなし — 白い背景に白)から21: 1(最大コントラスト — 白い背景に黒)までの範囲です。

コントラストを確認する方法

1. 色を選択 — テキスト(前景)と背景の色を、HEXコード、RGB値、またはピッカーで入力します。
2. 結果を確認 — ツールはコントラスト比と、組み合わせが通常および大きなテキストでWCAG AAおよびAAAに合格するかどうかを瞬時に表示します。
3. 必要に応じて調整 — コントラストが失敗した場合、必要なレベルに達するまでテキストを暗くするか、背景を明るくします(またはその逆)。

一般的なコントラストミス

白い背景に明るいグレーのテキスト — #ffffffに#999999はわずか2.8: 1の比率です。これはWCAG AAに失敗します。完璧な視力のデザイナーには「クリーン」に見えるかもしれませんが、多くの人にとって読みにくいです。

カラフルな背景にカラフルなテキスト — 白いテキストの青いボタンはしばしば合格しますが、白いテキストの緑のボタンはそうではありません。常にチェックしてください — コントラスト比を目で判断することはできません。

ヒントテキスト — フィールドのヒントテキストは、コントラストが弱いことで悪名高いです。WCAGがそれを厳密に課していなくても、ユーザーはそれを読む必要があります。

ダークモード — デザイナーはしばしば「微妙な」見た目のために濃いグレーに中間グレーを使います。これはコントラストチェックに頻繁に失敗します。

ヒント

• 各テキスト/背景の組み合わせを確認 — 何も仮定しないでください。経験豊富なデザイナーでさえ、失敗する組み合わせに驚かされます。
• 両方のテーマをテスト — サイトにライトモードとダークモードがある場合、両方のコントラストを確認してください。白で機能する色は、暗いグレーで失敗する可能性があります。
• ブランドカラーを賢く使用 — ブランドの青がテキストカラーとして失敗した場合、「大きなテキスト」しきい値(3: 1)が適用されるより大きな要素(ボタン、ヘッダー)に使用し、本文テキストにはより暗い色合いを使用してください。
• 色だけに頼らない — 十分なコントラストに加えて、色だけで情報を伝えないでください。アイコン、ラベル、パターンを補完として使用してください。