Skip to content

[6.x] Improve secondary text contrast - #15415

Closed
lazerg wants to merge 2 commits into
statamic:6.xfrom
lazerg:fix/issue-15407-secondary-text-contrast
Closed

[6.x] Improve secondary text contrast#15415
lazerg wants to merge 2 commits into
statamic:6.xfrom
lazerg:fix/issue-15407-secondary-text-contrast

Conversation

@lazerg

@lazerg lazerg commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

This pull request fixes an issue where grey secondary text in the Control Panel sits below the 4.5:1 contrast ratio WCAG 2.1 SC 1.4.3 asks for. None of it is large text, so the 3:1 allowance doesn't apply.

Three of the reported failures use gray-500: the subtle button variant on a light panel (4.24:1), tab labels in dark mode (3.67:1) and the pagination totals in dark mode (3.84:1). The fourth is the brand pink used as text for the "Pro" label on the licensing screen, which only reaches 3.48:1 on white.

This PR moves secondary text to gray-600 in light mode and gray-400 in dark, and points the "Pro" label at the existing pink-dark token in light mode. That puts everything between 4.5:1 and 7.7:1. Hover colours move down a step where the old ones would otherwise have collided with the new resting colour. Light mode tab labels are included even though the report only measured them in dark, since they fail at 4.35:1 on the body background, and the same text-gray-500 hover:text-gray-700 pairing in the Combobox and Toggle variants is fixed alongside Button's so the three stay consistent.

I've done this in the components rather than in the tokens, as the issue suggested, because the greys are user-selectable palettes and gray-500 is also used for borders and icons where 3:1 is the bar. The steps hold across all five palettes, since they're all the standard Tailwind scales.

Fixes #15407

@jackmcdade

Copy link
Copy Markdown
Member

Thanks for putting this together and documenting the contrast issues. We chose these colors deliberately to balance legibility and visual hierarchy across all the Tailwind gray palettes. Some combinations fall slightly below WCAG’s contrast threshold, but we’ve found this balance works well in practice.

With these changes, secondary text becomes more prominent than primary text in some areas, which changes the overall feel of the Control Panel. We already provide a WCAG mode in user preferences for people who need or prefer the higher-contrast treatment.

I’m going to close this PR to preserve the default appearance, but I appreciate you taking the time to put a PR together.

@jackmcdade jackmcdade closed this Sep 7, 2026
@lazerg

lazerg commented Sep 7, 2026

Copy link
Copy Markdown
Contributor Author

Yes, got it..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Secondary text falls below 4.5:1 contrast in both themes

2 participants