[Bug] Widespread WCAG 2.1 AA colour contrast failures across Design System
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 1.1k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 687
Description
### Description
Incomplete : https://github.com/facebook/astryx/issues/3654
Severity: High / Blocker (Prevents accessible product releases)
Component(s) Affected: Core Colour Palette, Buttons, Typography, Form Fields, Navigation
Specification Targeted: WCAG 2.1 Compliance Level AA
## Problem description
A review of the new design system component specs reveals widespread colour contrast failures under WCAG 2.1 Level AA standards. Multiple core colour pairings (text-on-background and UI components) fall below the required contrast ratios, impacting readability for disabled users including those with low vision, colour blindness, or those viewing screens in high-ambient light environments.
## Impact
Products built with this design system will fail standard accessibility audits, creating legal liability under the ADA, European Accessibility Act (EAA), and other regional mandates.
## Proposed resolution & recommendations
### Audit & darken/lighten core tokens
- Adjust the luminosity of the core brand palette shades to ensure compliant pairings
- Automate Contrast Checks: integrate a linter or CI/CD check to flag non-compliant colour pairings before they are pushed to the codebase.
- Hire an accessibility engineer ;)
## Screenshots
### New badge
## Pagination dots (this is also a use of colour fail)
https://astryx.atmeta.com/components/Pagination
## Anything else
There are many more but it would take significant time to properly audit. Would recommend a complete review, including for themes too as it would apply.
### Reproduction
1. Open the Design System
2. Inspect the core UI components
3. Use an accessibility evaluation tool to test foreground text tokens against their designated background tokens.
4. Note that a significant portion do not clear the $4.5:1$ threshold.
### Astryx Version
@astryxdesign/core@v0.2.0
### Environment
Contributor guide
Assessment
This issue has not been assessed yet.