Color Contrast Checker
A free color contrast checker for WCAG 2.1 AA and AAA. Test your text, link and background colors live, at every text size that matters. Everything runs in your browser, nothing you pick leaves this page.
Colors
A 6 digit hex like #3d2b1f
A 6 digit hex like #fef5ec
A 6 digit hex like #7a4e31
Results
12.46:1
Contrast ratio, text on background
- AANormal textPassneeds 4.5:1
- AALarge textPassneeds 3:1
- AAANormal textPassneeds 7:1
- AAALarge textPassneeds 4.5:1
Link colors
- Link on background
- 6.58:1 AA Pass AAA Pass
- Link against surrounding text
- 1.89:1 3:1 Fail
Your links are underlined, so the 3:1 check against surrounding text is informational. It only becomes a requirement when color is the one thing marking a link as a link.
Quick fixes
One click nudges the color just far enough to pass. It keeps the hue and changes only the lightness.
Preview at every size
Each sample is labelled with its CSS size and whether WCAG counts it as normal or large text.
The simulation is an approximation, the Machado model at full severity, the same one browser devtools use. A pair can pass its ratio and still be hard to tell apart here, which is exactly what this view is for. Pass and fail always judge the real colors.
Heading32px / 24pt bold, large text
To infinity and beyond!
Subheading24px / 18pt bold, large text
The toys hold a meeting under the bed
Large text24px / 18pt regular, large text
A cowboy doll and a space ranger argue about shelf space.
Bold text18.66px / 14pt bold, large text
The green aliens have chosen the claw.
Body text16px / 12pt regular, normal text
Every toy in the room freezes when footsteps come up the stairs. The cowboy checks his pull string, the space ranger checks his wrist buttons, and the piggy bank guards the door. New to the numbers? Read how the ratio is calculated further down.
Small text12px / 9pt regular, normal text
No toy gets left behind, not even at 12 pixels.
Palette contrast matrix
Paste your design system colors, one per line or comma separated, and get every foreground and background combination checked at once. Select any cell to load that pair into the checker above.
- AAA, 7:1 or better
- AA, 4.5:1 or better
- AA large text only, 3:1 or better
- Fails, under 3:1
WCAG 2.1 thresholds
| Content | AA | AAA |
|---|---|---|
| Normal text (under 24px, or under 18.66px bold) | 4.5:1 | 7:1 |
| Large text (24px and up, or 18.66px and up bold) | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | Not defined |
| Links against surrounding text, when not underlined | 3:1 | Not defined |
The same thresholds carry forward unchanged into WCAG 2.2. Ratios here are shown to two decimals, but pass or fail is judged on the full precision value, so 4.4996:1 fails AA even though it displays as 4.50:1.
How this color contrast checker calculates the ratio
Every color has a relative luminance, a number between 0 for black and 1 for white that describes how bright it looks to the human eye. Green counts far more than blue, which is why a mid green and a mid blue with the same hex brightness do not read the same.
The contrast ratio compares the luminance of the lighter color with the darker one:
ratio = (L_lighter + 0.05) / (L_darker + 0.05)The result runs from 1:1, identical colors, up to 21:1, pure black on pure white. WCAG 2.1 draws its pass lines at 3, 4.5 and 7 depending on the text size and the level you are aiming for. This tool uses the exact formula from the specification, including the piecewise sRGB conversion, so its numbers match what an auditor's tooling will report.
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?
Normal text needs a contrast ratio of at least 4.5:1. Large text, which means 24px and up, or 18.66px and up if bold, needs at least 3:1.
What counts as large text?
Text that is at least 24px (18pt) at normal weight, or at least 18.66px (14pt) when bold. Everything smaller counts as normal text and needs the higher thresholds.
What does AAA require?
AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. It is worth aiming for on body copy people read for long stretches, but AA is the level most laws and audits reference.
Do links need their own contrast rules?
A link needs the same ratio against the background as any other text. If links are not underlined, they also need at least 3:1 against the surrounding text so color is not the only thing identifying them. Keeping links underlined is the simplest way to stay safe.
Does this tool upload or store my colors?
No. Everything runs in your browser. The share link encodes your colors in the URL itself, so nothing is sent to or saved on a server.
Are these the WCAG 2.2 thresholds too?
Yes. WCAG 2.2 kept the contrast thresholds from 2.1 unchanged. The APCA model sometimes mentioned alongside it is a draft for future guidelines and is not required by any current standard.
Free, no sign up, and nothing you pick leaves your browser. Part of the Coffee & Fun tools.