custom error pages
image maps
page structure
site structure
writing content
color blindness
new technology
other issues

home > usability > color blindness

color blindness

Approximately one in twelve people may not be able to use your web site properly due to some form of color blindness. At best, your site won't look to a color blind person as you designed it, at worst, this could mean that text is unreadable, navigation unusable and elements are invisible.

  • Most color blind people can't distinguish between shades of red and green
  • Shades of these colors appear lighter to color blind people
  • The most common forms of color blindness are:
    • Protanopia ­ unable to receive red, and
    • Deuteranopia ­ unable to receive green
  • A much more rare form is found in:
    • Tritanopia - unable to receive blue

how can these problems be counteracted?

  • Don't use color as the only visual clue
    • Always underline links
    • Provide other means to distinguish between sections
  • Avoid using only red and green in your design
  • Maintain a high contrast between text and background
  • Always put "alt" text on graphics

design tips

  • When designing your site, switch to black and white (desaturate in PhotoShop) to see if it still works after removing color
  • Ask color blind colleagues or friends for their opinion
  • Save versions of your design using the PhotoShop color blind palettes below to see the design as a color blind person would

color palettes

  • These are the Adobe Photoshop versions of the Protanopia and Deuteranopia palettes:
  • Right click to save as
  • Save in \Presets\Color Swatches\Adobe Photoshop Only\ in your Adobe Photoshop program folder


  • In Photoshop, create your image and then:
  • Image > Mode > Indexed color
  • Palette > Custom
  • Load
  • Find the appropriate palette
e.g. of protan palette
e.g. of protan palette
e.g. of deutan palette
e.g. of deutan palette

other resources