Color Contrast Checker (WCAG)
Check the contrast ratio between two colors against WCAG.
Check whether a text and background color combination is readable. Enter two hex colors to get the WCAG contrast ratio and whether it passes AA and AAA for normal and large text. Essential for accessible design.
Formula / method
Examples
≈ 15.6:1 (passes all)
≈ 4.5:1 (AA normal)
How contrast is measured
Contrast ratio compares the relative luminance of two colours, usually text against its background, on a scale that runs from 1:1 for identical colours up to 21:1 for pure black on pure white. The formula divides the lighter colour's luminance plus 0.05 by the darker colour's luminance plus 0.05, after each channel is converted from its raw value to a linear light measure. This tool computes that ratio for the two colours you pick.
Because luminance is weighted toward how the human eye perceives green, two colours that look similarly bright can still produce a surprisingly low ratio.
Meeting WCAG levels
The Web Content Accessibility Guidelines set thresholds so that text stays readable for people with low vision. Level AA asks for at least 4.5:1 for normal body text and 3:1 for large text, where large means roughly 18pt or 14pt bold. The stricter Level AAA asks for 7:1 for normal text and 4.5:1 for large text.
A frequent oversight is testing only headings, or relying on colour alone to convey meaning. Check your smallest, lightest text too, since that is usually where designs fail. When you are choosing background colours, the CSS Gradient Generator pairs well for previewing how text sits on top.
Where it's used
- Checking that text is readable against its background
- Meeting WCAG AA or AAA for accessibility compliance
- Testing button, link and label colours in a UI
- Vetting a brand palette for legibility before launch
- Auditing the smallest, lightest text where designs usually fail
Real-world examples
- #1a1a2e on #ffffff scores about 15.6:1 and passes both AA and AAA
- #777 grey on white lands near 4.5:1, just passing AA for normal text
- Light-grey placeholder text often falls below 4.5:1 and fails AA
- Large text (18pt+) only needs 3:1 for AA, so headings pass more easily
A bit of history
The 4.5:1 (normal text) and 3:1 (large text) contrast thresholds were introduced in WCAG 2.0, published as a W3C Recommendation in December 2008.
Did you know?
The 4.5:1 AA threshold was chosen to compensate for the contrast-sensitivity loss of a user with roughly 20/40 vision, which itself works out to about a 4.5:1 ratio.
FAQ
What ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text (18pt+/14pt bold). AAA is stricter at 7:1 and 4.5:1. Higher is more readable.