fix(core): pagination dots WCAG contrast (1.4.11) and use-of-color (1.4.1)

[gonzoblasco]

Summary

Fixes the pagination dots variant contrast and use-of-color failures reported in #4652 (which reopens #3654).

1. WCAG 1.4.11 - Non-text contrast (inactive dots)

The inactive dots used --color-neutral (rgba(5, 54, 89, 0.1) light / rgba(223, 226, 229, 0.2) dark) as a translucent background. Because it is 20% alpha, the effective color depends on the surface behind it and fails the 3:1 threshold:

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

Fix: inactive dots now use --color-text-secondary (#4E606F light / #AAAFB5 dark) - 5.90:1 (light) / 8.55:1 (dark), well above 3:1.

2. WCAG 1.4.1 - Use of Color (active dot)

Previously the only visual difference between active and inactive dots was a color change (neutral - accent), with no secondary cue. Users who cannot perceive the color difference had no way to identify the current page.

Fix: the active dot now renders as an outlined ring (inset accent ring with transparent fill) instead of a solid fill. Active vs inactive is now distinguished by shape (ring vs fill), not only by color. The inset ring adds no size, so the dot layout is unchanged.

Changeset

• fix-pagination-dots-contrast.md - @astryxdesign/core: patch

Out of scope (tracked in the issue thread)

• Badge "New" (green variant on colored cards): root cause is the translucent 0x33 (20%) background designed for white surfaces, which fails on colored cards. Needs a design decision (bump alpha vs. constrain usage vs. force semantic variants) - already flagged as pending in [Bug] Widespread WCAG 2.1 AA colour contrast failures across Design System #4652.
• Badge error variant (theme-neutral, hardcoded light-dark(...) breaking token override): separate PR by @is0060hf.
• Core color tokens ([Bug] Widespread WCAG 2.1 AA colour contrast failures across Design System, accessibility #3654): separate PR fix: WCAG 2.1 AA contrast failures in core color tokens (#3654) #4022.

Verification

• 64 Pagination tests pass
• ESLint clean (uses tokens, no hardcoded colors)
• TypeScript compiles
• Changeset passes check:changesets

Ref #4652

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 4, 2026 12:54pm