Internet Marketing - Matt Bailey [148]
Wednesday: Understand Color Blindness and Contrast
Most people tend to think of accessibility as a blind-only issue. However, color blindness affects a large number of the population and affects the ability of people to distinguish between various colors. The most common is red-green color blindness. The accessibility issue facing color-blind visitors is that colors that are used as primary information devices are simply lost or unclear, because the colors are indistinguishable. The only way to ensure that a feature of importance is communicated effectively beyond color is contrast.
Color blindness is something that affects about 8 percent of the male population. Color-blind women tend not to be as affected as men, and color blindness among women is not as prevalent. Estimates are far-ranging on this issue, because rates of color blindness seem to be higher in certain countries, mostly the United States and Europe.
In addition to color blindness, the simple process of aging creates numerous vision issues. As we age, our vision naturally loses acuity. Colors dim as our vision becomes less sharp and blurrier. For adults older than 40, the ability to focus is more difficult, because the lens in the eye naturally hardens. People compensate for this with reading glasses, bifocals, or even surgery.
The definition of accessibility increases all the time when you consider the amount of vision issues and difficulties of people as they grow older and also attempt to do more online. It is critical that pages provide enough contrast in order to make content easier to read and tasks easier to accomplish.
On Monday the Web Content Accessibility Guidelines (WCAG) were used to show the importance of keeping search engines in mind. For this emphasis on contrast, I am going to go to both the earlier version of the WCAG 1.0 and the later 2.0 version. The earlier version is much more specific in terms of contrast. But the 2.0 version provides some very clear testing procedures for contrast ratios.
Guidelines for Contrast
WCAG 1.0 introduces contrast like this:
2.1 Ensure that all information conveyed by color is also available without color.
2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
I can’t say enough about high-contrast text online. I seem to be able to find at least one website a week using blue text on a light blue background or, even worse, blue or grey text on a black background. I am also noticing a lot more light gray text on white backgrounds, which maybe seems “artsy” but is much more difficult to read. The text on the site needs to be big enough and contrasting enough to allow for easy reading. Unless you want to hide your message, make it easy to read.
WCAG 2.0 increases the responsibility but also provides specific information for measuring contrast.
Guideline 1.3 : Ensure that information and structure can be separated from presentation
1.3.2 Any information that is conveyed by color is also visually evident without color.
1.3.4 Information that is conveyed by variations in presentation of text is also conveyed in text, or the variations in presentation of text can be programmatically determined.
1.3.5 Information required to understand and operate content does not rely on shape, size, visual location, or orientation of components.
Guideline 1.4 : Make it easy to distinguish foreground information from its background
1.4.1 Text or diagrams, and their background, have a luminosity contrast ratio of at least 5:1
1.4.3 Text or diagrams, and their background, have a luminosity contrast ratio of at least 10:1.
Essentially, contrast needs