Color Contrast
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).
HTML
Beginner
3 min read
Color Contrast
Example
<!-- Check contrast with browser DevTools or WebAIM Contrast Checker -->
<!-- Poor contrast: fails WCAG AA -->
<p style="color:#aaa; background:#fff;">Light gray on white (1.6:1 — FAIL)</p>
<!-- Good contrast: passes WCAG AA -->
<p style="color:#595959; background:#fff;">Dark gray on white (7:1 — PASS)</p>
<!-- Do not rely on color alone -->
<span style="color:red;">Error</span> <!-- color only -->
<span><svg aria-hidden="true">✗</svg> Error</span> <!-- icon + color --> Pro Tip
Install the Colour Contrast Analyser or axe extension to check ratios directly in the browser.