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

How can we make Gutenberg better for those with color blindness? #2825

Closed
karmatosed opened this issue Sep 28, 2017 · 4 comments
Closed

How can we make Gutenberg better for those with color blindness? #2825

karmatosed opened this issue Sep 28, 2017 · 4 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).

Comments

@karmatosed
Copy link
Member

This is just something that came up when testing Gutenberg. I used an app to see what people with various forms of color blindness see. The one that really was shocking was monochromacy. If you look at this, it's what you'd see:

2017-09-28 at 15 30

There is little to no indication beyond text on buttons, there is also little to not indication of colors on the palette. Even hovering doesn't show what colors. Just adding a hover there could to me help this issue at least in part.

@karmatosed karmatosed added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Sep 28, 2017
@hedgefield
Copy link

You're talking about the fact that buttons without an outline or underline don't register as buttons in monochrome, and that the colors don't have a hover hint? The second seems easy to fix, the first issue would need some exploration.

Instead of just changing the color of the letters on hover, showing a button outline on hover would seem like a quick step in the right direction. It also might be worth exploring giving all those shapeless buttons a shape to begin with, even if it's just something like the Block Alignment buttons have in this example for instance.

@laras126
Copy link
Contributor

I think @karmatosed is talking about a text representation of what the palette colors are, either as a tooltip or selection. There's a good outline of this issue in a recent Smashing Magazine article (scroll a little to the Nike/Amazon color UI discussion).
Perhaps something as simple as this would help?
Color label
I'd also suggest having an outline around the selected color dot rather than making it look empty as it currently is.

@afercia
Copy link
Contributor

afercia commented Mar 1, 2018

There is little to no indication beyond text on buttons, there is also little to not indication of colors on the palette.

This is one of the reasons why a visible label (plain text) is always the best option. Re: the color palette, colors would need a name though, see #2699

ideally, colors should have a human-understandable named color.

@karmatosed
Copy link
Member Author

For now lets close as we can deal with tooltips.

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).
Projects
None yet
Development

No branches or pull requests

4 participants