Web Accessibility for Color Blindness

Color vision deficiency is referred to as color blindness. People with color blindness are not blind, but perceive colors differently than someone who doesn’t have a color vision deficiency. Color blindness occurs when someone is unable to perceive the variance between different colors.

Side-by-side comparison demonstrating Normal vision vs. Color Blindness

Normal vision vs. Color Blindness

Color blindness can be generally simplified into three different categories:

  • Red-Green Color Blindness
  • Blue-Yellow Color Blindness
  • Total Color Blindness

Red-green color blindness is the most common color blindness. Individuals with red-green color blindness are unable to distinguish between red and green hues. Total color blindness, the absence of any color, is very rare and the least common color blindness. Albeit extremely rare, with total color blindness people experience the world in greyscale.

Color blindness can be inherited by abnormal photopigments, physical or chemical damage to the eye, or the onset of age, such as the development of cataracts with in the eye.

In order to distinguish between colors, or pigments, the eye has to have three cone cells. Each cone cell senses a different light color – red, blue, and green. Color is seen and distinguished when the cone cells sense the light colors. A genetic marker can make a person color blind when they don’t have one of the cone cells or the cone cells are not distinguishing color.

In addition to not being able to distinguish between certain color combinations, people who have color blindness have reported that red and black is sometimes hard to distinguish between.

People with color blindness may encounter barriers when colors are used to provide information. The same can be said about navigating the web. Some websites or web pages rely on color to relay information, but they should not rely on color, alone.

W3C outlines specifications for the use of color in the Web Content Accessibility Guidelines (WCAG) 2.0.

Success Criteria 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 A)

Side-by-side comparison demonstrating Bad Use of Color vs. Good Use of Color

Bad Use of Color (Fail SC 1.4.1) vs. Good Use of Color (Pass SC 1.4.1)

As a practical example, designers should rely on more than just color to depict button states. Commonly, to indicate a mouse hover or keyboard select state, designers will simply alter the color of a link or button. This is fine, but they must also accompany the color alteration with some other form of visual cue, such using a text decorations like underline or font weight controls.

In addition to Success Criteria 1.4.1, WCAG 2.0 level AA conformance guidance states that designers must make careful consideration when setting the color of text or images with text, when background colors are also a factor. In other words, designers must ensure that foreground text is always presented with a high contrast ratio, in comparison to the color or colors in the background.

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Side-by-side comparison demonstrating Bad Contrast vs. Good Contrast

Bad Contrast (Fail SC 1.4.3) vs. Good Contrast (Pass SC 1.4.3)

All text on a website that is intended to be read needs to meet certain visual standards in order to be readable for all users. Visibility of text is measured by the contrast between colors of the text and the background that it appears on. The WCAG 2.0 Level AA standards define the minimum contrast ratio between the text and background (Success Criteria 1.4.3). The ratio is calculated based on a formula using the two colors’ RGB values. For text or images of text that are 14 point regular or smaller, the contrast ratio must be at least 4.5:1. For text or images of text that are 14 point bold or larger, the contrast ratio must be at least 3:1. Logo text, brand name, or images of text that are part of a picture that contains significant other visual content, have no contrast minimum requirement. Images of text that are intended to read and not intended to be only decorative, must meet the contrast minimum requirements.

Adhering to these WCAG 2.0 guidelines can also assist organizations looking to meet Section 508 Guidelines and publish a Voluntary Product Accessibility Template (VPAT).

Section 1194.21 Software Applications and Operating Systems requires that:

“Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

“When a product permits a user to adjust color and contrast settings, a variety of color selections capable of producing a range of contrast levels shall be provided.”

Section 1194.22 Web-based Internet Information and Applications requires that:

“Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.”

AudioEye Developer Tools for Evaluating and Fixing Issues Impacting Users with Color Blindness

The AudioEye Digital Accessibility Platform provides developers with tools for testing issues of accessibility pertaining to color blindness. The tool can also be used to remediate issues for those customers embedding the AudioEye JavaScript.

The automated testing suite is capable of automatically testing certain color contrast issues. When site evaluations are initiated, the system runs through an in depth analysis of the html and associated stylesheets (CSS). Based on this analysis developers can quickly identify which areas of the site are requiring focus and may need adjustment in order to conform to the aforementioned Level A and Level AA success criteria. In addition, through the controls provided via the platform, developers can use the solution to deploy fixes that get served to the website via the AudioEye JavaScript. This option can provide great utility as a bridge to solving issues of accessibility until more formal changes are integrated in future releases of the product or website.

It is also important to note that, as a Managed Service, AudioEye provides Color Contrast analysis as part of the Ally solution and as part of the ad hoc auditing services that are made available to licensed Digital Accessibility Platform self-service customers. Not all color contrast issues may be detected through automated testing. Manual observation is required in order to ensure full compliance. To assist with manual analysis, the Digital Accessibility Platform makes available a color contrast checker. By simply inputing the text and background color, the system will return a pass/fail value indicating the pairing’s conformance with WCAG 2.0. The [WebAIM Color Contrast Checker](http://webaim.org/resources/contrastchecker
) is another valuable resource for designing and developing with digital inclusion in mind.

In addition to helping ensure designers and developers have taken careful measure to design and develop their web environments with techniques that help improve the user experience for blind users, AudioEye also provides a series of assistive tools that are included with the Ally solution offering.

Learn more about the Digital Accessibility Platform

AudioEye Personalization Tools Addressing Issues Impacting Users with Color Blindness

The AudioEye Ally Toolbar provides users with color blindness with several options to optimize the user experience to meet their needs. The Ally Toolbar comes with a visual customization tool called the Reader. This utility allows users to customize the color of foreground text and background text. By selecting from a series of pre-configured color contrast schemas, users are provided with a full range of options to tailor the user experience to meet their individual preferences.

Manipulating the color display is as simple as clicking on the color contrast select supplied within the Reader Control Bar or simply by cycling through options via the “C” keyboard command.

For organizations implementing AudioEye Web Personalization Tools, the Ally Toolbar provides users with many different options allowing them to personalize their user experience to meet their individual needs. In addition to providing greater usability that addresses specific disability use-cases, enabling free assistive utilities such as the Ally solution is an effective tool for meeting specific WCAG 2.0 success criteria.

Learn more about the Ally Toolbar