Related Tools
How to Use
- 1Enter or pick a foreground (text) color using the color picker or by typing a hex code (e.g., #1a1a1a).
- 2Enter or pick a background color the same way.
- 3Read the live preview showing how the text looks at that color combination.
- 4Check the contrast ratio — if it fails WCAG AA (needs 4.5:1 for normal text), darken the text color or lighten the background until the ratio passes.
- 5Confirm AAA compliance (7:1 ratio) for critical UI text like form labels, navigation, and error messages.
- 6Note the large text thresholds: text at 18pt (24px) or larger, or 14pt bold or larger, only needs a 3:1 ratio for AA and 4.5:1 for AAA.
About Color Contrast Checker
The Color Contrast Checker calculates the contrast ratio between two colors following WCAG 2.1 guidelines. It helps designers and developers ensure their text is readable for users with visual impairments, including color blindness and low vision.
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+). AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these thresholds is essential for ADA compliance and inclusive web design.
All calculations run locally in your browser. No data is transmitted — safe for testing confidential branding colors and client design systems before launch.
Frequently Asked Questions
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is a set of standards for making web content accessible to people with disabilities, including color blindness and low vision.
What's the difference between AA and AAA?
AA is the minimum recommended standard (4.5:1 for normal text). AAA is a higher standard (7:1 for normal text) that provides better accessibility for users with more severe visual impairments.
What counts as large text?
Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger.
Does this support RGB or HSL input?
Currently it accepts hex color codes. Use the color picker for visual selection, which converts to hex automatically.
Why does color contrast matter for SEO?
Google considers page experience signals including accessibility. Poor contrast can increase bounce rates and harm Core Web Vitals scores, indirectly affecting search rankings.