-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
Description
It appears there's some inconsistency with the color used for various labels in the editor. I'm not sure what is the value of using different shades of gray, I'd tend to think all labels should use the same color.
Also, for accessibility, it would be good to not just aim to be compliant with the minimum required color contrast ratio. It would be good to use a gray that is darker than #757575
($gray-700
). On a white background, #757575
produces a contrast ratio of 4.61:1 that is just a little above the minimum required of 4.5:1. I'd argue that $gray-700
may be used for non-essential information e.g. descriptions but labels should be more readable.
A few examples taken from the Styles > Background UI. There may be more cases, these are just examples.
$gray-900
-#1e1e1e
- I would like this to be the standard for all labels as it's the shade of gray that provides better readability.#3c434a
- This is inherited from the body, it comes from the wp-admincommon.css
. I'd say this is a bug because the editor shouldn't rely on colors provided by external stylesheets.$gray-700
-#757575
- This is unnecessarily too light.
The ToggleGroupControl case
It could be argued that the non-selected options in the ToggleGroupControl use a lighter gray because they are 'inactive'. To me, that's not correct. These are enabled controls that can be selected. Rather than being 'inactive', they are just not-selected. Under the hood, the ToggleGroupControl is the equivalent of a group of radio buttons. The labels of a group of radio buttons use the same color. There's no need to communicate the 'selected' state by the means of color because the selection state is inherently communicated by the visuals of the selected radio button. In the same way, there's no need to use a lighter gray in the ToggleGroupControl because the selected option is visually distinguished by a a very noticeable inversion of colors:
On top of that, for accessibility reasons, there's no reason to make the not-selected options less readable. I would expect these to use the normal gray used for other labels.
Also, when there is no option selected, I'd argue that they all look 'disabled' because of the lighter gray. Screenshot:
For consistency and better accessibility, I'd rather consider to standardize the color for all labels.
Step-by-step reproduction instructions
- Go through the examples above.
- Observe the labels use different shades of gray.
- Optionally check other labels of other controls.
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure