There are many types of color blindness and low-vision conditions that may make it difficult for people to distinguish color or contrast.
As many as 8 percent of men and 0.5 percent of women, of Northern European descent, experience red-green color blindness. There are several other types of color blindness including blue-yellow and total color blindness. Additionally, there are numerous conditions which cause contrast that is too subtle to be difficult to see.
The best strategy is to not rely on color alone to convey information on your website.
A color contrast ratio of 7:1 is recommended for normal sized text and 4.5:1 for large text.
Automated tools are available for you to test your colors before going live.
Link Style
See the Importance of Appearance for links.
Underlining links is a practical application that will benefit low vision and color blind visitors. The guidelines for the law state two additional requirements for body text links that are not underlined by default:
- The link text must have a 3:1 contrast ratio from the surrounding non-link text and
- The link must present a “non-color designator” (typically the introduction of the underline) on both mouse hover and keyboard focus.
For more info, check out: http://webaim.org/techniques/hypertext/link_text#appearance
By default the color used for links in Twitter is not high enough contrast. If you embed a Twitter timeline on your website, visit the “set customization options” to configure it to be more accessible and choose a higher contrast color. Don’t forget to also make your images accessible.
Learn More
Everything you ever wanted to know about color and contrast can be found on the Color and Contrast website. Read about vision disabilities on WebAIM’s website.
