Level AAWCAG 2.2

1.4.3 コントラスト(最低限)

テキストと背景の間に4.5:1以上のコントラスト比を持たせる。


なぜ重要か

ロービジョン
世界で22億人以上が視覚障害を持っています。低コントラスト文字はほぼ見えません。
環境要因
直射日光下では健常者でも低コントラスト文字が見えにくくなります。
加齢
50歳以降コントラスト感度は低下。75歳では半分まで落ちる研究も。
モバイル
小さな画面・反射・屋外。コントラストがかつて以上に重要です。

達成基準

通常テキスト: 4.5:1 以上

大きなテキスト(18pt以上/14pt太字以上): 3:1 以上

例外:装飾テキスト、ロゴ、非アクティブUI

計算式: (L1 + 0.05) / (L2 + 0.05)。最大21:1(黒と白)、最小1:1(同色)。

ライブデモ

色コントラスト比較

Aa あ
白×薄グレー
1.6:1
Aa あ
緑×緑
1.2:1
Aa あ
黄×白
1.1:1

コントラストを体験する

スライダーを動かして文字色の明るさを変えてみましょう。

この文字は読めますか?

アクセシビリティは、すべての人のために。

70%
2.0:1 — AA不適合(4.5:1未満)

ペルソナで理解する

田中さん(68歳)— 加齢黄斑変性

中心視野がぼやけ、薄いグレー文字は背景と溶け合います。4.5:1以上のサイトなら拡大鏡なしで判読可能。「病院の予約サイトが読めないと電話するしかない」

チェックポイント

参考リンク