Color accessibility is not just good design — for US websites, it is a legal requirement. The Americans with Disabilities Act (ADA) requires that websites be accessible to users with disabilities, and color contrast is one of the most commonly cited accessibility failures. With thousands of ADA web accessibility lawsuits filed annually in US federal courts, color accessibility is a compliance issue that no American web designer or business owner can afford to ignore. In this guide, we cover everything you need to know about ADA-compliant color contrast and how to verify your website meets WCAG standards.
ADA and WCAG: What US Websites Must Do
The Americans with Disabilities Act was enacted in 1990 to prohibit discrimination based on disability. While the ADA was written before the web was ubiquitous, US courts have consistently ruled that websites are "places of public accommodation" and must comply with ADA accessibility requirements. The Department of Justice confirmed this in 2024, issuing a final rule that web content must conform to WCAG 2.1 Level AA.
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, developed by the W3C. It defines three conformance levels: A (lowest), AA (the standard most regulations reference) and AAA (highest). Level AA is the target for most US websites, as it balances accessibility with practical implementation.
Color accessibility falls under WCAG Success Criterion 1.4.3 (Contrast — Minimum), which requires that text has sufficient contrast against its background. This ensures that users with low vision, color blindness or other visual impairments can read the content. The requirement applies to all text except incidental text (like inactive UI elements) and logotypes.
Understanding Contrast Ratios
A contrast ratio is a numerical value that describes the difference in luminance (brightness) between two colors. The ratio ranges from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white). Higher ratios mean better visibility.
WCAG 2.1 Level AA requires:
4.5:1 for normal text (less than 18pt or 14pt bold).3:1 for large text (18pt or larger, or 14pt bold or larger).3:1 for user interface components and graphical objects (buttons, form fields, icons).
WCAG 2.1 Level AAA requires:
7:1 for normal text.4.5:1 for large text.
For most US websites, targeting Level AA (4.5:1 for normal text) is the standard. This ratio ensures readability for users with moderately low vision (20/40 vision). Level AAA (7:1) accommodates users with severe vision impairments (20/80 vision) but can be difficult to achieve with certain color schemes.
How to Check Color Contrast
Checking color contrast is straightforward with the right tool. The WCAG Contrast Checker from Automarkly lets you enter foreground and background colors (as HEX values) and instantly see the contrast ratio along with pass/fail indicators for WCAG AA and AAA levels.
For example, black text (#000000) on a white background (#FFFFFF) has a contrast ratio of 21:1 — the maximum possible, passing both AA and AAA. But light gray text (#999999) on a white background has a ratio of only 2.85:1, which fails both AA and AAA. To pass AA, you would need to darken the gray to at least #767676 (4.54:1 ratio).
The Color Picker helps you find the exact HEX values for your design colors, and the HEX to RGB Converter and HEX to HSL Converter let you convert between color formats as needed.
Building Accessible Color Palettes
Designing an accessible color palette requires more than just checking contrast at the end — it should be built into your design process from the start. Here is a practical approach:
Start with your brand colors. Identify your primary brand color and determine whether it can serve as a text color against white or dark backgrounds. If the contrast ratio is below 4.5:1, you will need a darker variant for text use.
Create a text color scale. For each brand color, create a range of shades from light to dark. Use the darkest shade for text and the lightest for backgrounds. The Color Palette Generator creates complementary shades from a base color.
Verify every text-background combination. Check the contrast ratio for every text color against every background color you plan to use. Common combinations: body text on page background, headings on section backgrounds, button text on button background, link text on page background, placeholder text in form fields.
Test with color blindness simulators. Contrast ratios address luminance differences, but color blindness affects hue perception. A combination that passes contrast requirements might still be confusing for users with color blindness if the colors are indistinguishable in their perception. Tools like the WCAG Contrast Checker help identify these issues.
Common Color Accessibility Issues
Low-contrast placeholder text. Form field placeholder text is often styled in a light gray that fails contrast requirements. While WCAG technically exempts placeholder text (it is not "content"), best practice is to make it readable. Use a contrast ratio of at least 3:1 for placeholders.
Disabled button states. Disabled buttons are often grayed out, but if the contrast is too low, users may not realize the button exists. While WCAG exempts inactive UI components, ensure disabled states are still distinguishable from the background.
Link text that relies on color alone. If links are only distinguished by color (no underline or bold), users with color blindness may not identify them as links. WCAG requires that links be distinguishable without color — typically by underlining.
Insufficient focus indicators. When a user tabs through a page with the keyboard, the focused element needs a visible focus indicator. WCAG 2.1 requires that focus indicators have at least 3:1 contrast against adjacent colors. A thin, low-contrast outline is a common failure.
ADA Lawsuits and Legal Risk
ADA web accessibility lawsuits have surged in the US. In 2023, plaintiffs filed over 4,500 federal lawsuits alleging web accessibility violations, and the trend continues upward. These lawsuits target businesses of all sizes — from small restaurants to Fortune 500 companies. The most common complaints include color contrast failures, missing alt text, keyboard navigation issues and missing form labels.
The legal landscape is clear: US courts consistently refer to WCAG as the standard for web accessibility compliance. The Department of Justice's 2024 rule formalizing WCAG 2.1 Level AA as the standard for state and local government websites further solidifies WCAG as the benchmark. While private businesses are not yet subject to the same formal rule, courts apply the same standard in private ADA lawsuits.
The cost of non-compliance is significant. ADA lawsuits typically result in settlements ranging from $10,000 to $100,000, plus the cost of remediation (fixing the accessibility issues) and attorney fees. For US businesses, investing in color accessibility upfront is far less expensive than defending a lawsuit.
Color Accessibility Checklist
Use this checklist to verify your website's color accessibility:
✓ All body text has a contrast ratio of at least 4.5:1 against its background.
✓ All large text (18pt+) has a contrast ratio of at least 3:1.
✓ All interactive elements (buttons, links, form fields) have at least 3:1 contrast.
✓ Focus indicators are visible with at least 3:1 contrast.
✓ Links are distinguishable without color alone (underline or bold).
✓ Color is not the sole means of conveying information (add text labels or icons).
✓ Placeholder text has at least 3:1 contrast (best practice, not required).
✓ The design is usable by users with common color blindness types.
For US web designers and business owners, color accessibility is both a design quality issue and a legal compliance issue. The WCAG Contrast Checker makes verification effortless — enter your colors, see the ratio and fix any failures. Every American website should pass this basic accessibility test.