AA
1.4.3 コントラスト (最低限)
アクセシビリティ達成基準 1.4.3「コントラスト(最低限)」(WCAG 2.2 レベルAA)は、視認性の確保を目的として、テキストと背景色の間に十分なコントラスト比を設けることを求めています。
目次
要件
通常のテキストコンテンツにおいて、背景色とのコントラスト比が少なくとも4.5:1以上であること。
ただし、以下は例外です。
- 大きなテキスト(18ptまたは14pt太字)の場合は、3:1以上でよい
- 装飾目的の文字(例:背景の透かし文字など)は対象外
- ロゴ文字(企業名など)は対象外
コントラスト比の計算について
コントラスト比は 1:1(最も低い)〜21:1(最も高い)
例:
- 白(#FFFFFF)と黒(#000000) → 21:1(最高)
- 白(#FFFFFF)と薄灰色(#CCCCCC) → 約2.2:1(基準を満たさない)
具体例
| テキスト色 | 背景色 | コントラスト比 | 評価 |
|---|---|---|---|
| #FFFFFF(白) | #234058(濃紺) | 10.79:1 | OK |
| #234058(濃紺) | #EDF0EF(薄灰) | 9.41:1 | OK |
| #777777(灰) | #FFFFFF(白) | 4.48:1 | NG(基準にわずかに満たない) |
利点
視覚障害支援
色覚異常・低視力のある人でも内容が読みやすくなる
モバイル視認性
屋外や暗所でも可読性を保つ
UIの一貫性
デザインガイドラインの明確化・統一につながる
WCAG・JIS対応
法令・ガイドラインに基づく品質担保が可能になる
チェック・検証ツール
- Colour Contrast Analyser(TPGi)(新しいタブで開きます)
- WebAIM Contrast Checker(新しいタブで開きます)
- Chrome拡張「Accessibility Insights」「WAVE」など
補足:フォントサイズとコントラスト基準
| 種類 | コントラスト基準 | 備考 |
|---|---|---|
| 通常のテキスト | 4.5:1 以上 | 12pt未満や通常の太さのテキスト |
| 大きなテキスト | 3:1 以上 | 18pt以上 または 14pt以上で太字の場合 |
お問い合わせ
当社では、ウェブサイトの診断や改善方法のご提案を通じて、
すべてのユーザーにとって使いやすいウェブづくりをサポートしています。
ご相談・ご依頼は、こちらからお気軽にお問い合わせください。