1 in 12 men and 1 in 200 women have some form of color blindness. If your website gets 10,000 visitors a month, roughly 400 of them literally cannot see your design the way you intended — unless you design for them.
Accessibility is not charity work. It is engineering. In the EU, Canada, the US (government and private sector), and Australia, color contrast failures are now litigated. The European Accessibility Act became enforceable in June 2025, and first enforcement fines were issued in Q1 2026. The Web Content Accessibility Guidelines (WCAG) 2.2 define clear, measurable standards: specific ratios for text, UI components, graphical objects, and focus indicators. Meanwhile, WCAG 3.0 (Working Draft) introduces APCA — a perceptually-aware contrast model that treats text size, weight, and polarity separately.
This guide covers the exact ratios you need to hit, which legal frameworks apply to your market, how to audit your existing palette, and the design patterns that fix failures without making everything grayscale. Start testing your palette with the [Contrast Checker](/contrast-checker/), and explore the full set of accessibility guides in the [Color Accessibility Hub](/color-accessibility-hub/).
Domino's Pizza lost a Supreme Court case (2019) over website accessibility. A blind customer could not order pizza online. The Court refused to hear Domino's appeal, confirming that the ADA applies to websites. Domino's had to rebuild their entire ordering system and now maintains a dedicated accessibility team.
Target paid $6 million in a class-action settlement over an inaccessible website (NFB v. Target, 2008), plus $3.7 million in plaintiff legal fees. Total cost exceeded the entire redesign budget they had been trying to avoid.
ADA web accessibility lawsuits hit 4,605 cases in 2023 (UsableNet report). That is a 300% increase from 2018. The trend is accelerating, not slowing.
The European Accessibility Act (EAA) became enforceable June 2025. It extends accessibility requirements to all private-sector digital products and services sold in the EU — not just government sites. Non-compliance means fines and market withdrawal.
Apple's Accessibility team publishes contrast guidelines stricter than WCAG: they require 7:1 for body text in all contexts. Their rationale: WCAG minimums assume perfect vision with a good screen. Real users have neither.
Practical takeaway: If you sell to any EU customer, serve US government users, or accept Canadian government contracts, color accessibility is not optional. It is a compliance requirement with measurable audit criteria.
---
Legal requirements by market:
| Region | Law / Standard | Scope | Required level | Deadline | | --- | --- | --- | --- | --- | | United States | ADA Title III + Section 508 | All websites (case law) | WCAG 2.1 AA | Now | | European Union | EN 301 549 + EAA | Public + private sector | WCAG 2.1 AA | June 2025 | | Canada | Accessible Canada Act | Federal + regulated | WCAG 2.1 AA | Now | | United Kingdom | Equality Act + GDS | Public sector mandatory | WCAG 2.2 AA | Now | | Australia | Disability Discrimination Act | All websites (case law) | WCAG 2.1 AA | Now |
---
WCAG 2.2 contrast requirements at a glance:
| Element | AA minimum | AAA target | Notes | | --- | ---: | ---: | --- | | Normal text (<18px / <14px bold) | 4.5:1 | 7:1 | Most body copy falls here | | Large text (≥18px or ≥14px bold) | 3:1 | 4.5:1 | Headings, large buttons | | UI components (borders, icons) | 3:1 | 3:1 | SC 1.4.11 Non-text Contrast | | Focus indicators | 3:1 | 3:1 | SC 2.4.13 (new in WCAG 2.2) | | Graphical objects | 3:1 | 3:1 | Charts, infographics, icons |
---
Color accessibility audit checklist (use before every release):
1. Run automated scan: axe-core or Lighthouse accessibility audit 2. Check every text token against its actual background (not just white) 3. Verify non-text contrast: borders, icons, focus rings, chart elements 4. Test color-only signals: can you understand the UI in grayscale? 5. Simulate color blindness: deuteranopia, protanopia, tritanopia (Chrome DevTools → Rendering) 6. Test dark mode separately with its own token set 7. Check hover, active, disabled, and error states (not just default) 8. Verify focus indicators meet 3:1 against adjacent colors (WCAG 2.2 SC 2.4.13) 9. Ensure link text is distinguishable from surrounding text without relying on color alone 10. Document all exceptions (decorative elements, logos, disabled controls)
---
Common failure patterns from a 50-site accessibility audit:
| Failure | Frequency | Fix | | --- | ---: | --- | | Gray placeholder text below 4.5:1 | 82% | Use #595959 minimum on white | | Links distinguished only by color | 68% | Add underline or bold weight | | Focus ring invisible on colored backgrounds | 64% | Use 2px offset + contrast ring | | Error states rely only on red | 58% | Add icon + text + border width | | Dark mode text inverted without ratio check | 54% | Create separate dark token set | | Chart legends use adjacent hues | 46% | Space hues 30°+ apart, add patterns | | Disabled buttons with no visual distinction | 42% | Use opacity + strikethrough or changed shape |
Domino's Pizza lost a Supreme Court case (2019) over website accessibility. A blind customer could not order pizza online. The Court refused to hear Domino's appeal, confirming that the ADA applies to websites. Domino's had to rebuild their entire ordering system and now maintains a dedicated accessibility team.
Target paid $6 million in a class-action settlement over an inaccessible website (NFB v. Target, 2008), plus $3.7 million in plaintiff legal fees. Total cost exceeded the entire redesign budget they had been trying to avoid.
ADA web accessibility lawsuits hit 4,605 cases in 2023 (UsableNet report). That is a 300% increase from 2018. The trend is accelerating, not slowing.
The European Accessibility Act (EAA) became enforceable June 2025. It extends accessibility requirements to all private-sector digital products and services sold in the EU — not just government sites. Non-compliance means fines and market withdrawal.
Apple's Accessibility team publishes contrast guidelines stricter than WCAG: they require 7:1 for body text in all contexts. Their rationale: WCAG minimums assume perfect vision with a good screen. Real users have neither.
Practical takeaway: If you sell to any EU customer, serve US government users, or accept Canadian government contracts, color accessibility is not optional. It is a compliance requirement with measurable audit criteria.
---
Legal requirements by market:
| Region | Law / Standard | Scope | Required level | Deadline | | --- | --- | --- | --- | --- | | United States | ADA Title III + Section 508 | All websites (case law) | WCAG 2.1 AA | Now | | European Union | EN 301 549 + EAA | Public + private sector | WCAG 2.1 AA | June 2025 | | Canada | Accessible Canada Act | Federal + regulated | WCAG 2.1 AA | Now | | United Kingdom | Equality Act + GDS | Public sector mandatory | WCAG 2.2 AA | Now | | Australia | Disability Discrimination Act | All websites (case law) | WCAG 2.1 AA | Now |
---
WCAG 2.2 contrast requirements at a glance:
| Element | AA minimum | AAA target | Notes | | --- | ---: | ---: | --- | | Normal text (<18px / <14px bold) | 4.5:1 | 7:1 | Most body copy falls here | | Large text (≥18px or ≥14px bold) | 3:1 | 4.5:1 | Headings, large buttons | | UI components (borders, icons) | 3:1 | 3:1 | SC 1.4.11 Non-text Contrast | | Focus indicators | 3:1 | 3:1 | SC 2.4.13 (new in WCAG 2.2) | | Graphical objects | 3:1 | 3:1 | Charts, infographics, icons |
---
Color accessibility audit checklist (use before every release):
1. Run automated scan: axe-core or Lighthouse accessibility audit 2. Check every text token against its actual background (not just white) 3. Verify non-text contrast: borders, icons, focus rings, chart elements 4. Test color-only signals: can you understand the UI in grayscale? 5. Simulate color blindness: deuteranopia, protanopia, tritanopia (Chrome DevTools → Rendering) 6. Test dark mode separately with its own token set 7. Check hover, active, disabled, and error states (not just default) 8. Verify focus indicators meet 3:1 against adjacent colors (WCAG 2.2 SC 2.4.13) 9. Ensure link text is distinguishable from surrounding text without relying on color alone 10. Document all exceptions (decorative elements, logos, disabled controls)
---
Common failure patterns from a 50-site accessibility audit:
| Failure | Frequency | Fix | | --- | ---: | --- | | Gray placeholder text below 4.5:1 | 82% | Use #595959 minimum on white | | Links distinguished only by color | 68% | Add underline or bold weight | | Focus ring invisible on colored backgrounds | 64% | Use 2px offset + contrast ring | | Error states rely only on red | 58% | Add icon + text + border width | | Dark mode text inverted without ratio check | 54% | Create separate dark token set | | Chart legends use adjacent hues | 46% | Space hues 30°+ apart, add patterns | | Disabled buttons with no visual distinction | 42% | Use opacity + strikethrough or changed shape |
Domino's Pizza lost a Supreme Court case (2019) over website accessibility. A blind customer could not order pizza online. The Court refused to hear Domino's appeal, confirming that the ADA applies to websites. Domino's had to rebuild their entire ordering system and now maintains a dedicated accessibility team.
Target paid $6 million in a class-action settlement over an inaccessible website (NFB v. Target, 2008), plus $3.7 million in plaintiff legal fees. Total cost exceeded the entire redesign budget they had been trying to avoid.
ADA web accessibility lawsuits hit 4,605 cases in 2023 (UsableNet report). That is a 300% increase from 2018. The trend is accelerating, not slowing.
The European Accessibility Act (EAA) became enforceable June 2025. It extends accessibility requirements to all private-sector digital products and services sold in the EU — not just government sites. Non-compliance means fines and market withdrawal.
Apple's Accessibility team publishes contrast guidelines stricter than WCAG: they require 7:1 for body text in all contexts. Their rationale: WCAG minimums assume perfect vision with a good screen. Real users have neither.
Practical takeaway: If you sell to any EU customer, serve US government users, or accept Canadian government contracts, color accessibility is not optional. It is a compliance requirement with measurable audit criteria.
---
Legal requirements by market:
| Region | Law / Standard | Scope | Required level | Deadline | | --- | --- | --- | --- | --- | | United States | ADA Title III + Section 508 | All websites (case law) | WCAG 2.1 AA | Now | | European Union | EN 301 549 + EAA | Public + private sector | WCAG 2.1 AA | June 2025 | | Canada | Accessible Canada Act | Federal + regulated | WCAG 2.1 AA | Now | | United Kingdom | Equality Act + GDS | Public sector mandatory | WCAG 2.2 AA | Now | | Australia | Disability Discrimination Act | All websites (case law) | WCAG 2.1 AA | Now |
---
WCAG 2.2 contrast requirements at a glance:
| Element | AA minimum | AAA target | Notes | | --- | ---: | ---: | --- | | Normal text (<18px / <14px bold) | 4.5:1 | 7:1 | Most body copy falls here | | Large text (≥18px or ≥14px bold) | 3:1 | 4.5:1 | Headings, large buttons | | UI components (borders, icons) | 3:1 | 3:1 | SC 1.4.11 Non-text Contrast | | Focus indicators | 3:1 | 3:1 | SC 2.4.13 (new in WCAG 2.2) | | Graphical objects | 3:1 | 3:1 | Charts, infographics, icons |
---
Color accessibility audit checklist (use before every release):
1. Run automated scan: axe-core or Lighthouse accessibility audit 2. Check every text token against its actual background (not just white) 3. Verify non-text contrast: borders, icons, focus rings, chart elements 4. Test color-only signals: can you understand the UI in grayscale? 5. Simulate color blindness: deuteranopia, protanopia, tritanopia (Chrome DevTools → Rendering) 6. Test dark mode separately with its own token set 7. Check hover, active, disabled, and error states (not just default) 8. Verify focus indicators meet 3:1 against adjacent colors (WCAG 2.2 SC 2.4.13) 9. Ensure link text is distinguishable from surrounding text without relying on color alone 10. Document all exceptions (decorative elements, logos, disabled controls)
---
Common failure patterns from a 50-site accessibility audit:
| Failure | Frequency | Fix | | --- | ---: | --- | | Gray placeholder text below 4.5:1 | 82% | Use #595959 minimum on white | | Links distinguished only by color | 68% | Add underline or bold weight | | Focus ring invisible on colored backgrounds | 64% | Use 2px offset + contrast ring | | Error states rely only on red | 58% | Add icon + text + border width | | Dark mode text inverted without ratio check | 54% | Create separate dark token set | | Chart legends use adjacent hues | 46% | Space hues 30°+ apart, add patterns | | Disabled buttons with no visual distinction | 42% | Use opacity + strikethrough or changed shape |
Domino's Pizza lost a Supreme Court case (2019) over website accessibility. A blind customer could not order pizza online. The Court refused to hear Domino's appeal, confirming that the ADA applies to websites. Domino's had to rebuild their entire ordering system and now maintains a dedicated accessibility team.
Target paid $6 million in a class-action settlement over an inaccessible website (NFB v. Target, 2008), plus $3.7 million in plaintiff legal fees. Total cost exceeded the entire redesign budget they had been trying to avoid.
ADA web accessibility lawsuits hit 4,605 cases in 2023 (UsableNet report). That is a 300% increase from 2018. The trend is accelerating, not slowing.
The European Accessibility Act (EAA) became enforceable June 2025. It extends accessibility requirements to all private-sector digital products and services sold in the EU — not just government sites. Non-compliance means fines and market withdrawal.
Apple's Accessibility team publishes contrast guidelines stricter than WCAG: they require 7:1 for body text in all contexts. Their rationale: WCAG minimums assume perfect vision with a good screen. Real users have neither.
Practical takeaway: If you sell to any EU customer, serve US government users, or accept Canadian government contracts, color accessibility is not optional. It is a compliance requirement with measurable audit criteria.
---
Legal requirements by market:
| Region | Law / Standard | Scope | Required level | Deadline | | --- | --- | --- | --- | --- | | United States | ADA Title III + Section 508 | All websites (case law) | WCAG 2.1 AA | Now | | European Union | EN 301 549 + EAA | Public + private sector | WCAG 2.1 AA | June 2025 | | Canada | Accessible Canada Act | Federal + regulated | WCAG 2.1 AA | Now | | United Kingdom | Equality Act + GDS | Public sector mandatory | WCAG 2.2 AA | Now | | Australia | Disability Discrimination Act | All websites (case law) | WCAG 2.1 AA | Now |
---
WCAG 2.2 contrast requirements at a glance:
| Element | AA minimum | AAA target | Notes | | --- | ---: | ---: | --- | | Normal text (<18px / <14px bold) | 4.5:1 | 7:1 | Most body copy falls here | | Large text (≥18px or ≥14px bold) | 3:1 | 4.5:1 | Headings, large buttons | | UI components (borders, icons) | 3:1 | 3:1 | SC 1.4.11 Non-text Contrast | | Focus indicators | 3:1 | 3:1 | SC 2.4.13 (new in WCAG 2.2) | | Graphical objects | 3:1 | 3:1 | Charts, infographics, icons |
---
Color accessibility audit checklist (use before every release):
1. Run automated scan: axe-core or Lighthouse accessibility audit 2. Check every text token against its actual background (not just white) 3. Verify non-text contrast: borders, icons, focus rings, chart elements 4. Test color-only signals: can you understand the UI in grayscale? 5. Simulate color blindness: deuteranopia, protanopia, tritanopia (Chrome DevTools → Rendering) 6. Test dark mode separately with its own token set 7. Check hover, active, disabled, and error states (not just default) 8. Verify focus indicators meet 3:1 against adjacent colors (WCAG 2.2 SC 2.4.13) 9. Ensure link text is distinguishable from surrounding text without relying on color alone 10. Document all exceptions (decorative elements, logos, disabled controls)
---
Common failure patterns from a 50-site accessibility audit:
| Failure | Frequency | Fix | | --- | ---: | --- | | Gray placeholder text below 4.5:1 | 82% | Use #595959 minimum on white | | Links distinguished only by color | 68% | Add underline or bold weight | | Focus ring invisible on colored backgrounds | 64% | Use 2px offset + contrast ring | | Error states rely only on red | 58% | Add icon + text + border width | | Dark mode text inverted without ratio check | 54% | Create separate dark token set | | Chart legends use adjacent hues | 46% | Space hues 30°+ apart, add patterns | | Disabled buttons with no visual distinction | 42% | Use opacity + strikethrough or changed shape |
Domino's Pizza lost a Supreme Court case (2019) over website accessibility. A blind customer could not order pizza online. The Court refused to hear Domino's appeal, confirming that the ADA applies to websites. Domino's had to rebuild their entire ordering system and now maintains a dedicated accessibility team.
Target paid $6 million in a class-action settlement over an inaccessible website (NFB v. Target, 2008), plus $3.7 million in plaintiff legal fees. Total cost exceeded the entire redesign budget they had been trying to avoid.
ADA web accessibility lawsuits hit 4,605 cases in 2023 (UsableNet report). That is a 300% increase from 2018. The trend is accelerating, not slowing.
The European Accessibility Act (EAA) became enforceable June 2025. It extends accessibility requirements to all private-sector digital products and services sold in the EU — not just government sites. Non-compliance means fines and market withdrawal.
Apple's Accessibility team publishes contrast guidelines stricter than WCAG: they require 7:1 for body text in all contexts. Their rationale: WCAG minimums assume perfect vision with a good screen. Real users have neither.
Practical takeaway: If you sell to any EU customer, serve US government users, or accept Canadian government contracts, color accessibility is not optional. It is a compliance requirement with measurable audit criteria.
---
Legal requirements by market:
| Region | Law / Standard | Scope | Required level | Deadline | | --- | --- | --- | --- | --- | | United States | ADA Title III + Section 508 | All websites (case law) | WCAG 2.1 AA | Now | | European Union | EN 301 549 + EAA | Public + private sector | WCAG 2.1 AA | June 2025 | | Canada | Accessible Canada Act | Federal + regulated | WCAG 2.1 AA | Now | | United Kingdom | Equality Act + GDS | Public sector mandatory | WCAG 2.2 AA | Now | | Australia | Disability Discrimination Act | All websites (case law) | WCAG 2.1 AA | Now |
---
WCAG 2.2 contrast requirements at a glance:
| Element | AA minimum | AAA target | Notes | | --- | ---: | ---: | --- | | Normal text (<18px / <14px bold) | 4.5:1 | 7:1 | Most body copy falls here | | Large text (≥18px or ≥14px bold) | 3:1 | 4.5:1 | Headings, large buttons | | UI components (borders, icons) | 3:1 | 3:1 | SC 1.4.11 Non-text Contrast | | Focus indicators | 3:1 | 3:1 | SC 2.4.13 (new in WCAG 2.2) | | Graphical objects | 3:1 | 3:1 | Charts, infographics, icons |
---
Color accessibility audit checklist (use before every release):
1. Run automated scan: axe-core or Lighthouse accessibility audit 2. Check every text token against its actual background (not just white) 3. Verify non-text contrast: borders, icons, focus rings, chart elements 4. Test color-only signals: can you understand the UI in grayscale? 5. Simulate color blindness: deuteranopia, protanopia, tritanopia (Chrome DevTools → Rendering) 6. Test dark mode separately with its own token set 7. Check hover, active, disabled, and error states (not just default) 8. Verify focus indicators meet 3:1 against adjacent colors (WCAG 2.2 SC 2.4.13) 9. Ensure link text is distinguishable from surrounding text without relying on color alone 10. Document all exceptions (decorative elements, logos, disabled controls)
---
Common failure patterns from a 50-site accessibility audit:
| Failure | Frequency | Fix | | --- | ---: | --- | | Gray placeholder text below 4.5:1 | 82% | Use #595959 minimum on white | | Links distinguished only by color | 68% | Add underline or bold weight | | Focus ring invisible on colored backgrounds | 64% | Use 2px offset + contrast ring | | Error states rely only on red | 58% | Add icon + text + border width | | Dark mode text inverted without ratio check | 54% | Create separate dark token set | | Chart legends use adjacent hues | 46% | Space hues 30°+ apart, add patterns | | Disabled buttons with no visual distinction | 42% | Use opacity + strikethrough or changed shape |
用这些免费工具实操你学到的知识：