Color Contrast Checker
Check WCAG color contrast ratio between text and background colors.
Large text preview
Normal text preview looks like this.
About Color Contrast Checker
Check whether your text and background color combination meets WCAG 2.1 accessibility contrast requirements. AA is the minimum recommended standard; AAA is the enhanced standard for better readability.
What Is This Tool?
Check whether a foreground (text) and background color combination meets WCAG 2.1 accessibility contrast standards. Get an instant contrast ratio and pass/fail results for AA and AAA compliance levels.
How to Use
- Pick or type a hex value for the foreground (text) color.
- Pick or type a hex value for the background color.
- Review the live preview and the pass/fail results for each WCAG level.
Common Use Cases
- Verifying text and background color choices meet accessibility guidelines before shipping a design
- Choosing readable color combinations for buttons, links, and body text
- Auditing an existing website or app for accessibility compliance
Tips & Tricks
- AA (4.5:1) is the minimum standard most websites should meet for normal text.
- Large text (18pt+, or 14pt+ bold) has a lower required ratio since it's easier to read at lower contrast.
Check WCAG color contrast ratio between text and background colors. Verify AA/AAA accessibility compliance instantly, free and online.
contrast checker · wcag contrast · color contrast ratio · accessibility checker · online tool