Accessibility: Color

Accessibility: Color

Color should be used limitedly and when used should be checked to make sure it meets the needed color contrast ratios requirements.

When Using Color, You Should:

  • Not use it by itself to distinguish something important
    • If the color is to signify that it is important make sure to make it bold, italics, add a border, or add asterisks (*) to the item so that users know that it is important.
  • When using color in a graph/chart add a pattern as well to the item so that it is easily distinguished from the other pieces of the data
  • Make sure that it passes the color contrast requirements
    • WebAim Color Contrast Checker

Some Specific Types of Color Blindness:

  • Red-Green Color Blindness – most common color blindness
    • Deuteranomaly: Greens look more like red
    • Protanomaly: Reds look more like green but less bright
    • Protanopia and Deuteranopia: Greens and Reds look the exact same
  • Blue-Yellow Color Blindness
    • Tritanomaly: Difficult to tell the difference between blue and green and yellow and red
    • Tritanopia: Cannot distinguish the difference between blue and green, purple and red, and yellow and pink. Colors also seem less bright.
  • Monochromacy
    • Cannot see any color at all and see things in gray scale.
  • Tetrachromacy
    • Can see more colors than the average person – note this impacts roughly 12% of women

Color Combinations to Avoid:

  • Red & Green
  • Green & Bran
  • Green & Blue
  • Blue & Gray
  • Blue & Purple
  • Green & Gray
  • Green & Black

User Impact

Users with color blindness, low vision, cognitive disabilities, or other medical problems may not be able to see certain colors or be able to distinguish/comprehend color or color combinations. When there isn’t enough color contrast of the text to the background (solid color or images) then users will either not be able to read the text or will struggle to read the text. Low color contrast could frustrate the user and make them leave your website due to the inability to read the text.

You can Simulate Color Blindness on images with Coblis Color Blindness Simulator or Pilestones Color Blindness Simulator.