studio(a11y): colors should have a name description

deckgo / deckdeckgo

The web open source editor for presentations

https://deckdeckgo.com

1.64k stars 182 forks source link

studio(a11y): colors should have a name description #544

Closed donroyco closed 4 years ago

donroyco commented 4 years ago

Affected part of DeckDeckGo

[x] Studio
[ ] Remote control
[ ] Documentation
[ ] Demo
[ ] Starter kit
[ ] Poll
[ ] Web Components
[ ] Templates

Reproduction

Steps to reproduce:

Go to the editor
Click on the tab 'Style'
Look at the sidebar

Expected Behavior

I would expect that the colors in the palette are also written down in order to deal with people with color blindness. According to National Eye Institute, 1 out of 12 men has color blindness (any form).

Actual Behavior

When checking the colors as a non color blind person, everything looks fine.

Non color blind users will see this.

Colors viewed by color blind person (deuteranopia)

Color blind person (deuteranopia) will see this.

Colors viewed by color blind person (tritanopia)

Color blind person (tritanopia) will see this.

This little app called Sim Daltonism is what I used to simulate the color blindness. As you can see, it's not clear anymore what color every color is.

peterpeterparker commented 4 years ago

good point @donroyco

we are working with rgb color, what do you think, is is better to display a label like "Current color rgba(255, 44, 33, 0.4)" or the hex value? what would be your suggestion?

thank you in advance for your inputs!

donroyco commented 4 years ago

@peterpeterparker For the colors that are already displayed, I think adding the aria value underneath the colors would already help.

For the selected color it's hard to define what's best. I don't think a lot of people will know what rgba(255, 44, 33, 0.4) means in terms of color, but neither do they in hex value.

peterpeterparker commented 4 years ago

thank you for the inputs!

I've to say I'm not sure yet what's the best solution, because users could also select any colors through the "extended" picker and because I also use the component in other apps ;)

I should think about it but of course you are definitely right, the accessibility could/should be improved

donroyco commented 4 years ago

Yeah, it's true that people can select any color. Let's see what other people think and what other editors do.

peterpeterparker commented 4 years ago

Thx for the inputs @donroyco

I implemented it with a new label + hex code. Like "White #ffffff" and if user select a custom color then "Custom #f32f23". I thought that's small win without too much engineering.

Also as of now, the opacity rate (like 88%) is also displayed.