Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autocomplete suggestions: insufficient color contrast ratio #3631

Closed
afercia opened this issue Nov 23, 2017 · 0 comments
Closed

Autocomplete suggestions: insufficient color contrast ratio #3631

afercia opened this issue Nov 23, 2017 · 0 comments
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

Comments

@afercia
Copy link
Contributor

afercia commented Nov 23, 2017

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:

screen shot 2017-11-23 at 17 06 16

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:

screen shot 2017-11-23 at 17 09 07

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:

screen shot 2017-11-23 at 17 18 51

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.

@afercia afercia added [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 labels Nov 23, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
Development

No branches or pull requests

1 participant