|
|
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
instructions
- 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 deutan palette
|
other resources
|
navigation 