Test your foreground and background color combinations against WCAG 2.1 guidelines.
Color contrast refers to the difference in light between foreground (text) and background colors. WCAG 2.1 guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Low contrast is the most common accessibility violation, affecting users with low vision, color blindness, or reading on mobile devices in bright sunlight.
Poor contrast not only makes content unreadable for millions of users but also violates ADA Title III, EAA, Section 508, and WCAG 2.1 Level AA. Lawsuits citing insufficient contrast have increased 40% since 2023. Search engines also favor high-contrast, readable text — improving bounce rates and dwell time.
Our free WCAG contrast checker calculates the relative luminance of your chosen colors and instantly tells you if they meet WCAG 2.1 standards. Just pick a foreground and background color using the pickers below — the tool handles the math.
Minimum ratio: 4.5:1 — Required for body text, paragraphs, and small icons. Common failures: light gray text on white backgrounds (#888 on #FFF fails). Our checker highlights these instantly.
Minimum ratio: 3:1 — Applies to headings (18pt / 24px) or bold text (14pt). Use our tool to verify headline contrast without guesswork.
For higher accessibility, aim for 7:1 (normal text) and 4.5:1 (large text). While not mandatory for ADA/EAA, achieving AAA can differentiate your brand and reduce legal risk from plaintiffs who test for superior accessibility.
Use the interactive color pickers below to test your brand colors. AccessiTool's free color contrast analyzer ensures your design meets global standards before launch.
Now that you understand how our color contrast checker works, let's dive deeper into WCAG color contrast requirements — including all contrast ratios, how to test, common failures, and compliance checklists.
Color contrast refers to the difference in luminance (brightness) between foreground (text) and background colors. The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA requires specific contrast ratios to ensure text is readable by users with low vision or color blindness.
Poor color contrast accessibility is the #1 most common accessibility violation found on websites today. It affects millions of users with visual impairments and is frequently cited in ADA lawsuits.
The WCAG contrast checker standards define three levels of compliance:
AA compliance is required by ADA, EAA, Section 508, HHS, and most accessibility laws. AAA compliance is recommended for enhanced accessibility but not mandatory.
There are multiple ways to check color accessibility on your website:
Use our WCAG color contrast checker. Simply enter your foreground and background hex codes, and the tool will instantly calculate the contrast ratio and tell you if it meets WCAG 2.1 standards.
Use our ADA compliance checker which includes automated color contrast testing across your entire website, not just individual color combinations.
Example: #888888 on #FFFFFF
Ratio: Approximately 2.8:1 — Fails WCAG AA
Fix: Darken text to #555555 or darker (ratio becomes 5.2:1)
Example: #FF0000 on #333333
Ratio: Approximately 3.5:1 — Fails for normal text
Fix: Use a brighter red or lighter background
Example: #0000FF on #99CCFF
Ratio: Approximately 2.1:1 — Fails WCAG AA
Fix: Darken the link text to #000066 or lighter background
Example: #FFFF00 on #FFFFFF
Ratio: Approximately 1.1:1 — Severe failure
Fix: Use dark text on light backgrounds or dark backgrounds for light text
Example: #999999 on #FFFFFF
Ratio: Approximately 2.9:1 — Fails WCAG AA
Fix: Darken placeholder text to #767676 (4.5:1 ratio) or use a separate label
Under ADA Title III, websites must be accessible to people with disabilities. While the ADA doesn't specify exact technical standards, courts consistently reference WCAG 2.1 Level AA, which includes color contrast requirements:
ADA color contrast requirements apply to all text, buttons, form fields, and meaningful graphics. Non-compliance can result in lawsuits with settlements ranging from $10,000 to $50,000+.
Section 508 requires federal agencies and their contractors to make electronic content accessible. The Section 508 color contrast standards also reference WCAG 2.1 Level AA:
Section 508 compliance color checker is required for any organization that receives federal funding or contracts with the US government.
AODA (Accessibility for Ontarians with Disabilities Act) also requires WCAG 2.1 Level AA compliance:
Approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) have some form of color blindness. That's over 300 million people worldwide. When checking color accessibility for color blindness, consider:
Test colors for accessibility by simulating color blindness using our color accessibility test tool.
Text accessibility checker tools validate body text, headings, and captions against WCAG ratios.
Buttons require 3:1 contrast for the button background vs surrounding background, and 4.5:1 contrast for button text vs button background.
Input borders need 3:1 contrast against background. Placeholder text needs 4.5:1 contrast (or use labels).
Icons that convey information need 3:1 contrast against background.
Focus indicators (the outline shown when tabbing) need 3:1 contrast against adjacent colors.
The WebAIM contrast checker is one of the most popular tools. Webaim color contrast and webaim org contrast checker are frequently searched. However, WebAIM only tests one color combination at a time and doesn't provide batch analysis.
Adobe contrast checker (also called adobe accessibility color checker) is built into Adobe XD, Photoshop, and Illustrator. Great for designers, but requires Adobe subscription and software installation.
TPGi color contrast analyzer (also called tpgi color contrast analyzer) is a desktop application for Windows. It tests color combinations and simulates color blindness. Free but requires download.
Our website color contrast checker is 100% free, works in any browser, tests real-time, supports color blindness simulation, and integrates with our full accessibility testing suite.
Color palette accessibility checker tools help you design brand colors that meet WCAG standards:
Use our color palette accessibility checker to validate your entire brand color system at once.
An online contrast checker is useful for:
For full website compliance, use our ADA compliance checker which tests color contrast across your entire site, plus all other WCAG criteria.
A contrast ratio checker calculates the relative luminance of two colors using this formula:
(L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker color's luminance.
Luminance is calculated using the sRGB color space formula. Don't worry — our contrast ratio checker does all this math for you automatically.
The WCAG contrast checker formula ensures that people with 20/40 vision (typical for low vision) can read text with adequate contrast.
WCAG 2.1 added new success criteria but did not change color contrast requirements. The contrast ratios (4.5:1 and 3:1) remain the same as WCAG 2.0 color contrast. However, WCAG 2.1 color contrast checker tools also consider:
WCAG 2.2 (published 2023) did not change text contrast ratios. However, it added:
Our wcag 2.2 color contrast checker will continue to use the same 4.5:1 and 3:1 ratios for text.
4.5:1 is the minimum contrast ratio for normal text under WCAG 2.1 Level AA. This is the standard required by ADA, EAA, and Section 508.
3:1 is the minimum contrast ratio for large text (18pt / 24px and above, or 14pt / 18.5px bold).
Use our WCAG color contrast checker. Enter your foreground and background hex codes, and the tool will instantly calculate the ratio and tell you if it passes.
AccessiTool's color contrast analyzer is completely free, supports WCAG 2.1 and 2.2, includes color blindness simulation, and is web-based with no download required.
WebAIM contrast checker (also called webaim color contrast or webaim org contrast checker) is a popular free tool from WebAIM. However, it only tests one color combination at a time.
The adobe color contrast checker (also called adobe contrast checker or color accessibility checker adobe) is built into Adobe XD, Photoshop, and Illustrator. It requires Adobe subscription and software installation.
A contrast ratio is a number between 1:1 (no contrast, same color) and 21:1 (maximum contrast, black on white). WCAG requires 4.5:1 for normal text.
Yes. Poor contrast increases bounce rates (users leave because they can't read content). Lower bounce rates and longer dwell time are positive SEO signals for Google.
ADA color contrast requirements follow WCAG 2.1 Level AA: 4.5:1 for normal text, 3:1 for large text. ADA color checker tools help you verify compliance.
Section 508 color contrast also follows WCAG 2.1 Level AA. 508 compliance color checker tools ensure federal websites meet accessibility standards.
Use our ADA compliance checker which includes automated color contrast testing across your entire website, not just individual color combinations.
AAA compliance requires 7:1 for normal text and 4.5:1 for large text. While not mandatory for ADA/EAA, achieving AAA can differentiate your brand.
Our color accessibility test includes color blindness simulation for protanopia, deuteranopia, and tritanopia — showing you how your website appears to color-blind users.
AODA colour checker follows WCAG 2.1 Level AA: 4.5:1 for normal text, 3:1 for large text. Ontario's AODA law requires accessibility for public and private sector.
Use our online contrast checker at accessitool.com/tools/color-contrast.html. Enter hex codes and get instant results.
Don't let poor color contrast accessibility put your business at risk of an ADA lawsuit or exclude millions of users. Check your website's color accessibility now — it's free and takes less than 60 seconds.
🎨 Start Your Free Color Contrast Check
Check Color Contrast Now →AA & AAA standards
Instant results
See the contrast