Color Contrast Checker
Check the contrast ratio of text and background colours against WCAG 2.2 AA and AAA, and get the nearest colour that passes.
HEX, rgb(), hsl(), oklch() or a colour name. A see-through text colour is blended over the background first.
#595959AAA (7:1)Same hue, only the lightness changed.
Normal text at 16px. The quick brown fox jumps over the lazy dog.
Large text at 24px
Large bold text at 18.66px
| Level | Use | Needs | Result |
|---|---|---|---|
| AA | Normal text | 4.5:1 | Pass |
| AA | Large text | 3:1 | Pass |
| AAA | Normal text | 7:1 | Fail |
| AAA | Large text | 4.5:1 | Pass |
| AA | Icons, borders, form controls | 3:1 | Pass |
Large text means at least 24px (18pt), or 18.66px (14pt) when bold.
Related Developer Tools
This colour contrast checker measures the contrast ratio between a text colour and its background and tells you whether it passes the Web Content Accessibility Guidelines (WCAG 2.2) at level AA and AAA, for normal text, large text and interface elements such as icons and input borders. When a pair fails, it suggests the nearest colour that passes, keeping your hue so the design still looks like yours. It reads HEX, RGB, HSL and OKLCH, so you can test Tailwind v4 colours directly.
WCAG Contrast Requirements
| What | AA (minimum) | AAA (enhanced) | WCAG criterion |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| Icons, borders of inputs and buttons, focus indicators, chart lines | 3:1 | – | 1.4.11 |
| Logos, disabled controls, decoration | No requirement | – | |
Level AA is what most accessibility laws and policies refer to, including the European Accessibility Act, which points to the EN 301 549 standard, and the ADA rules for US public bodies, which point to WCAG 2.1 AA. AAA is a stricter target that is good practice for long passages of body text.
Common Colour Pairs Checked
| Text on background | Ratio | Result |
|---|---|---|
#767676 on white | 4.54:1 | The lightest grey that passes AA on white |
#777777 on white | 4.47:1 | Fails AA for normal text, passes for large text |
White on #3b82f6 (Tailwind v3 blue-500) | 3.67:1 | Large text only |
Black on #3b82f6 | 5.70:1 | Passes AA |
White on #d90246 | 5.18:1 | Passes AA |
Fixing a Pair That Fails
- Change lightness, not hue. Darkening text on a light background (or lightening it on a dark one) is the smallest change that raises contrast, which is what the suggestion does.
- Use a darker shade from your palette. In a Tailwind-style scale, 600 or 700 text usually passes on white where 500 does not. The palette generator builds those shades from your brand colour.
- Make the text larger or bolder if the colour cannot change: large text only needs 3:1.
- Swap the text colour. On mid-tone backgrounds black text often passes where white does not, as with blue-500 above.
About APCA and WCAG 3
APCA is a newer contrast method that takes font size and weight into account and treats dark mode more accurately. It has been discussed for a future WCAG 3, which is still a draft. For now WCAG 2.2's ratio is the one that standards and laws refer to, so it is what this checker tests. If you work in OKLCH, convert colours with the HEX to OKLCH converter: matching OKLCH lightness keeps contrast roughly similar when you swap hues.
Frequently Asked Questions
What contrast ratio does WCAG require?
For level AA, normal text needs at least 4.5:1 and large text at least 3:1. For level AAA, normal text needs 7:1 and large text 4.5:1. Icons, input borders and other parts of the interface that people need to see need 3:1 against what is next to them (success criterion 1.4.11, level AA).
What counts as large text?
WCAG defines large text as at least 18 point, or 14 point when bold. On the web that is roughly 24px, or 18.66px bold, at normal zoom.
Is 4.49:1 close enough to pass AA?
No. WCAG says the ratio must not be rounded up, so anything below 4.5 fails AA for normal text. This checker shows the ratio rounded down for the same reason.
How is the contrast ratio calculated?
Each colour's relative luminance is worked out from its red, green and blue values after removing the sRGB gamma curve. The ratio is (lighter + 0.05) ÷ (darker + 0.05). It runs from 1:1 for two identical colours to 21:1 for black on white.
How does the nearest passing colour work?
It keeps the hue and colourfulness of your text colour and changes only its lightness, in OKLCH, trying both darker and lighter, until the ratio reaches 4.5:1 or 7:1. It offers the option that changes the colour least.
What about transparent colours?
A semi-transparent text colour is blended over the background first, just as a browser would draw it, and the blended colour is checked. A semi-transparent background is treated as sitting on white.
Does passing WCAG mean everyone can read it?
It is the accepted legal and practical minimum, but not a guarantee. Thin fonts, small sizes and text over images can still be hard to read at a passing ratio, so treat 4.5:1 as the floor, not the goal.