ShipcheckColor contrast checker
Pick two colors to check them against WCAG 2.2 AA and AAA. If they fail, get the closest on-brand color that passes. Everything runs in your browser.
Large text preview (24px bold)
Normal body text preview. The quick brown fox jumps over the lazy dog.
4.83:1
Passes WCAG AA
Contrast ratio between #6b7280 and #ffffff
AA normal text
AA large text
AAA normal text
AAA large text
UI components & icons
Contrast is the most common accessibility failure
Low-contrast text shows up on most of the top million home pages in the WebAIM Million report, year after year. It is also one of the easiest issues to fix: usually a single color token in your design system.
Tips for designers and developers
- Check grey body text and placeholder text first; they fail most often.
- Test text on top of images and gradients at the lightest point behind the text.
- Check hover, focus, and disabled states, not only the default.
- Fix it in your design tokens so every component inherits the fix.
Questions
What contrast ratio does WCAG 2.2 AA require?
4.5:1 for normal text, 3:1 for large text (24px regular or 18.66px bold and up), and 3:1 for UI components and meaningful graphics such as icons, input borders, and focus indicators.
What about AAA?
AAA needs 7:1 for normal text and 4.5:1 for large text. Most laws, including the ADA case law, Section 508, and the European Accessibility Act, point to AA, not AAA.
Why does 4.48:1 fail when it rounds to 4.5?
WCAG thresholds are exact. 4.48:1 is below 4.5:1, so it fails. This checker truncates instead of rounding, so it never shows a pass that an auditor would mark as a fail.
How is the suggested color chosen?
We keep the same hue and saturation and change only lightness until the pair reaches 4.5:1, so the fix stays on brand. You get one option for the text and one for the background.
Does placeholder text need to pass?
Yes. Placeholder text is text, so it needs 4.5:1. Disabled controls are exempt.
Related tools
Accessibility statement generator
Create an accessibility statement for the EAA and WCAG 2.2 in two minutes.
Open tool →Meta tag & social preview checker
See your Google, X, LinkedIn, and Slack previews and fix titles, descriptions, and OG images.
Open tool →Security headers checker
Grade HSTS, CSP, and four more headers, then copy the config for your host.
Open tool →