Autocomplete suggestions: insufficient color contrast ratio #3631
Labels
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
Good First Issue
An issue that's suitable for someone looking to contribute for the first time
In all the autocomplete suggestions, the suggestions list can be navigated with arrow keys, and when doing so the suggestions are highlighted with a blue background while the text becomes white:
This color contrast ratio is too low for accessibility (WCAG level AA requires at least 4.5:1) and it's actually just 3.02:1 see https://jdlsn.com/color/?type=hex&color=FFFFFF&color2=00a0d2
The colors should be adjusted to pass the required 4.5:1. In core there are a couple examples of autocomplete suggestions lists: the links and the tags:
and they both have a sufficient color contrast.
Worth also noting when hovering the links suggestions results, there's no "highlighting" while the tag suggestions do highlight the results also on hover:
Re: the tag suggestions, the matched string can't be indicated by color alone. I'd suggest to use an underline, that would also make finding a new colors combo easier.
The autocomplete in Gutenberg are actually different components, but the necessary change is just about CSS and should be easy to do in one go. Basically
#00a0d2
can't be used with white text, there's the need of a darker blue.The text was updated successfully, but these errors were encountered: