Color

Approximately 8% of men worldwide have some sort of color-blindness. The number increases to about 10-11% in areas with predominately Caucasian populations.  The most prevalent type of colorblindness affects the red-green spectrum. In the image below, you can get a visual indication as to what is it is like for someone with red or green colorblindness to view color. Those with colorblindness may see these colors in a grayed out version of varying hues that might be very difficult to distinguish.

A series of images showing normal vision, red color blind, and green colorblind

Because of this, it is important to not use color alone to convey information. For example, if you need to create a bar chart using different colors, have the bar also be textured too. This way if someone can’t distinguish the color, they can distinguish it by texture. If a line chart, have dashed and dotted lines to accompany the color. If you use colored text for emphasis, bold or italicize it too. Color is okay as long as it is used in the right way.

Color contrast between background colors and text colors (or even an image or clipart) needs to be sufficient as well. In the image below, it could be difficult for someone who can’t see green very well or who has low vision to make out the clip art image clearly.

color contrast comparison of three clip art images

DIY Accessibility Checking

How to Install and Use the Colour Analyzer tool
  1. Download Colour Contrast Analyzer Tool
  2. Open the Colour_Contrast_Analyzer application
  3. Make sure you are in the Result — Luminosity mode, not the contrast result for color blindness.
  4. Click the Foreground eye dropper tool, hover over and click the foreground color to select it.
  5. Click the Background eye dropper tool, hover over and click the background color.
  6. If you have a 12 pixel font color you are testing for color contrast, you must get a Pass (AA). If you have font larger than that, you must get a Pass (AA) in the Large Text field.

VideoHow-to Install the Colour Contrast Analyzer
VideoHow to use the Colour Contrast Analyzer tool

Other Colour Contrast Tools

Accessible Web Helper free Chrome plugin

Screen Reader Software
  • Claws Screen Reader Emulator: (Firefox add-on) Claws will show you in a text format how a screen reader will read the page.
  • Read-out-loud feature in Acrobat Reader can quickly check to see if your PDF is screen reader friendly.
  • NVDA: Free open-source screen reader software  for Windows.
  • Voiceover: For Mac users.