Color Contrast Ratio Checker (WCAG)
Does this text and background color pair pass WCAG AA or AAA contrast?
Spec sheet
wcag21_contrast · v1.0.0WCAG 2.1 contrast ratio
- 01
L = 0.2126R + 0.7152G + 0.0722B (linearised sRGB) - 02
ratio = (L_light + 0.05) / (L_dark + 0.05) - 03
AA: 4.5 normal, 3 large; AAA: 7 normal, 4.5 large
- Opaque colors only; transparency and gradients are not evaluated.
- WCAG 2.x formula (not the APCA draft).
Worked example
computed by the same formula#767676 on white
- Text color (hex)
- #767676
- Background color (hex)
- #FFFFFF
- Contrast ratio
- 4.54
- AA — normal text (4.5:1)
- Pass
- AA — large text / UI (3:1)
- Pass
- AAA — normal text (7:1)
- Fail
- AAA — large text (4.5:1)
- Pass
Questions
How is the color contrast ratio checker calculated?
›
WCAG 2.1 contrast ratio. L = 0.2126R + 0.7152G + 0.0722B (linearised sRGB) · ratio = (L_light + 0.05) / (L_dark + 0.05) · AA: 4.5 normal, 3 large; AAA: 7 normal, 4.5 large
Example: #767676 on white?
›
Contrast ratio: 4.54; aa — normal text (4.5:1): Pass.
What does this calculator not cover?
›
Opaque colors only; transparency and gradients are not evaluated. WCAG 2.x formula (not the APCA draft).
Where do the numbers come from?
›
Sources: W3C WCAG 2.1 — Success Criteria 1.4.3, 1.4.6, 1.4.11. The formula is versioned (wcag21_contrast v1.0.0) and covered by automated tests.
Is my data stored?
›
No. The calculation runs in your browser and nothing is sent unless you choose to save a shareable link.
Also searched ascontrast ratio checker · wcag contrast checker · color contrast accessibility · aa contrast · text contrast checker