[6.x] Improve secondary text contrast - #15415
Closed
lazerg wants to merge 2 commits into
Closed
Conversation
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. |
Contributor
Author
|
Yes, got it.. |
This was referenced Sep 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-600in light mode andgray-400in dark, and points the "Pro" label at the existingpink-darktoken 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 sametext-gray-500 hover:text-gray-700pairing 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-500is 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