Are you using color as a way of instructing visitors about the next action to take on your Web site?
Let’s say you have images of two buttons on your Web page.
If you instruct folks to click on the red button, you may be confusing the over 108 million Web users who are color blind.
WCAG 2.0 Guideline 1.4.1 warns Web designers, developers and content creators about depending solely on color when conveying instructions.
Using Etre’s Color Blindness Simulator, here’s a demo of how the red and green buttons look, depending on the type of color blindness a user has.
There are a number of color blindness conditions, including the three simulated by Etre’s tool.
Protanopia: People with protanopia lack the long-wavelength sensitive retinal cones that are required to distinguish between colors in the green-yellow-red section of the spectrum. It is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.
Here’s how individuals with protanopia see the red & green buttons:
Deuteranopia: People with deuteranopia lack medium-wavelength retinal cones and are therefore also unable to distinguish between colors in the green-yellow-red section of the spectrum. Deuteranopia is a more common form of color blindness, occurring in between 1% and 5% of males (varying by race) and in approximately 0.1% of females.
Here’s how people with deuteranopia see the red & green buttons:
Tritanopia: People with color blindness involving the inactivation of the short-wavelength sensitive cone system have tritanopia, a very rare blue-yellow color blindness. Tritanopia is a very rare form of color blindness, occurring in less than 0.003% of males and females.
Here’s how people with tritanopia see the red & green buttons:
Accessible Best Practice: Don’t use color as part of your instructional content. It will confuse and frustrate your site’s color blind visitors and is considered inaccessible according to WCAG 2.0 Guidelines.
WCAG 2.0 Guidelines covered in this post:
Level A Guideline 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Level AAA Guideline 3.3.5 Help: Provide detailed help and instructions.
WEBSITE ACCESSIBILITY TESTING & REMEDIATION SERVICES: Mary Gillen is an experienced Website Accessibility Compliance Auditor and Remediator. She can test your website to determine if it meets accessibility standards:
WCAG 2.1: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines
Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints