This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

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 user story is an example of a person with this type of disability. Other people with this disability may have different experiences.

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”) and has difficulty distinguishing among items that are red, green, orange, and brown, all of which appear to her 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.

Much to people’s surprise, Lexie is also a big football fan and has been playing fantasy football with family and workmates for years. 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.

Along with her fun, Lexie still stays connected to the latest news and happenings. This is made easier when charts and graphs related to the articles show data with other visual techniques than just color. For instance, if a pie chart also has patterns and text labels she can more easily and quickly read the information without getting frustrated or being left out completely.

Barrier examples

Using color only barrier
Barrier: “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
Barrier: “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
Barrier: “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 or use a red triangle so I can easily identify them.”
Chart labels barrier
Barrier: “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

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.