Check a colour pair against WCAG contrast requirements
Contrast failures are the most common accessibility defect in a production interface and the easiest to fix once you can see the ratio. This checker gives you the number, the pass or fail for each criterion, and a suggestion that passes.
- Standard
- WCAG 2.2
- Levels
- AA and AAA
- Suggestion
- Auto-adjusted
The quick brown fox jumps over the lazy dog — 16px body text sample.
| Criterion | Required | Result |
|---|
How to use it
- Set the two colours Pick with the colour input, type a hex value, or paste a CSS colour such as rgb() or hsl(). The tool parses all three.
- Read the ratio The contrast ratio is shown along with the AA and AAA results for normal text, large text and UI components.
- Use the suggestion If the pair fails, a darker or lighter version of the foreground is proposed that meets the standard you need.
Reference
The thresholds that matter
| Criterion | Required ratio | Applies to |
|---|---|---|
| `1.4.3` AA normal text | 4.5:1 | Body copy under 18pt |
| `1.4.3` AA large text | 3:1 | 18pt bold or 24pt regular |
| `1.4.6` AAA normal text | 7:1 | Body copy under 18pt |
| `1.4.6` AAA large text | 4.5:1 | Large text |
| `1.4.11` non-text contrast | 3:1 | Input borders, icons, focus rings |
Questions people ask
What ratio do I need for body text?
4.5:1 for AA and 7:1 for AAA. Large text, defined as 18pt bold or 24pt regular, needs 3:1 for AA and 4.5:1 for AAA.
Do gradients and images need to pass?
The requirement still applies, but the ratio is measured against the worst-case background behind the text. For text over an image, that means adding a solid or sufficiently opaque overlay behind it.
What about icons and input borders?
WCAG 2.2 added success criterion 1.4.11, which requires 3:1 for the visual information needed to identify a control: borders, focus indicators and meaningful icons.
Does a text shadow help?
Not for the purposes of the criterion. The measurement is based on the declared foreground and background colours, and a shadow does not raise the computed ratio.
Why do my brand colours keep failing?
Saturated brand colours tend to sit around 3:1 against white, which passes for large text and fails for body copy. The usual fix is a darker tint of the same hue for text and the original colour for large elements and accents.
Does the tool account for transparency?
Not for the ratio itself. If a colour has an alpha channel, use the checker to find a solid replacement, since a translucent colour does not have one fixed contrast ratio against an arbitrary background.
Details that catch people out
Relative luminance is computed per channel by linearising the sRGB values, then the ratio is (lighter + 0.05) divided by (darker + 0.05). The 0.05 offset is what makes black on white exactly 21:1 and white on white exactly 1:1.
Where this earns its keep
Reviewing a design system
Check every text and background pairing in a component library against the standard, and replace the tokens that fail rather than patching individual screens.
Fixing an accessibility audit finding
An audit reports a ratio and a colour pair. Recreating that pair here shows whether darkening the text or lightening the background is the smaller change.
Choosing a link colour
Link colours are usually the first thing to fail on a light background, and the failure is invisible to the person who chose the brand colour.
Guides that go deeper
- WCAG Contrast Ratios for Developers 5 min read · What the contrast requirements actually are, which ones apply to your UI, and how to fix a…
Last reviewed 2026-10-08. Every tool on DevSnap runs entirely in your browser, so whatever you paste here never reaches a server.