Color contrast checker
Enter your text and background colors. Instantly see the contrast ratio, WCAG AA/AAA pass/fail status, how it looks with color blindness, and suggestions for accessible alternatives. No signup required.
Normal text (16px)
The quick brown fox jumps over the lazy dog.
Large text (24px bold)
Aa Bb Cc 1 2 3
Contrast ratio
17.40:1
Preview on components
How your colors look in real UI elements.
Card heading
This is how body copy looks in a card with your color combination. Readable or not?
Color blindness simulation
How your palette looks to people with different types of color vision deficiency.
Aa Bb 123
Normal vision
Aa Bb 123
Protanopia
Aa Bb 123
Deuteranopia
Aa Bb 123
Tritanopia
Understanding WCAG contrast levels
WCAG 2.1 defines four contrast requirements. Here's what each one means.
AA — Normal text
Required for regular body text (under 18pt or 14pt bold). This is the minimum standard for most web content under WCAG 2.1.
AA — Large text
Required for large text (18pt or 14pt bold and above) and UI components like input borders and focus indicators.
AAA — Normal text
Enhanced standard for body text. Not required for everything, but recommended for text that people will read at length.
AAA — Large text
Enhanced standard for large text. Achieving this gives your design the highest accessibility certification for visual content.
Exempt from contrast requirements: Decorative images, logos, inactive UI elements (disabled buttons), and text that is part of a logo or brand name. Everything else that communicates information must pass.
Practical accessibility tips
Contrast ratio is just one piece of accessible design.
Test your most-read text first
Start with body copy, headings, and navigation links. These are where people spend most of their reading time and where contrast failures hurt most.
Don't rely on color alone
Contrast is necessary but not sufficient. Use shape, pattern, and labels alongside color to convey information - especially in charts and status indicators.
Check interactive states too
Test buttons, links, form inputs, and focus indicators in all states: default, hover, focus, disabled. WCAG 2.1 requires 3:1 contrast for UI component boundaries.
Consider low vision contexts
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Many more have low vision from age, environment, or screen conditions.
Aim for AA as the floor, not the ceiling
AA compliance is the legal minimum in most jurisdictions. Designing closer to AAA standards (7:1) creates a better experience for everyone - including readers in bright sunlight.
What is color contrast ratio?
Color contrast ratio is a measure of how much a foreground color (usually text) stands out against its background. A ratio of 1:1 means the colors are identical - no contrast at all. A ratio of 21:1 is the maximum, achieved by pure black on pure white.
WCAG (Web Content Accessibility Guidelines) sets minimum contrast thresholds because insufficient contrast is one of the most common barriers to reading on the web. It affects people with low vision, color vision deficiencies, and anyone viewing content in non-ideal conditions - glare, cheap screens, bright sunlight, or simply tired eyes at the end of the day.
The contrast ratio formula
For each color channel (R, G, B):
sRGB = channel / 255
linear = sRGB ≤ 0.04045 ? sRGB / 12.92 : ((sRGB + 0.055) / 1.055)^2.4
Luminance L = 0.2126 R + 0.7152 G + 0.0722 B
Contrast = (L_lighter + 0.05) / (L_darker + 0.05)
The 0.05 offset prevents division-by-zero and reflects that even pure black has some luminance in practical display conditions. The human eye is most sensitive to green light, which is why green has the highest coefficient (0.7152) in the luminance formula.
How contrast relates to conversion
Poor contrast isn't just an accessibility issue - it directly hurts conversions. Low-contrast CTAs, hard-to-read pricing, and washed-out form labels all reduce engagement. Every visitor who can't comfortably read your content is a conversion you've already lost. Accessible contrast is good design with measurable business impact.
On-site survey data consistently shows that form completion rates drop sharply when form elements fail AA contrast. Placeholder text at 3:1 contrast (a common failure) sees noticeably lower fill rates than placeholder text at 4.5:1. Small change, real impact.
Frequently asked questions
Common questions about color contrast and WCAG accessibility.
What is WCAG and why does contrast matter?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility published by the W3C. Contrast requirements exist because low contrast between text and background makes content hard or impossible to read for people with low vision, color vision deficiencies, or anyone in challenging lighting conditions. WCAG 2.1 defines minimum contrast ratios to ensure text is legible for the widest possible audience.
What's the difference between AA and AAA compliance?
AA is the standard minimum - a 4.5:1 contrast ratio for normal text, 3:1 for large text. It's what most accessibility guidelines, legal standards, and audits require. AAA is the enhanced standard - 7:1 for normal text, 4.5:1 for large text. AAA is recommended for text that people read at length, like long-form articles, but isn't required for all content. Most teams target AA as the baseline and aim for AAA where practical.
What counts as 'large text' in WCAG?
WCAG defines large text as 18pt (24px) or larger, or 14pt (approximately 18.67px) or larger if the text is bold. Large text has a lower contrast requirement (3:1 for AA) because it's inherently more legible at lower contrast. Decorative text, logos, and inactive UI elements are exempt from contrast requirements entirely.
How is contrast ratio calculated?
Contrast ratio is calculated using relative luminance - a measure of how light or dark a color appears. The formula converts each RGB color channel to a linear value, combines them using the WCAG formula (L = 0.2126 R + 0.7152 G + 0.0722 B), then calculates the ratio between the two luminance values plus 0.05 offset. The ratio ranges from 1:1 (no contrast, identical colors) to 21:1 (pure black on pure white).
What are the most common contrast failures?
Gray text on white backgrounds (very common in 'minimal' designs), light blue or teal links on white, yellow or orange text anywhere, disabled form fields with gray text, placeholder text in inputs, and small print disclaimers. Also watch for text overlaid on images or gradient backgrounds - the contrast check needs to be done against the darkest and lightest parts of the background.
What's color blindness, and how does it affect contrast?
Color blindness affects how people perceive colors. About 8% of men and 0.5% of women have some form of it. The most common types are protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind). This tool simulates how your colors appear under each condition. Importantly, a color pair that passes contrast in normal vision can fail for someone with color blindness - so the simulation gives you a more complete picture.
Is my website legally required to meet WCAG contrast standards?
In many jurisdictions, yes. The EU Web Accessibility Directive requires public sector websites to meet WCAG 2.1 AA. In the US, the ADA and Section 508 are increasingly interpreted to require WCAG compliance for websites. Many private companies also face legal pressure. But beyond compliance, accessible design is simply better design - it improves readability for everyone, including people reading in bright sunlight or on low-quality screens.