Color Contrast Checker
Check if your color combinations meet WCAG 2.1 accessibility guidelines. Ensure your designs are readable for all users.
Select Colors
Contrast Ratio
Live Preview
Sample Heading Text
This is how your normal body text will appear with the selected color combination. Make sure it's easy to read for all users.
This is smaller text that might be used for captions, footnotes, or secondary information.
WCAG 2.1 Contrast Requirements
AA Normal Text
4.5:1Minimum for body text, captions, form labels
AA Large Text
3:1Headings 18pt+ or 14pt bold
AAA Normal Text
7:1Enhanced accessibility for all users
AAA Large Text
4.5:1Enhanced for headings and large elements
The Web Content Accessibility Guidelines (WCAG) define contrast requirements to ensure text is readable by people with moderately low vision. These guidelines are the global standard for web accessibility and are referenced by laws like the ADA and EN 301 549.
Why Color Contrast Matters
Visual Impairments
Over 2.2 billion people globally have vision impairments. Good contrast helps them read your content.
Color Blindness
8% of men and 0.5% of women have color vision deficiency. Contrast ensures readability regardless of color perception.
Situational Limitations
Bright sunlight, old monitors, or mobile screens in various conditions affect readability for everyone.
Aging Population
Contrast sensitivity decreases with age. Accessible design benefits an increasingly older user base.
Legal Compliance
Many countries require WCAG compliance. Non-compliance can result in lawsuits and penalties.
Better UX for All
Good contrast improves readability and reduces eye strain for all users, not just those with disabilities.
Frequently Asked Questions
What is color contrast and why does it matter?
Color contrast is the difference in luminance between foreground (text) and background colors. High contrast makes text easier to read, especially for people with visual impairments, color blindness, or those viewing in poor lighting conditions.
What are WCAG contrast requirements?
WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold) at Level AA. Level AAA requires 7:1 for normal text and 4.5:1 for large text for enhanced accessibility.
What's the difference between WCAG AA and AAA?
Level AA is the minimum standard most websites should meet, with 4.5:1 contrast for normal text. Level AAA is the enhanced standard with 7:1 contrast, providing better readability for users with more severe visual impairments.
What counts as 'large text' in WCAG?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.5px) or larger for bold text. Large text has lower contrast requirements because it's inherently easier to read.
How is contrast ratio calculated?
Contrast ratio is calculated using relative luminance values of the colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance.
Does this tool work for color blindness?
This tool checks contrast ratio, which helps color blind users. However, contrast alone doesn't guarantee color blind accessibility. Avoid relying solely on color to convey information, and use patterns or labels as additional cues.
Is WCAG compliance legally required?
In many countries, yes. The ADA in the US, EN 301 549 in Europe, and similar laws worldwide require websites to be accessible. WCAG 2.1 AA is the commonly referenced standard for legal compliance.
What if my brand colors don't pass contrast checks?
You can adjust the shade (lighter or darker) of your brand colors for text use while keeping the original for decorative elements. Alternatively, use high-contrast colors for text and reserve brand colors for accents.
Need Help with Accessible Design?
We design and build accessible web applications that comply with WCAG guidelines and provide great user experiences for everyone.
Free accessibility audit for new clients.