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

Increase the contrast of the selected block outline #12088

Closed
afercia opened this issue Nov 20, 2018 · 5 comments
Closed

Increase the contrast of the selected block outline #12088

afercia opened this issue Nov 20, 2018 · 5 comments
Labels
[Feature] Blocks Overall functionality of blocks [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Needs design efforts. [Type] Bug An existing feature does not function as intended
Milestone

Comments

@afercia
Copy link
Contributor

afercia commented Nov 20, 2018

Splitting this out from #11737

Indication of the active part in an UI is of fundamental importance for keyboard users and benefits all users. Usually this applied to the element that has focus. In Gutenberg it applies also to the "selected" block.

According to the WCAG 2.1, non-text contrast (which means contrast of UI components) must be at least 3:1. In #11737 (comment) it was agreed the selected outline contrast can be increased slightly.

The current "selected" indication is a very light grey outline:

focus after

Among the current available greys in the color palette, #8d96a0 is the one to use for non-text contrast against a white background. However, this grey needs to be slightly adjusted. Just checked and, though it's a matter of roundings, the actual contrast ratio against white is 2.99:1 🙂 For formal compliance it must be 3:1.

@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). labels Nov 20, 2018
@afercia
Copy link
Contributor Author

afercia commented Nov 20, 2018

Well, actually some tools report a 2.99 ratio, other tools 3.00:

3.00
https://jdlsn.com/color/?type=hex&color=8d96a0&color2=ffffff

2.99
https://contrast-ratio.com/#%238d96a0-on-%23ffffff

I'd suggest to slightly adjust it anyways, just in case.

@designsimply designsimply added the Needs Design Feedback Needs general design feedback. label Nov 20, 2018
@mtias mtias added this to the WordPress 5.0.1 milestone Nov 21, 2018
@mtias mtias added the [Feature] Blocks Overall functionality of blocks label Nov 21, 2018
@mtias
Copy link
Member

mtias commented Nov 30, 2018

If the threshold is so small, makes sense to update it slightly to be squarely within it.

@noisysocks noisysocks added Needs Design Needs design efforts. and removed Needs Design Feedback Needs general design feedback. labels Dec 10, 2018
@noisysocks
Copy link
Member

Anyone able to pick a colour for us to use here?

@timwright12
Copy link
Contributor

@afercia I think this might be a dupe I was working on it in this PR last week #12478

@afercia
Copy link
Contributor Author

afercia commented Jan 18, 2019

Oh yes this is a duplicate of #12254 (or the other way around).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Needs design efforts. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

6 participants