WordPress
Some input fields placeholder text have insufficient color contrast and it's inconsistent
Description
By default, some input fields have a light gray background color. Only when they receive focus the background color changes to white. In their initial state, the placeholder text of these input fields has insufficient color contrast.
That's the case, for example, of the main inserter search field and the 'search for a block' field in the Preferences modal dialog:
Inserter search:
color: #757575;
background: #f0f0f0;
Contrast Ratio: 4.04:1 https://jdlsn.com/color/?type=hex&color=757575&color2=f0f0f0
Post editor > Preferences > Blocks > Search for a block
color: #757575
background: #f0f0f0;
Contrast Ratio: 4.04:1 https://jdlsn.com/color/?type=hex&color=757575&color2=f0f0f0
The placeholder text color #757575 is also inconsistent with the color used for other placeholder text. For example, the input field in the Link popover uses a different color: rgb(30 30 30 / 62%), which I think comes from the input-control mixin.
It's also worth checking other scss variables meant to be used for the placeholder text:
$medium-gray-placeholder: rgba($gray-900, 0.55); (not sure this is actually used anywhere)
$light-gray-placeholder: rgba($white, 0.65); (used with themes with a dark background)
Worth reminding that, in all circumstances, text for active controls must have a sufficient contrast ratio of at least 4.5:1.
Step-by-step reproduction instructions
- Go to the Post editor.
- Open the Main inserter.
- Move focus away from the search field.
- Check the color contrast ratio of the placeholder text is below 4.5:1.
- Open the Preferences modal dialog.
- Switch to the Blocks tab.
- Check the color contrast ratio of the placeholder text 'Search for a block' is below 4.5:1.
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
As an aside, I'm not sure what's the reasoning behind making these input fields have a light gray background color. They just look disabled. Visually, there's no big difference between these fields and an input field that is actually disabled or readonly:
These fields have also other accessibility visual issues, as there is no border and the shape of the interactive control is only distinguishable by its background color. Any interactive control must have a non-text contrast ratio (e.g. the bordeer or a shape) of at least 3:1. This should be addressed separately.
@afercia Thank you for bringing this up. This is such an interesting find! The first thing I did was look at other design systems and products. I noticed that many products use a grey search box (e.g. LinkedIn, iOS, Chrome) but I completely agree with you that it looks too similar to a disabled or read-only field.
I'm pretty new to Gutenberg but I was thinking that perhaps we could make the search box actually look more similar to an input field? For example:
@aaronang hello, thank you for looking into this. Personally, I'd totally agree. I don't see any reason why an input field should have a light gray background. Also, that's a violation of the non-text contrast requirement.
I'm going to add the Needs Design Feedback label to get some focus from the design team. If you'd like to bring this issue to the team's attention on Slack, please do feel free to go ahead ❤️
This feels like it needs feedback not design so let's make sure it just has that label for now. We can of course adapt that if it is not that case.
