Color Contrast Checker
About Color Contrast Checker
Color Contrast Checker measures the luminance contrast ratio between any two colors and grades it against WCAG 2.1 guidelines for AA and AAA compliance. Pick colors from the native color picker or type HEX values, then preview how they look together and export a ready-to-share report.
Key Features
- Compute exact contrast ratios using WCAG 2.1 luminance formula
- Separate pass/fail badges for AA small, AA large, AAA small, AAA large, and UI components
- Live visual preview with your actual foreground and background
- Color picker and HEX input for fast iteration
- One-click swap of foreground and background
- Copy a plain-text WCAG report for code reviews or tickets
Use Cases
- Audit buttons, links, and form inputs for accessibility compliance
- Verify text against branded background colors before shipping
- Choose accessible gradient stops for marketing pages
- Document accessibility for clients or legal (EU accessibility act, ADA)
- Train designers and developers on WCAG criteria with instant feedback
Pro Tips
- 4.5:1 is the floor for normal body text. Aim for 7:1 if you can.
- Large text (≥ 18 pt or 14 pt bold) needs only 3:1 under AA.
- UI components (form borders, icons) need 3:1 against their background.
- Test the actual font weight you ship — thin fonts need higher contrast than the spec suggests.
- Don't rely on color alone; pair contrast with icons or text labels for color-blind users.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA?
4.5:1 for normal text, 3:1 for large text (≥ 18 pt or 14 pt bold), and 3:1 for UI components and graphical objects.
What is the difference between AA and AAA?
AAA is stricter: 7:1 for normal text, 4.5:1 for large text. Many regulated industries (government, healthcare) require AA; AAA is a best-effort goal.
Which color formats does the tool accept?
Standard 3- or 6-digit HEX values (#abc or #aabbcc). Pair with our Color Converter to translate RGB, HSL, or CMYK to HEX first.
Why does my brand color fail contrast on white?
Saturated mid-tones (bright blues, greens) often sit near the middle of the luminance range. Darken the foreground (or invert to dark background + light text) until you hit at least 4.5:1 for body copy.