Lexie, online shopper who cannot distinguish between certain colors (color blindness) in Stories of Web Users, How People with Disabilities Use the Web
Note: This is a story of one particular person – it doesn’t represent the broad diversity of people, so that generalizing this story could lead to stereotypes.
About Lexie
Sometimes completing the check out process is tricky because if I overlook a mandatory field, I get an error or warning message in red and it’s hard for me to see the message”.
Lexie was born with deuteranopia and protanopia (often called “color blindness”). She has difficulty distinguishing among items that are red, green, orange, and brown, all of which appear to him as kind of murky brown.
Lexie discovered that shopping for clothes online is actually an advantage over going to physical stores. In addition to just showing pictures of items in the various colors offered, her favorite sites include color labels making coordinating what goes together much easier. Sometimes when checking out though, the required fields and error messages are notated with a red outline and Lexie has to pay special attention to identify them. She noticed lately, however, that a lot of sites are getting better about using a secondary notation like an asterisk for required fields and bold text or an arrow pointing to errors. This really helps a lot.
Lexie plays in various fantasy football leagues with her friends and former workmates. Sometimes there can be problems with the way these sites use color to differentiate between teams, player positions, and whether or not players are selected for her team. As a result, she tends to prefer certain Fantasy Football apps that don’t use color as the only way to indicate information that is important to playing. This means she has to try and convince friends to play using the same app.
Barrier examples
- Using color only barrier
- Problem: “When I select a color choice there is nothing to help me differentiate between the colors.”
- Works well: “Color choices are shown with a descriptive name. The good sites have a link to a slightly longer description of the color.”
- Color only used for errors barrier
- Problem: “When filling out a form online, required fields and errors are marked with a red outline.”
- Works well: “In addition to color, an asterisk or words are used to identify required fields and errors.”
- Color only in games barrier
- Problem: “When I play an online game, enemies are marked with a red circle and friends marked with a green circle and I can’t tell the difference.”
- Works well: “Enemies are also marked with a symbol/use a red triangle so I can easily identify them.”
- Chart labels barrier
- Problem: “When I am reading news articles with data charts, I can’t understand the charts as the columns aren’t labelled clearly.”
- Works well: “The columns are directly labelled or use a texture as well as color.”
Assistive technologies and adaptive strategies used
Related WAI resources
- Video: Colors with Good Contrast
- Video: Customizable Text
- Tip: Provide sufficient contrast between background and foreground
- Tip: Don’t use color alone to convey meaning
- Tip: Ensure that interactive elements are easy to identify
- Check: Contrast ratio (“color contrast”)
- Check: Forms, labels, and errors
Related principles
- Content can be presented in different ways (Perceivable)
- Content is easier to see and hear (Perceivable)
- Content is compatible with current and future user tools (Robust)
- Success Criteria relating to “contrast”