'Should color swatches have labels for scree readers?
Let's say a component allows the choice of picking between 20 colors. Should these swatches have labels on them? It seems a little pointless to me since there's no standard for color names besides (probably) meaningless gibberish like #d1ed7e. However, I'm wondering if anybody has an argument for their inclusion.
Solution 1:[1]
For color choices on a product selection, say a blouse or shoes, then color names might be important.
And there is a standard for color names. It's in the CSS documentation.
Those CSS color names might not match a company's name for a color, like "Dusty Sunset", which could be a shirt color or a paint color.
RGB values can also be very useful. What you might think of gibberish, #d1ed7e, might mean a lot to me if I'm a designer or coder.
Visually displaying the color name along with the swatch can also be helpful for some users. You don't necessarily have to "hide" the color name for just screen reader users.
Here's an example from a shoe website.
The current color displays as "Navy" and if I hover with the mouse over the other color, it shows "Tan". Tooltips are not the best way to do this since they're generally not displayed on mobile devices and tooltips often only work with a mouse hover and not keyboard focus, but it gives you an idea of showing color names.
If I'm in a design system and I want to choose a color, I probably want the exact RGB or HSV values so displaying the color code would be helpful.
Solution 2:[2]
One of the rules of WCAG says that information shouldn't be conveyed only by their color.
The color of an object, whatever it is, is always an information. It can be more or less important depending on the object and user taste, but it's always a property that the user must know about.
As a consequence of this, definitely, yes, colors have to be labelled in some way, and not left alone without labels.
For sure I want to choose the color, and at worst I don't matter at all and pick one at random. So at worst it anyway never hurts.
It's not because I'm blind that I'm not interested or don't matter at all about colors. For clothing, it stays important. I don't want to wear pink and green together, right ? I might make a gift to a sighted friend. And what about color blind people ? They will certainly find useful to see "red" and "green" explicitly written, instead of apparently seeing two identical options.
Even normal sighted people are sometimes surprised because the color of what they receive don't match exactly what they saw on the screen. Maybe the brightness wasn't optimal, or he/she ordered during the night, or under artificial light ? I'm pretty sure that a name may help in this case, too.
As explained in the previous answer, the kind of label you should show depends on the kind of users using your site. However, I don't agree with using CSS names.
- For daily life objects sold in a shop, use the same name as it is officially called in your article catalog, it's probably better than using CSS names. If you can stick to quite generic color names, it's probably even better than a possibily brand-specific vocabulary. Example: is "blue marine" or simply "marine" more widely understood than "navy" ? (I'm not native english speaker, so maybe it's a wrong example, but I think you get still the idea). If I look at all CSS names, really, there are colors I don't know about at all. Jaws has also a quite big list of colors mapped to RGB values, but many don't make much sense either for a lambda user.
- For development stuff, RGB code can be very useful, but remember that it doesn't make sense for most people or in other contexts
To wrap up, yes, label your colors, and if possible with names that are widely understood
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | slugolicious |
| Solution 2 | QuentinC |