Color contrast (WCAG)
Check contrast ratio and WCAG AA/AAA pass for two colors.
| Normal text AA (4.5:1) | - |
|---|---|
| Normal text AAA (7:1) | - |
| Large text AA (3:1) | - |
| Large text AAA (4.5:1) | - |
Light gray text on a white card looks refined in the mockup and disappears on a phone screen in daylight. It is one of the most common accessibility problems in web design, and it is also one of the easiest to catch — the standard gives you a number to check against.
Put your two colours in and this tool gives you that number, plus a plain pass or fail against each threshold.
How it works
How to use it
Set the Foreground (text) and Background colours, either with the swatches or by typing HEX values. The preview updates as you type, showing your pair as both large and small text, and the panel below reports the contrast ratio and four verdicts.
Reading the ratio
The ratio runs from 1:1 — two identical colours, invisible — to 21:1, which is pure black on pure white. It is calculated from the relative luminance of each colour using the formula in the WCAG specification, not from a simple difference of the hex numbers. That is why two colours can look equally far apart and score very differently: a mid green is much brighter to the eye than a mid blue, and the formula reflects that.
The order of the two colours makes no difference to the result.
The four thresholds
| Check | Required ratio |
|---|---|
| Normal text, AA | 4.5 : 1 |
| Normal text, AAA | 7 : 1 |
| Large text, AA | 3 : 1 |
| Large text, AAA | 4.5 : 1 |
"Large" has a specific meaning: at least 18pt, roughly 24px, or 14pt bold, roughly 18.7px. Anything smaller counts as normal text, including most body copy at 16px. AA is the level referenced by most public-sector and procurement requirements; AAA is a stricter target that is realistic for body text but hard to hold across a whole interface.
What the check does not cover
The ratio applies to text and to images of text. Interface components and meaningful graphics — input borders, icons, focus rings, chart lines — are covered by a separate rule requiring 3:1, which this tool does not test for you, though you can check a pair manually against that number.
Logos and purely decorative elements are exempt. And a passing ratio is a floor, not a guarantee: font weight, size and the surrounding layout all affect whether text is comfortable to read.
Values here follow WCAG 2.1 and 2.2, which share the same contrast criteria as of writing. For a formal audit, confirm against the current W3C guidance.
Terms explained
- Contrast ratio
- How far apart two colours are in brightness, from 1:1 (identical) to 21:1 (black on white). Calculated from relative luminance, not from the hex values.
- Relative luminance
- A measure of how bright a colour appears, with each channel adjusted for the way screens and the eye handle brightness. The basis of the ratio.
- WCAG
- The Web Content Accessibility Guidelines, the W3C standard that most accessibility laws and procurement rules refer to.
- Level AA
- The compliance level most regulations require: 4.5:1 for normal text and 3:1 for large text.
- Level AAA
- The stricter level: 7:1 for normal text and 4.5:1 for large text. Usually applied to key body copy rather than an entire interface.
- Large text
- At least 18pt (about 24px), or 14pt bold (about 18.7px). It is allowed a lower ratio because bigger shapes stay legible with less contrast.
Frequently asked questions
What contrast ratio should I aim for?
4.5:1 for normal text and 3:1 for large text meets WCAG level AA, which is what most accessibility requirements are written against. Going beyond it helps in bright sunlight and on low-quality screens, so treat AA as a floor rather than a goal.
Does 16px body text count as large text?
No. Large text means 18pt (about 24px) or 14pt bold (about 18.7px) and up, so ordinary 16px body copy must meet the stricter 4.5:1 threshold. Headings and display type usually qualify for the 3:1 allowance.
Does it matter which colour I put in which field?
No. The formula compares the lighter value against the darker one, so swapping foreground and background gives the same ratio. The fields are separate only so the preview shows your pair the right way round.
Do buttons, icons and input borders need to pass too?
Yes, under a separate WCAG rule that asks for 3:1 on interface components and meaningful graphics. This tool checks text thresholds, but you can enter a border and its background here and compare the result against 3:1 yourself.
My colours fail by a small margin. What is the easiest fix?
Adjust lightness rather than hue. Darkening the text or lightening the background a few percent usually clears the threshold while keeping the design intact, and it is far less disruptive than changing the colour itself.
Tell us what went wrong and we'll fix it fast. (Leave an email if you'd like a reply.)