How to use this tool
- Enter text and background colors in HEX format.
- Review the contrast ratio and WCAG AA/AAA pass/fail for normal and large text.
- Copy values or adjust colors until your combination meets the required level.
About Color Contrast Checker
This tool helps designers and developers ensure text is readable against its background by WCAG 2.1 standards. It applies to UI design, design systems, and accessibility audits where contrast ratios matter.
Common use cases
- Validating brand color combinations for body and heading text
- Checking contrast before shipping UI components or design tokens
- Auditing existing interfaces for WCAG AA or AAA compliance
FAQ
- What does this color contrast checker do?
- It computes the contrast ratio between a text color and a background color using the WCAG 2.1 formula, then reports pass or fail for WCAG AA and AAA at normal and large text sizes.
- Does this tool send my colors to a server?
- No, all contrast calculations run in your browser. Colors are never sent to a server or stored.
- What color formats are supported?
- The checker accepts HEX colors only, including shorthand forms like #fff. Use a color converter first if you have RGB or HSL values.
- Why does my ratio show pass for large text but fail for normal?
- WCAG allows a lower ratio for large text (18pt+ or 14pt+ bold). If your ratio is between 3:1 and 4.5:1, it passes AA for large text but fails for normal body text.