Free Speed & UX tool
Color Contrast Checker
Check any text and background pair against WCAG, and get the closest colors that pass, in the same hue.
- Free
- No sign-up
- Runs in your browser
#6b7280 · rgb(107 114 128) · hsl(220 9% 46%)
#ffffff · rgb(255 255 255) · hsl(0 0% 100%)
Hex, rgb(), hsl() and CSS color names all work.
Contrast ratio
4.83:1
Passes AA for all text. AAA body text needs 7:1.
- 4.5:1 Pass
AA normal text
Body text under 24 px, or under 18.66 px bold
- 3:1 Pass
AA large text
24 px and up, or 18.66 px bold
- 7:1 Fail
AAA normal text
The enhanced level for body text
- 4.5:1 Pass
AAA large text
The enhanced level for large text
- 3:1 Pass
UI components & graphics
Icons, borders and focus rings
Preview
Large text at 24 px
Normal text at 16 px. This is how a paragraph of body copy reads on your background, for the visitors with less than perfect eyesight too.
Closest passing colors
Same hue, only lighter or darker, measured in OKLCH so the color still feels like yours.
Change the text color
AA · 4.5:1
Already passes
AAA · 7:1
#5359677.01:1
Change the background
AA · 4.5:1
Already passes
AAA · 7:1
No shade of this hue gets there.
What it checks
Contrast ratio
The WCAG 2.x ratio, from 1:1 to 21:1, never rounded up to a pass.
AA and AAA
Pass or fail for normal text (4.5:1 and 7:1) and large text (3:1 and 4.5:1).
UI components
Icons, borders and focus rings need 3:1 against what’s next to them.
Live preview
Body text, large text, buttons and an icon on your colors.
Closest passing colors
The smallest lightness change that passes AA or AAA, for the text or the background.
Any color format
Hex, rgb(), hsl() and CSS names, with transparency blended in. Share it with a link.
Questions
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text, icons and the edges of controls. AAA raises text to 7:1, or 4.5:1 when it’s large.
What counts as large text?
At least 24 px, or at least 18.66 px when bold. That’s 18 pt and 14 pt bold in WCAG’s terms.
How are the suggestions picked?
We keep the hue and change only the lightness, in the OKLCH color space, until the pair passes. You get the closest shade that clears the bar, so the color still feels like yours.
What about transparent colors?
A translucent text color is blended over the background first, the way the browser paints it. A translucent background is measured on a white page.