ADA website compliance lawsuits have grown significantly year on year, with colour contrast consistently cited as one of the top accessibility failures alongside missing alt text and poor keyboard navigation. The good news: colour contrast is also one of the easiest accessibility issues to fix — it requires no development work, just adjusting colour values in your CSS or design system.
This guide explains exactly what ADA colour contrast compliance requires, how to audit your website, and how to fix every failing element.
What Does ADA Compliance Mean for Website Colours?
The Americans with Disabilities Act (ADA) does not specify its own technical web standard. However, US federal courts and the Department of Justice have consistently referenced WCAG 2.1 Level AA as the benchmark for digital accessibility compliance. This means meeting WCAG AA contrast requirements is the practical path to ADA colour compliance.
WCAG 2.1 Level AA requires:
- Normal text: minimum contrast ratio of 4.5:1
- Large text (18pt+ or 14pt bold+): minimum contrast ratio of 3:1
These ratios apply to every piece of text on your website — body copy, navigation links, button labels, form field text, placeholder text, error messages, captions, and tooltips.
Who Is Most at Risk from ADA Contrast Lawsuits?
While any public-facing website can receive an ADA complaint, certain industries face disproportionately higher risk:
E-commerce: Online retailers are the most frequently targeted sector in ADA website lawsuits. Product descriptions, price labels, and call-to-action buttons with low contrast are common failure points.
Healthcare: Medical and healthcare websites are held to a high standard due to the critical nature of the information they convey. Low-contrast dosage instructions, appointment booking buttons, or form fields are serious risks.
Financial services: Banks, insurance companies, and financial platforms attract accessibility scrutiny due to the importance of the transactions users perform.
Government and education: Public sector organisations and educational institutions are often bound by Section 508 (the US government's accessibility standard) in addition to ADA.
How to Audit Your Website for ADA Colour Contrast Compliance
Step 1: List Every Text/Background Combination
Start by identifying every unique text colour and background colour combination used across your website. For most sites, this includes:
- Body text colour on page background
- Heading colours on page background
- Navigation link colours on header background
- Button text on button background colour
- Link colours in body text
- Form input text on input background
- Placeholder text on input background
- Error/success message text on their background colours
- Text over background images or gradients
Step 2: Test Each Combination
Enter each text colour and background colour pair into the free ADA contrast checker. The tool instantly shows:
- The exact contrast ratio
- Whether it passes WCAG AA (4.5:1 for normal text, 3:1 for large text)
- Whether it passes WCAG AAA (7:1 for normal text)
Use the Palette Contrast Grid to add all your brand colours and see every combination at once — far faster than testing pairs individually.
Step 3: Fix Every Failing Combination
For each failing combination, use the Auto-fix button to generate the nearest passing colour alternative. Common fixes:
- Body text too light: Darken the text colour. The minimum on white is approximately
#767676(4.54:1). - Button text failing: Either darken the button background or switch to dark text.
- Placeholder text too light: Set it explicitly in CSS to at least
#767676on white. - Text on images: Add a dark semi-transparent overlay between the image and text.
Step 4: Document Your Colour Decisions
Once you have a passing colour palette, document every approved text/background combination in your design system or style guide. This prevents future designers and developers from accidentally reintroducing contrast failures.
ADA Contrast Requirements — What Is and Isn't Covered
Covered by ADA contrast requirements:
- All visible text content
- Interactive elements: buttons, links, form labels
- Text inside images that conveys information
- Error messages, validation text, help text
- Navigation items and breadcrumbs
Not covered by ADA contrast requirements:
- Purely decorative images with no text
- Brand logos (though good contrast is recommended)
- Disabled/inactive form controls
- Text that is part of a complex background image where no text alternative exists
The Most Common ADA Contrast Failures by Element
Navigation links: Many websites use medium grey for navigation links on white or light grey headers — often falling around 3:1, below the AA minimum.
Secondary buttons: Outlined or ghost buttons (transparent background with coloured text) often use mid-tone brand colours that fail against white backgrounds.
Footer text: Footers frequently use low-contrast grey text on slightly darker grey backgrounds — combinations that can fall below 3:1.
Badge and tag elements: Small coloured badges for categories, statuses, and labels are common contrast failures, especially pastel backgrounds with white text.
Tooltip and modal overlays: Semi-transparent tooltip backgrounds often produce insufficient contrast for the white text inside them.
How to Fix ADA Contrast Issues Without Breaking Your Brand
The concern most designers have is that meeting contrast requirements will force them to use dark, visually heavy colour combinations that contradict their brand palette. This is rarely necessary.
Most brand colours can be adjusted by 10-20% in lightness to meet WCAG AA without significantly changing the visual impression of the colour. A sky blue button that fails at 2.8:1 might only need to be darkened by 15% to reach 4.5:1 — a change that looks almost identical in context.
Use the free contrast checker's Auto-fix feature to generate the nearest passing colour to your original — it adjusts luminance while preserving hue and saturation, keeping your brand recognisable while meeting the standard.
After Fixing Contrast — Other ADA Accessibility Checks
Colour contrast is one of the most impactful and easiest fixes, but a fully ADA-compliant website also requires:
- Alt text on all informative images
- Keyboard navigation for all interactive elements
- Form labels explicitly associated with every input
- Focus indicators visible on all focusable elements
- Logical heading structure (H1 → H2 → H3 in order)
An automated accessibility scanner like Axe or WAVE can identify most of these issues alongside contrast failures.
Summary — ADA Colour Contrast Compliance Checklist
- ✓ All normal text meets 4.5:1 contrast ratio minimum
- ✓ All large text (18pt+ or 14pt bold+) meets 3:1 minimum
- ✓ Button labels tested against button background colour
- ✓ Placeholder text set to at least
#767676on white - ✓ Navigation links tested against header background
- ✓ Text on images has sufficient overlay for 4.5:1
- ✓ Footer text tested against footer background
- ✓ Colour palette documented for future reference
Test your colours free: webassetsuite.com/contrast-checker
Related guides:
- WCAG colour contrast requirements explained
- 5 colour contrast mistakes that fail WCAG
- ADA compliance colour checker — free tool