![[logo] US EPA](http://www.epa.gov/epafiles/images/logo_epaseal.gif){kind=logo}
Developing & Testing for Color-Blindness
More Information
Remediation Tools
- Criterion (Assessment & Training Services)
- Deque (RAMP, Worldspace)
- FANGS (Screen Reader Emulator for FireFox)
- Freedom Scientific (JAWS)
- GW Micro (WindowEYES)
- HiSoftware (AccVerify, AccRepair, AccMonitor, CynthiaSAYS, HiCaption)
- Lynx (text browser)
- SSB Technologies (InFocus)
- UseableNet (Lift)
- WatchFire (WebXM, WebXACT, Bobby)
- WebAIM (WAVE)
- Vischeck (Color-Blindness Simulator)
Like many disabilities, color-blindness is rarely a black and white issue (excusing the pun of course). While some people may be completely color-blind and only be able to perceive variations in shades of grey, others may only have difficulty with select colors. Some examples of these types of color-blind disabilities are:
- Deuteranope (a form of red/green color deficit)
- Protanope (another form of red/green color deficit)
- Tritanope (a blue/yellow deficit - very rare)
What to Look For
ITEM 1: Text on the page, in graphics or other navigational elements does not refer to items solely by their color. This does not just apply to web pages but all electronic documents and user interfaces.
Example:
Wrong
Click the Green button to indicate Yes.
What a user with Red/Green color-blindness (Deuteranope) would see
Click the Green button to indicate Yes.
Correct
Click the Green button to indicate Yes.
What a user with Red/Green color-blindness (Deuteranope) would see
Click the Green button to indicate Yes.
ITEM 2: There is sufficient difference in the tonal values of overlayed colored elements so that users who are color-blind or have poor vision can distinquish between elements of the page, especially with style sheets disabled. It is important to look at all page elements including those created with code/style sheets as well as graphics.
Example 1: DC Metro Map
Example 2: EPA Home Page
Testing Techniques
Office Printer Method
- Print user interfaces on a standard B&W office printer to check tonal values of all the colors used in the interface. If you can clearly
Color-Blindness Simulator
- Use a color-blindness simulator to review what graphics and interfaces look like to people with various color deficits. NOTE: As many simulators are either web-based or designed to integrate directely into graphic design applications, you may need to take a screen capture of your interface or web page to evaluatethe product as a whole.
View Product in Grayscale
- Most graphic design applications give you the capability to view your graphic in grayscale (as opposed to RGB or CMYK). In order to evaluate an entire interface design, you may need to take a screen capture of your interface or web page to evaluate the product as a whole.
- Microsoft PowerPoint Guidance
- Go to View > Black and White to see what your presentation looks like without colors.
- Right-click on any element (text box, image, design element, etc...) that does not display clearly (including those on your slide masters) and choose Black and White > Grayscale from the context menu that pops up to adjust the tonal values of that object so that it displays clearer without color.
- Not only is this a good idea for accessibility reasons but it will also benefit users who choose to print out your presentation on a B&W printer.
- Go to View > Black and White to see what your presentation looks like without colors.
Disable Style Sheets
- For web-based products, try turning off style sheets in your various browsers when testing. How does your interface look now? It might not be pretty but could a person still read all the content and navigate properly.
External Resources
Articles
- How to make figures and presentations that are friendly to color blind people by Masataka Okabe and Kei Ito
An excellent paper explaining not only how people with color-blindness view the world but how to develop products that avoid the typical problems caused by color-blindness. - Colour and Accessibility in Web Pages by Lois Wakeman
Testing Tools
- Many web development tools with integrated accessibility testing features (such as Macromedia's Dreamweaver) or specifically developed accessibility testing tools (such as HiSoftware's AccVerify, SSB Technologies InFocus, WatchFire's Bobby and WebXACT products, etc.) will evaluate your code/style sheets for potential problems caused by using color. Remember that these tools perform a cold analysis based on the tonal values of the colors called in the code.
Frequent problems with this type of cold assessment are:
- An automated assessment tool cannot determine the intended use of content and navigational elements.
- These types of automated assessment tools many times cannot properly evaluate graphical objects.
- Coded colors are not evaluated in conjunction with the graphically created colors in an interface or document.
- Most of the time regardless of what the automated assessment tool returns as a result, it will flag any line of code that calls a style or color for manual evaluation. This frequently diminishes the usefulness of the assessment tool for evaluating color issues.
- An automated assessment tool cannot determine the intended use of content and navigational elements.
- Vischeck - A free color-blindness simulator developed by programmers with color deficits. Vischeck can be run from the web (upload single image or input a publically available URL) or as a plug-in to Adobe Photoshop (Photoshop plug-ins also work in Adobe Illustrator and Macromedia Fireworks). There is also a Vischeck plug-in available for the National Institute of Health's ImageJ java-based image analysis tool (also free) if you want to really geek out on the analysis front.
- Design Evaluation - A web-based Visual Basic utility that evalutates your HTML code and shows you what your web page looks like to someone with various color deficits. AN IMPORTANT NOTE: The submitting page code is rendered back without external style sheets (this includes graphics that are called in those external styles).