ADA Website Color Contrast Requirements (US)

For a US website, ADA compliance in practice means meeting WCAG Level AA: a contrast ratio of at least 4.5:1 for normal text, 3:1 for large text, and 3:1 for icons, form borders and other meaningful UI graphics. No US law names a different number.

This guide is general information, not legal advice.

Which law applies to you

The Americans with Disabilities Act has three parts that matter for websites. Title III covers businesses open to the public: shops, restaurants, banks, SaaS products, media sites. The statute predates the web and never mentions contrast, but the Department of Justice has said for years that websites are covered, and courts measure "accessible" against WCAG. Almost every ADA web settlement requires WCAG 2.1 AA, so that is the practical standard.

Title II covers state and local governments. In April 2024 the DOJ published a rule that adopts WCAG 2.1 Level AA as the required technical standard for their web content and apps, with deadlines in 2026 for larger entities and 2027 for smaller ones (see the ADA.gov web guidance for current dates). Section 508 of the Rehabilitation Act covers federal agencies and their vendors; its 2017 refresh incorporates WCAG 2.0 Level AA (section508.gov). The contrast numbers are identical across all three.

The exact WCAG numbers

• 4.5:1 for normal text (Success Criterion 1.4.3, Level AA).
• 3:1 for large text: 14pt (about 18.66px) bold, or 18pt (24px) regular.
• 3:1 for UI components and meaningful graphics such as icons, input borders, focus rings and chart lines (1.4.11, Level AA, added in WCAG 2.1).
• 7:1 and 4.5:1 at Level AAA (1.4.6); not required by any of the laws discussed here.
• Logos and purely decorative text are exempt; disabled controls are exempt.

Real pairs, measured

These ratios are computed by the same formula WCAG defines, not typed in. Pass/fail is for normal body text at AA (4.5:1).

Common mistakes in US audits

• Light gray placeholder and helper text (#9CA3AF, #AAAAAA) on white: fails at about 2.5:1 and is the single most-cited issue in demand letters.
• White text on brand blues or oranges that look fine to the designer but land at 3:1 or less.
• Relying on color alone for errors or chart series; WCAG 1.4.1 requires a second cue such as an icon or label.
• Testing only the homepage. Checkout, login and PDF forms are where complaints are filed.
• Forgetting focus rings and input borders, which need 3:1 under 1.4.11.

Why contrast is where ADA enforcement starts

ADA website claims in the US are driven by private lawsuits, and the demand letters are produced by automated scanners. Contrast failures are the easiest thing a scanner can prove: it reads two colors, applies the WCAG formula, and prints a ratio. That is why contrast appears in the first paragraph of almost every complaint even when the real barrier for a blind user is a missing form label. Clearing contrast does not make a site accessible on its own, but it removes the most quotable evidence and signals that someone is paying attention. Plaintiffs' firms screen targets by the number of automated errors; a clean contrast report takes you off the easy list.

The same logic applies to the DOJ Title II rule for governments. Compliance reviews start with automated tooling such as axe or Lighthouse, both of which flag 1.4.3 and 1.4.11 failures with exact ratios. Fixing those first gives the cleanest early result and frees audit time for the harder manual criteria.

Picking compliant brand colors

Most brand palettes were chosen for print or a logo and fail as text colors. The fix is not to change the brand but to assign roles. Keep the saturated brand color for large headings, icons and backgrounds behind dark or white text that passes, and derive a darker "text" shade of the same hue for links and labels. Material Design does this with its 700 and 800 shades; Tailwind does it with 600 and 700. A primary blue such as #2196F3 fails for white text at about 3.1:1 but its 700 shade #1976D2 passes at 4.6:1 with no visible change in brand identity. Keep one documented pair per role and reuse it everywhere rather than letting each page pick its own.

Edge cases people ask about

• Text on images or gradients: measure against the lightest and darkest pixel the text can sit on, or add a solid overlay.
• Placeholder text counts as text. Set it to a passing gray or use a visible label instead.
• Disabled controls are exempt, but "disabled-looking" enabled controls are not.
• Logos and brand names in a logo are exempt; the same brand color used as a link is not.
• Third-party widgets (chat, payments, maps) are part of your site in a complaint; ask vendors for their VPAT or conformance report.

How to check your site

1. List every text style and its background: body, secondary, links, buttons, placeholders, footer, error and success states, dark mode if you have one.
2. Paste each pair into the contrast checker. It reports the ratio and AA/AAA status for normal and large text.
3. For pairs that fail, keep the hue and move only the lightness until the ratio passes. The palette generator shows tints and shades of your brand color so you can pick the nearest passing one.
4. If the brand colors came from a logo or mockup, pull the exact values with the image extractor rather than eyeballing them.
5. Check icons, borders and focus rings against their adjacent colors for 3:1.
6. Record the results. A dated table of pairs and ratios is the evidence an auditor, regulator or opposing counsel will ask for.

Contrast is one criterion of about fifty in WCAG 2.1 AA, but it is the cheapest to fix and the easiest to prove in court either way. Fix it first, document the ratios, and keep the report with your accessibility statement.