How to check color contrast for WCAG accessibility
Check the contrast ratio between a text and background colour against WCAG AA and AAA.
WCAG accessibility sets minimum contrast ratios between text and its background: 4.5:1 for normal text and 3:1 for large text (AA), or 7:1 for AAA. A contrast checker computes the ratio from two colours — for example, black on white is 21:1, which passes every level.
Input
text #000000 on background #ffffff
Output
21:1 — passes AA and AAA (normal and large text)
Thresholds: AA 4.5:1 (normal) / 3:1 (large); AAA 7:1 (normal) / 4.5:1 (large).
Open the Contrast Checker → Free · runs in your browser · nothing uploaded
Steps
- Open the Contrast tool and set the text and background colours.
- Read the contrast ratio and the AA/AAA pass or fail for normal and large text.
- Adjust a colour until it passes the level you need.
- Remember "large text" means ~18.66px bold or 24px regular and above.
Frequently asked questions
- What contrast ratio do I need to pass WCAG AA?
- 4.5:1 for normal-size text and 3:1 for large text. AAA is stricter at 7:1 (normal) and 4.5:1 (large). UI components and graphics need at least 3:1.