WCAG AA 大テキストのコントラスト (3:1)

WCAG AA 大テキスト要件

WCAGにおける大テキストは、Level AA準拠のために3:1のより低いコントラスト要件を持ちます。この低い閾値は、大きなテキストはストロークが太く、低いコントラスト比でも本質的に読みやすいためです。

大テキストの定義

WCAGは大テキストを以下のように定義しています：

• 通常（400）ウェイトで24px（18pt）以上
• 太字（700）ウェイトで18.66px（14pt）以上

実際には、ほとんどの開発者は18.66pxを閾値として18px太字に丸めます。

実際の例

/* これらは3:1コントラストのみ必要 */
h1 { font-size: 32px; font-weight: 400; }  /* 大テキスト */
h2 { font-size: 24px; font-weight: 400; }  /* 大テキスト */
h3 { font-size: 20px; font-weight: 700; }  /* 大テキスト（太字） */
.subtitle { font-size: 18px; font-weight: 700; }  /* 大テキスト（太字） */

/* これらは4.5:1コントラストが必要 */
p { font-size: 16px; font-weight: 400; }  /* 通常テキスト */
.caption { font-size: 14px; font-weight: 400; }  /* 通常テキスト */
.label { font-size: 18px; font-weight: 400; }  /* 通常テキスト（太字でなく、24px未満） */

3:1は通過するが4.5:1は不合格の色

これらの色は見出しには使えますが本文テキストには使えません：

前景色	背景色	比率
#6b7280	#ffffff	5.03:1
#8b5cf6	#ffffff	4.25:1
#9ca3af	#ffffff	2.88:1
#0ea5e9	#ffffff	3.36:1

よくある間違い

見出し用に合格する色（3:1）を使い、同じ色を本文テキストやラベルに適用してしまうのはよくあるアクセシビリティエラーです。テキストサイズとウェイトに対してコントラスト比を必ず確認してください。