PickCode- Home
- Free tools
- WCAG contrast checker
WCAG contrast checker
Enter a text and background color to see the ratio and each WCAG result. If it fails, you get the closest color that passes.
4.75:1contrast ratio
- AA text4.5:1Pass
- AA large text3:1Pass
- AAA text7:1Fail
- AAA large text4.5:1Pass
- UI and icons3:1Pass
#4d5a6bCheck contrast on any live page
PickCode shows the WCAG contrast ratio when you hover an element, then copies it as Tailwind, React, Blade or HTML + CSS. 5 free elements a day.
How the contrast ratio is calculated
WCAG compares the relative luminance of the two colors. Each channel is converted to linear light, weighted for how the eye sees it, then the lighter color is divided by the darker one with 0.05 added to each.
channel = c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
ratio = (lighter + 0.05) / (darker + 0.05)| Level | Text | Large text | UI and icons |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | Not defined |
What to know
- No rounding up
- WCAG thresholds are exact, so 4.499:1 fails AA. The ratio here is cut to two decimals and never rounded up to a pass.
- Closest passing color
- The suggestion moves your text color toward black or white by the smallest amount that passes, so the hue stays close to your brand color.
- Any solid CSS color
- Hex,
rgb(),hsl(),oklch()and names likerebeccapurpleall work. Transparent colors need a background to blend with, so they are refused. - Stays on your machine
- Everything is calculated in this tab. Nothing is uploaded.
Questions
What contrast ratio does WCAG AA require?
4.5:1 for normal text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1.
What counts as large text?
At least 18pt, or 14pt bold. In CSS pixels that is about 24px, or 18.66px bold.
Do buttons and icons need contrast too?
Yes. Success criterion 1.4.11 asks for 3:1 for meaningful icons and the visible edges of controls. Disabled controls and logos are exempt.
How do I check text on a transparent background?
Work out the solid color it ends up as on screen, then check that. DevTools can pick the rendered color. Text over images needs a check against the lightest and darkest parts behind it.
What about APCA and WCAG 3?
APCA is a newer contrast method proposed for a future version of WCAG. WCAG 2 ratios are what current standards and audits use, so this checker follows those.
Sources
- W3C: Understanding contrast (minimum)
- W3C: Understanding non-text contrast
- W3C: Technique G18, contrast ratio