WCAG AA 通常テキストのコントラスト比 (4.5:1)

WCAG 2.1 AAの通常サイズテキストに対する最小コントラスト比4.5:1を理解します。本文やUIラベルのコンプライアンス計算と検証方法を学びます。

WCAG Basics

詳細な説明

WCAG AA 通常テキスト要件

Web Content Accessibility Guidelines (WCAG) 2.1は、Level AAをほとんどの組織が満たすべき最低限のアクセシビリティ標準として定義しています。通常テキスト(18pt通常または14pt太字未満のテキスト)に対して、必要な最小コントラスト比は4.5:1です。

4.5:1とは何を意味するか?

コントラスト比は、前景色と背景色の相対輝度から計算されます:

ratio = (L1 + 0.05) / (L2 + 0.05)

L1は明るい方の輝度、L2は暗い方の輝度です。4.5:1の比率は、明るい色が暗い色の4.5倍の輝度を持つことを意味します(0.05のオフセット後)。

合格例

前景色 背景色 比率 合格?
#000000 #ffffff 21:1 はい
#1e293b #ffffff 14.14:1 はい
#4b5563 #ffffff 6.44:1 はい
#767676 #ffffff 4.54:1 はい(ぎりぎり)

不合格例

前景色 背景色 比率 合格?
#808080 #ffffff 3.95:1 いいえ
#9ca3af #ffffff 2.88:1 いいえ
#d1d5db #ffffff 1.47:1 いいえ

なぜ4.5:1なのか?

4.5:1の比率は、加齢に伴う視力低下に関する研究に基づいて選択されました。20/40の視力(約80歳の人に一般的)の人は、20/20の視力の人が必要とするコントラストの約4.5倍を必要とします。この閾値により、中程度の視覚障害を持つ人を含むほとんどの人が快適にテキストを読めるようになります。

ユースケース

ウェブサイトの本文テキスト、フォームラベル、ナビゲーションリンク、および24px通常ウェイト未満のすべてのテキストに色を設定する際にこのガイドラインを使用してください。これはアクセシビリティ監査で最もよく参照されるWCAG要件です。

試してみる — Accessibility Color Checker

フルツールを開く