facebook / facebook/astryx

[Bug] Widespread WCAG 2.1 AA colour contrast failures across Design System

Open
#4,652 1 comment 0 reactions 1 assignee Claimed by @rubyycheung View on GitHub
bug
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

Screenshot of the Colour Contrast Analyser app evaluating a light green 'New' badge (#91C889) set against a dark olive background (#686D57) from a UI card titled 'Weekly product highlights. The tool displays a failing contrast ratio of 2.8:1, showing red Fail status icons for WCAG 2.1 AA and AAA text and non-text contrast. In the background, the UI layout includes a landscape banner image and a bottom section featuring a photo of a woman smiling while using a tablet at a desk

## Pagination dots (this is also a use of colour fail)

https://astryx.atmeta.com/components/Pagination

Image

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.