How To Plan for Visually Disabled Users on Computers and Mobile Devices: Color Blindness, Low Vision, and Blindness

Did you know that there is about 7.4 million people with vision disorders? These vision disorders include but is not limited to:

  • Color blindness
  • Low Vision (associated with illnesses and age)
  • Blindness

I am going to touch on the very basics of these vision disabilities and so that you will know what to avoid in your interface, and most importantly, what to do in your interface.

Color Blindness

In the world, color blindness affects around 1 in 12 men (8%) and 1 in 200 women (0.5%).

People with color blindness have the inability to process red and green or blue and yellow. This can cause issues when using colors to indicate important states or statistics in a app or website.

Some possible issues people with color blindness may deal with:

  • Traffic lights
  • Picking out clothes that match
  • Being rejected from a job assignment due to color deficiency
  • Buying ripe bananas at the grocery store
  • Making sure meat is thoroughly cooked
  • Not being able to tell difference between vacant (green) and occupied (red)
  • Colored maps and graphics (i.e. weather radars)

Examples

If you love making charts or read them yourselves, check out this Google Analytics chart (normal vision at top and color blindness below it). It’s difficult to see which one is 25 to 34 and 18 to 24 years old.

Normal Vision reading charts is great.
Color Blindness causes issues with red and green colors, not able to differentiate labels.

People that are color blind may also have issues seeing traffic light colors and rely heavily on position of those colors for their action.

Left to Right: Normal Vision, Tritanopia (Missing Blue), and Protanopia (Missing Red) Color Blindness

What to Avoid in the Interface

What can you do to accommodate 8+% of the United States population that visit the web or use an app? There are a bunch of color combinations that should be avoided if at all possible. The colors on the chart below are if viewed by normal vision.

Avoid pairing green with red, grey, blue, brown or black. Avoid pairing blue with purple, gray, and yellow.

Here’s a more comprehensive color chart of colors to avoid. The two color combinations above the main block translates into the solid color block to color blind users.

How To Improve the Interface

  • Use colors and symbols to indicate the meaning of something.
  • Use shade and tone variations instead of multiple colors in your designs.
  • Use contrasting colors and tones.
  • Consider using textured background patterns to differentiate similar colors.

Low Vision

Did you know about 135 million people around the world have low vision?

A person with low vision will have difficulty with daily activities such as looking at websites, reading, and driving. Even with glasses, contact lenses, medicine, or surgery, their vision may not be that good. Typically we think of elderly people that are associated with this disability, but it affects any age.

Low vision issues may affect anyone with the following.

  • Glaucoma, Diabetes, Macular degeneration, or Cataracts
  • Older monitors with poor screen resolution
  • Mobile devices with smaller screens
  • Accessing the web via phone or computer with poorly lit screens or washed out by sunlight
  • Migraine sufferers that are sensitive to light (screen light adjustment)

According to WebAIM, the most important rule for low vision is how perceivable something is. People with low vision issues can’t see content that is small, does not enlarge well, or does not have enough contrast.

Some possible issues people with low vision may deal with:

  • Recognizing the faces of friends and relatives
  • Reading, cooking, or sewing
  • Seeing because the lights don’t seem as bright as usual
  • Crossing the street or reading signs

What to Avoid in the Interface

Embedded Text in Images
People with low vision use screen magnifier programs to view the web. Avoid text that is embedded within graphics (unless it’s a vector image). Why? If the user zooms in, the text will be rasterized and sometimes be not legible.

Left side is text in an image, while the right side is that text zoomed in.

Bad Contrast with Readable Elements
Avoid bad contrast of background and overlaying text. For example, having a black background with blue, white, or very dark gray text would not be a great idea. Same goes for red background with blue or green text. Yuck!

Examples of bad contrasts between background and overlaying text.

How to Improve the Interface

  • Pull most if not all important text out of images
  • Make sure the contrast between backgrounds and overlaying text are distinct. ( dark background and light text vs. light background and dark text).
  • Text in images should be large, clear, and distinct (see both items above).
  • Allow people to customize their contrast settings by not overriding backgrounds and main body text with stylesheets.

Blindness

Users that are blind can’t rely on using a monitor or mouse to access the web. They use screen readers and keyboards to get the information they need.

Blind users heavily rely on keyboard accessibility and screen readers. Because of this, relying on mouse-only events could be problematic.

Brailliant Braille Display helps users to read from the computer (courtesy of Humanware)

What to Avoid in the Interface

  • Images without alt tags
  • Improperly named links without title attributes
  • Too much non-relevant information at the top of a website
  • Lack of instructions for filling out a form
  • Avoid iframe content, as this can disorientate the user
  • Avoid flash content (use HTML5 player instead)
  • Image maps — not all screen readers can interpret these
  • Avoid using javascript within links so there’s no question where it goes
    <a href=”javascript:history.go(-1)”>See Info about Flowers</a>

How to Improve the Interface

Use skip to content links at the top of the page. Skipping over navigation and sidebars with secondary content can be very helpful for those wanting to get to information quickly.
<a href=”#content”>Skip to Main Content</a>
<a name=”content”></a>

Use proper labels on form fields.
<label for=”firstname”>First Name</label>
<input type=”text” id=”firstname”>

Name links carefully so that the user knows what it will do when clicked.
Never use “Click Here” or “Learn More” because these do not explain what the link will do, however, use something more descriptive such as “Download the Latest Version of Chrome”

Provide alt text for all images.
Keep it brief and to the point. If the image is meaningless, your alt text doesn’t need to be too detailed, however, if the image conveys an action, be sure to be concise. If you are still stuck in the 90’s and want to use a graphic for spacing, you should still use alt text, but designate it as empty by adding a space in between the quotes.

If using tables on your site, provide column and row headers using the <th> tag. Make sure that tables (don’t forget merged cells) make sense when read row by row from left to right. Also don’t forget to add a summary and caption to your table.

In Conclusion

I hope you find this information about visual disabilities helpful so that whenever you plan on building a new web app or website, you can also plan to make it accessible to a larger range of audience.

If you care about your users, you may want to try putting yourself in their shoes briefly by using a screen reader, changing up the colors of your monitor, or even trying to enlarge fonts on a screen (that includes mobile devices as well).

Remember, larger audience equals more engagement, and more engagement equals more opportunities!

Coming soon! How to Plan for Cognitive Disabled Users on Computers and Mobile Devices