Tools / ACCESSIBILITY
Color Contrast Checker
Test any text and background color pair against WCAG 2.1 accessibility standards — before your users (or an audit) do.
ABOUT THIS TOOL
Low-contrast text looks sleek in a mockup and fails real people on real screens. About 1 in 12 men has some form of color-vision deficiency, and contrast is one of the most common accessibility failures on the web. This free WCAG contrast checker gives you the exact contrast ratio for any color pair and tells you at a glance whether it passes AA and AAA for normal and large text.
How to use it
-
01
Set your text color
Type a hex value or pick from the swatch.
-
02
Set your background color
Same — hex or picker, with a live preview of real text.
-
03
Read the ratio and badges
See the contrast ratio plus AA/AAA pass or fail for normal and large text.
-
04
Swap and iterate
Flip foreground and background in one click to test both directions.
What people use it for
- Checking brand colors meet WCAG before launch
- Fixing accessibility issues flagged in an audit
- Choosing accessible text colors for a design system
- Verifying buttons and links are legible for everyone
The E-Commerce
Growth Playbook
17 moves that turn a store into a revenue machine — the exact levers our team pulls for the brands we build and grow.
- Convert more of the traffic you already pay for
- Speed wins that lift revenue on every visit
- Retention flows that make the second sale cheaper
- Ad math so you scale in profit, not blind
Enjoy the playbook!
Your download should start automatically. If it doesn’t, grab it here.
Frequently Asked
Questions
Common questions about this free tool.
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1. The tool checks all four for you.
Why does accessibility matter for my store?
Beyond being the right thing to do, accessible sites reach more customers and reduce legal risk. We build to WCAG standards by default — see web development.
Does this cover all of accessibility?
No — contrast is one piece. Full accessibility also covers keyboard navigation, semantic markup, and screen-reader support, all of which we handle in a proper build.
Current store performance