WCAG Colour Contrast Checker
Free WCAG colour contrast checker: paste two HEX colours to get the contrast ratio, AA/AAA pass-fail for normal and large text, a live preview and the nearest passing colour.
Normal text at 16 px — the quick brown fox jumps over the lazy dog.
Large text at 24 px / 18.66 px bold
Small print at 13 px, common in forms and footers.
| Normal text — AA (needs 4.5:1) | — |
|---|---|
| Normal text — AAA (needs 7:1) | — |
| Large text — AA (needs 3:1) | — |
| Large text — AAA (needs 4.5:1) | — |
| UI components & graphics — 1.4.11 (needs 3:1) | — |
In short
WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) at Level AA, and 7:1 / 4.5:1 at Level AAA; UI component borders and icons need 3:1. The ratio is (L1 + 0.05) ÷ (L2 + 0.05) using relative luminance.
Who this is for: Designers and developers checking text and UI colours against WCAG 2.2 AA/AAA before shipping a site or app.
How the contrast ratio is calculated
WCAG defines contrast as (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colour. Relative luminance converts each sRGB channel out of gamma (((c + 0.055) ÷ 1.055)^2.4, or c ÷ 12.92 for very dark values) and weights them 0.2126 R + 0.7152 G + 0.0722 B. The result runs from 1:1 (identical) to 21:1 (black on white).
The thresholds in WCAG 2.2:
- 1.4.3 Contrast (Minimum) — Level AA: 4.5:1 for normal text, 3:1 for large text (at least 24 px, or 18.66 px bold).
- 1.4.6 Contrast (Enhanced) — Level AAA: 7:1 for normal text, 4.5:1 for large text.
- 1.4.11 Non-text Contrast — Level AA: 3:1 for UI component boundaries (input borders, focus rings) and meaningful graphics against adjacent colours.
Logos, decorative text and disabled controls are exempt. The "nearest passing colour" suggestion keeps your hue and moves the text colour towards black or white only as far as needed.
See also: Favicon Generator & Image to Base64 Converter, Strong Password & Passphrase Generator.
Assumptions
- Implements the WCAG 2.x relative-luminance and contrast-ratio formulas exactly, in sRGB.
- Thresholds: 4.5:1 / 3:1 (AA normal / large), 7:1 / 4.5:1 (AAA), 3:1 for non-text.
- The fix suggestion moves the text colour towards black or white in 2% steps until it passes.
Worked example
Luminance of #777777 ≈ 0.184; of white = 1.0 → ratio = (1 + 0.05) ÷ (0.184 + 0.05) = 4.48:1 — the classic "just fails AA" grey. One step darker, #767676, gives 4.54:1 and passes; many design systems use #6b6b6b or darker for body text to leave a margin.
Frequently asked questions
Does my brand colour have to pass on white?
Only where it is used for text or essential UI. Many brand blues and oranges fail 4.5:1 on white — keep them for large headings, buttons with white text (check the reverse pair), and decorative use, and pick a darker shade for links and body text.
What counts as large text?
18 pt (24 px) regular or 14 pt (about 18.66 px) bold and above. Large text needs only 3:1 for AA.
Is 4.5:1 a legal requirement?
WCAG 2.x AA is referenced by the EU Web Accessibility Directive and European Accessibility Act, the UK Public Sector Bodies regulations, US Section 508 and most ADA settlements, and the UAE and Saudi government digital standards. AA is the usual compliance bar; AAA is aspirational.
Does this check placeholder text and disabled buttons?
Placeholder text is real text and must pass. Disabled (inactive) controls are exempt from 1.4.3, though keeping them readable is still good practice.
What contrast ratio is needed for WCAG AA?
4.5:1 for normal text and 3:1 for large text (24 px regular or 18.66 px bold), and 3:1 for UI component boundaries and icons.
Does #777777 on white pass WCAG?
No — it is 4.48:1, just under the 4.5:1 AA threshold. #767676 (4.54:1) passes.
Related calculators
Found an error? Report it — tell us the inputs, the result you got, what you expected and the rule or source. Confirmed corrections are published within a week.
Ready to build your next digital solution?
Send the brief and you get a scoped response with approach, milestones and a fixed price range. Not a sales call.
A 30-minute call with the engineer who would run your project
Within 2 business daysA written scope: approach, module breakdown, milestones, fixed price range
Within 5 business daysYou decide. No retainer, no obligation, and the scope document is yours to keep either way
Your timelineSend your brief
Three fields to start. Add project details if you have them.