Color Contrast Checker
Check the contrast ratio between two colors to ensure your designs meet WCAG accessibility standards. Essential for web accessibility compliance.
Pick Your Colors
Preview
Sample Text
This is how your text will look on this background.
Contrast Ratio
Good contrast
understanding contrast
About Color Contrast
What Is Color Contrast?
Color contrast measures the difference in luminance between two colors — typically text and its background. The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios that determine whether text is readable for people with low vision, color blindness, or anyone viewing a screen in bright sunlight. A contrast ratio of 4.5:1 is the minimum for normal-sized body text under WCAG AA, while 7:1 achieves the stricter AAA level. Large text (18pt or 14pt bold) has a lower threshold of 3:1 for AA.
The ratio is calculated from the relative luminance of each color using a formula defined in the WCAG specification. Pure black on pure white gives the maximum ratio of 21:1, while two similar mid-tone colors might produce a ratio as low as 1.5:1 — far too low for comfortable reading. Roughly 2.2 billion people worldwide have some form of vision impairment, and even people with normal vision struggle with low-contrast text on mobile devices in bright environments.
Why Contrast Matters for Your Design
- Accessibility compliance: WCAG contrast requirements are legal standards in many countries. Failing them can result in lawsuits under the Americans with Disabilities Act (ADA) and similar legislation.
- Readability and engagement: Higher contrast means faster reading, fewer errors, and less eye strain. Users spend more time on pages they can comfortably read, which impacts bounce rates and conversion.
- SEO signals: Search engines increasingly factor accessibility into rankings. Sites that are hard to read have higher bounce rates, which search engines interpret as low quality.
- Inclusive design: Checking contrast is the single easiest way to make your site usable for the widest possible audience — no code changes required, just better color choices.
How to Use This Contrast Checker
Enter any two hex, RGB, or HSL color values in the fields above. The tool instantly calculates the contrast ratio and tells you whether the combination passes WCAG AA (4.5:1 for normal text, 3:1 for large text) and WCAG AAA (7:1 for normal text, 4.5:1 for large text). You can swap foreground and background colors with one click, and the live preview shows exactly how your text will look at different sizes.
A practical workflow: start with your background color, then test different text colors until you find one that passes AA at minimum. For body text that will be read for extended periods, aim for AAA. For text on colored backgrounds (buttons, badges, callouts), check every color combination individually — the ratio changes with every pair.
Common Contrast Mistakes to Avoid
- Relying on color alone: two colors can have adequate contrast but be indistinguishable for color-blind users. Always pair color with text labels, icons, or patterns.
- Testing only black on white: real designs use colored backgrounds, overlays, and gradients. Test every text-background pair in your actual design, not just the theoretical best case.
- Ignoring hover and focus states: interactive elements change color on hover and focus. Each state needs its own contrast check — a button that passes at rest may fail on hover.
- Forgetting dark mode: a combination that passes in light mode may fail in dark mode. Audit both themes and treat dark mode as a separate color system.
Contrast Checker FAQ
What is the minimum contrast ratio for web text?
WCAG AA requires 4.5:1 for normal-sized text (under 18pt) and 3:1 for large text (18pt or 14pt bold). WCAG AAA raises these to 7:1 and 4.5:1 respectively. Meeting AA is the widely accepted baseline for most websites.
Does contrast matter for images and icons?
Yes. WCAG requires a 3:1 contrast ratio for meaningful graphics and UI components like icons, form borders, and chart elements. The same contrast principles apply whenever visual information must be perceivable.
How do I fix low contrast without changing my brand colors?
Use a darker shade of your brand color for text, or lighten the background. Often adjusting lightness by 10-20% in HSL is enough to cross the 4.5:1 threshold while keeping the same hue family intact.