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

[chris-gds]

Description

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

[gonzoblasco]

Did an automated contrast pass on the two components reported. Here are the measurements and proposed fixes:

1. Pagination dots — two separate failures

1a. Inactive dot contrast (WCAG 1.4.11 Non-text Contrast)

The inactive dots use --color-neutral (rgba(5, 54, 89, 0.1) in light, rgba(223, 226, 229, 0.2) in dark) as their background. Because it is translucent, the effective color depends on what is behind it:

Mode	Blended color	Against body bg	Ratio	Needed
Light	#D9E1E7	#F1F4F7	1.20:1	3:1
Dark	#3A3B3C	#111112	1.68:1	3:1

Both fail the 3:1 threshold for non-text UI components.

1b. Use of color (WCAG 1.4.1 Use of Color)

The only visual difference between active and inactive dots is a color change (neutral -> accent). There is no secondary cue - no size, shape, border, or text difference. This is a use-of-color violation: users who cannot perceive the color difference have no way to identify the current page.

Proposed fix:

• Use --color-text-secondary (#4E606F light / #AAAFB5 dark) for inactive dots instead of --color-neutral. That gives 5.90:1 (light) and 8.55:1 (dark) against body - well above 3:1.
• Add a secondary non-color cue for the active dot: either a border ring, increased size, or an aria-current="page" visible indicator. The aria-current attribute is already set in the code, but it is not visually styled.

2. Badge "New" — translucent background on colored surfaces

The non-semantic badge variants use translucent backgrounds (--color-background-* at 0x33 alpha). On a white surface these all pass comfortably (7-10:1). But when a badge is placed on a colored card background, the translucent fill blends with the card color and the text contrast becomes unpredictable.

Example with the green variant (--color-background-green = #24BB5E33 + --color-text-green = #09441F):

Background	Blended badge bg	Ratio	Status
White #FFFFFF	#D3F1DF	9.37:1	Pass
Body #F1F4F7	#C8E9D8	8.67:1	Pass
Card from screenshot #686D57	#5A7D58	2.43:1	Fail

The root cause is that 0x33 (20% opacity) backgrounds were designed for white surfaces, but the design system's own showcase places badges on colored cards. The fix should either:

1. Increase the alpha to 0x4D (~30%) or higher for non-semantic badge backgrounds, or
2. Add a @media (forced-colors: active) fallback and document that non-semantic badge variants are only guaranteed on --color-background-surface or --color-background-body, or
3. For badges on colored surfaces, use the semantic variants (neutral, info, success) which have solid backgrounds and are not affected by the underlying surface.

Happy to open a PR for the pagination dots fix. The badge issue needs a design decision on whether to bump the alpha or constrain usage.

cc @chris-gds