Color Standards and Considerations

The W3C (2000) says in its accessibility guidelines that the elements of a web page should sufficiently contrast with each other "when viewed by someone having color deficits or when viewed on a black and white screen" (Guideline 2, Checkpoint 2.2). 

If you are creating a graphic or using an image that is not just decorative, you will have decisions to make regarding color, contrast, and font size. The following standards (adapted from the W3C color-contrast standards Links to an external site., 2016) can help you make those decisions:

• Maintain a minimum of a 4.5:1 color-contrast ratio between the background and paragraph text.
• Maintain a minimum of a 3:1 color-contrast ratio between the background and 18-point (or larger) fonts, or between the background and bolded 14-point fonts.
• Maintain a minimum of a 3:1 color-contrast ratio between adjacent colors in user interface components and graphical objects (except when it is essential for information to be presented in a way that does not meet standards or if the image is decorative).

Even if you don't have any type of visual impairment, you've likely encountered web content that was virtually unreadable due to poor color contrast. Think of light yellow text on a white background or the second pie chart in Figure 2, which uses similar shades of blue for different categories. Even though the white text contrasts sufficiently with the blue chart and the various shades contrast well with the white background, the categories are not easily distinguishable from one another. Every section of the chart on the left stands out while maintaining high enough contrast with the white text and background.

Some cases may appear to be acceptable in terms of contrast ratio, but it is not always possible to determine whether two colors are sufficiently contrasted just by looking at them. Fortunately, there are several tools and techniques that can help you make that determination.

Checking Color Contrast

There are different ways to test for proper contrast:

• Convert to gray scale: Converting pages to gray scale and comparing them side by side is a great way to test the color contrast for all levels of color-blindness and for readability, especially if you want to modify images with markups such as circling, underlining, or using arrows to point to important items.
• Invert colors: Some people are sensitive to light and prefer to view their screens by inverting the colors to make the background black and the text white. You can test your pages by inverting them yourself.
  • On a Mac, open System Preferences, select Accessibility, and select the Invert Colors check box.
  • On a PC, enter "magnifier" into the Start Menu search bar. When you select the program, a small window appears on your screen (which, at that point, is enlarged). In the window, select the Options button. In the dialog box that appears, select the "Turn on Color Inversion" check box.
• Use color contrast tools:
  • Contrast Ratio tool Links to an external site.: is a tool that allows you to easily check the color contrast between two colors that has an eye dropper tool and takes any type of color code.
  • Color Contrast Analyzer Links to an external site.: this is a free download from TPGi with an eye dropper tool.
  • Canvas Accessibility Checker: Select the accessibility checker in the RCE and it will catch any colors that do not meet standards and allow you to choose a new color. 

    

Color to Convey Meaning

On the web, different colors can have specific meanings in certain situations. For example, you've most likely come across an online form that marked required fields in red (see Figure 6). Even if this meaning is explained in the instructions, it will be useless to people with certain type of color-blindness or no sight at all because assistive technology like JAWS does not alert users to the color of text.

That's why it's important to use at least one other method to convey information in addition to color. In the case of form fields with required fields marked in red, you could also add an asterisk next to each field, which will be noted by a screen reader.

References