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

Accessibility: It's about people

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: “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: “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: “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: “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

Video: Lexie, online shopper who cannot distinguish between certain colors (color blindness)

This video is also available on a W3C server: Video: Lexie, online shopper who cannot distinguish between certain colors (color blindness) (file format: MP4, file size: 274MB).

Text Transcript with Description of Visuals

Audio Visual
How people with disabilities use digital technology; Lexie, online shopper who cannot distinguish between colors (color blindness). How people with disabilities use digital technology; Lexie, online shopper who cannot distinguish between certain colors (color blindness).
Hello! I’m Lexie. I was born with deuteranopia and protanopia, which people often call “color blindness”. A woman speaks directly to the camera.
I have difficulty distinguishing between red, green, orange, and brown, all of which appear to me as kind of murky brown. In a store, I often can’t tell the color of two shoes or two shirts beside each other. I love online shopping because it’s often easier for me when they use the names of the colors in addition to showing the colors. The woman is sitting on a sofa using a tablet, looking at different coloured t-shirts in an online shop.
Unfortunately, not all online shops have an accessible checkout experience for me. Often the sign-up or checkout form says “fields in red are required”. Ugh! Most times I can’t tell which fields are required when they use color only. Good shops either have the word “required” or that little star beside the fields, or even better put the word “optional” beside the ones I can skip. The woman is sitting on a sofa using a tablet, trying to complete an online form, with some sections marked in red.
Not relying on color alone is important for other websites and apps too. For example, my favorite fantasy football app has a symbol for each team on the jersey of the players, in addition to color. This helps me spot the players on my team more quickly, not just by reading the names under each player. The woman is sitting on a sofa using a mobile phone, looking at a fantasy football app.
Color issues also happen at work. For example, when my colleagues highlight words in a document without using the commenting function. The commenting function outlines the marked text in addition to highlighting it. Another example is when charts don’t have symbols as well as the colors for lines and bars – I can’t identify them from color alone. My team is usually careful about this but sometimes the suppliers we work with aren’t. The woman is sitting on a sofa using a tablet, reading through a report which shows highlighted words and phrases as well as a pie chart.
You can help make technology accessible to me. Accessibility: It’s about people. The woman speaks directly to the camera.
For more information from the Web Accessibility Initiative on how people with disabilities use digital technology, visit w3.org/WAI/people Accessibility: It’s about people; w3.org/WAI/people
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/.