User Interface Designers Need to Understand Color Blindness
There are various types of color blindness, some more common and some quite rare.
Most color blindness issues are genetic and found on the x chromosome, which is why it’s much more common in men than women. (Women have two copies of the x chromosome but men only have one.) The different types of red-green color blindness may affect as many as 10% of males and should be taken into consideration in any web or application design.
Deuteranomaly affects about 5% of men and is the most common form of color blindness. It is “green weak”, where red, orange, yellow and green all appear to be shifted towards the red end of the spectrum.
Deuteranopia – no green cones
Protanopia affects about 1% of men and people with this condition have no red cones. Red, orange and yellow can appear “dim.”
Protanomaly – low red cones
Best Practices: User Interfaces for the Color Blind
- Sufficient contrast goes a long ways to create accessible user interfaces that can be used by people with color perception anomalies.
- Never use color as a primary indicator. Use verbiage to back up the message when using red and green to indicate stop and go.
- Protanopia can cause reds and greens to appear dimmed. This isn’t generally a problem in an interface with a white background, but darker backgrounds are more likely to cause problems.
Tools to Analyze User Interfaces for Color Blindness Issues
- http://michelf.com/projects/sim-daltonism/ – color blindness simulator for the Mac
- http://colorfilter.wickline.org/ – colorblind web page filtering (does not filter images)
- http://vischeck.com/ – simulates 3 types of color blindness (for images)
- http://www.vischeck.com/daltonize/ Daltonize provides color image correction for color blindness –
- http://colororacle.org/ – Color Oracle looks like a great cross-platform tool (Windows, Mac and Linux) but I can’t get it to run on Win7. I haven’t tried my Mac yet.
- Photoshop has some assistance under View -> Proof Setup that tests for more common forms of color blindness
- https://addons.mozilla.org/en-US/firefox/search/?q=color+blind&cat=all&x=0&y=0 – Firefox has some plugins but I haven’t tried them yet
- http://juicystudio.com/services/aertcolourcontrast.php#result – this isn’t a tool for color blindness in particular, but it will determine contrast problems in your application that may make your pages difficult to read for anyone with sight impairment
Palettes Pre-Optimized for the Color Blind
- http://otal.umd.edu/uupractice/color/
- http://safecolours.rigdenage.com/palettefiles.html – palette files
- http://jfly.iam.u-tokyo.ac.jp/color/#pallet -unambiguous color sets
- http://colorschemedesigner.com/ – includes simulations for all types of color blindness