studio(a11y): colors should have a name description

[donroyco]

Affected part of DeckDeckGo

• Studio
• Remote control
• Documentation
• Demo
• Starter kit
• Poll
• Web Components
• Templates

Reproduction

Steps to reproduce:

1. Go to the editor
2. Click on the tab 'Style'
3. 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.

Color blind person (deuteranopia) will see this.

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]

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]

@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]

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]

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