Color Contrast Checker
Check a11y color contrast ratios against WCAG AA and AAA thresholds.
About this tool
Measure foreground and background colors against WCAG 2.x contrast ratios for normal and large text. Reports AA and AAA pass/fail so you catch a11y issues before shipping.
Enter hex, RGB, or HSL values or use the picker for brand palettes, button states, and link colors. For a deeper walkthrough, see the a11y color contrast guide on the blog.
Color values are evaluated locally — nothing is sent to external services.
How to use
- Enter foreground and background colors as hex (#1a1a1a on #ffffff).
- Read the contrast ratio and WCAG AA / AAA pass/fail for normal and large text.
- Adjust colors until AA at least passes for body copy (4.5:1).
- Aim for AAA (7:1) when designing long-form reading experiences.
Example
Near-black on white
Input
fg: #1a1a1a bg: #ffffff
Output
Contrast ratio: 16.10:1 WCAG AA (normal text): PASS WCAG AAA (normal text): PASS
Limitations
- Checks solid hex pairs only — gradients, images, and transparency need separate evaluation.
- Large-text thresholds assume CSS large-text definitions; UI chrome may differ.
- Does not replace full accessibility audits (focus order, semantics, motion).
Related guides
1Related tools
2Frequently asked questions
What is a11y color contrast?
A11y (accessibility) color contrast measures how readable text is against its background. WCAG requires minimum ratios — 4.5:1 for normal text and 3:1 for large text at Level AA.
Which WCAG levels does the contrast checker test?
It evaluates contrast ratios against WCAG 2.x AA and AAA thresholds for normal and large text.
When should I check color contrast?
Before shipping UI components, especially buttons, links, and text on tinted backgrounds. Catch issues early in design and development.
Is the Color Contrast Checker free?
Yes. No signup required.
Are my colors sent to a server?
No. All calculations run in your browser.
Where can I learn more about accessibility?
Read the WCAG color contrast guide on the codefunc blog for ratios, examples, and practical tips.