How can choices in background and text color affect accessibility?

Many users will have visual impediments that will require good contrast in the documents you are producing.

This article answers the following questions about how to ensure the text in your document meets basic requirements for color contrast:

What are contrast ratios?

When one color is placed on top of another, the contrast ratio is the numerical value that describes the relationship between these two colors.  The ratio is a measurement of how the brightest color (e.g., white) compares to the darkest color (e.g., black).

The contrast between background and foreground colors should have a ratio of 4.5:1 or higher. Leaving the defaults of the editor is best - black text on white, with a ratio of 21:1.

Text that is larger and has wider character strokes is easier to read at lower contrast.  Large text, defined as text in an 18 point or larger font, or bold text in a 14 point or larger font requires a slightly lower contrast ratio, 3:1.

The table below contains examples of text on backgrounds with varying contrast ratios, and indicates whether the level of contrast would be adequate.

Text Color Background color Sample Contrast ratio Passes Contrast Requirements?
  #BADFEE   black   Sample   14.878 Yes
  red   black   Sample   5.252 Almost (text should be larger)
  #FFFF00   #00FFFF   Sample   1.168 No

How do I change foreground and background colors of text?

  1. If you need to edit the text color, select the Text Color button, which resembles a letter A with an underline: A.
  2. To edit the background color of the text, which displays as if you had highlighted the text with a highlighter, select the Background Color button to the right of the Text Color button.  The Background Color button resembles a solid black box containing a light gray letter A.
  3. Selecting either of these buttons will display a Color Picker, from which you can choose a color, such as Black or Maroon.  Yellow is a Background Color commonly used to highlight black text.  Select the desired color.

How do I check my color selection for adequate contrast?

In most cases the contrast will be obvious, but if you need to verify, take the following steps.

Select the colored text.

  1. In the Rich-Text Editor, select some of the text with the foreground or background color you want to check.
  2. Select the Text Color button to check the text color,
  3. Or select the Background Color button to check the background color.

Obtain the hex number for the color.

Check your color selection for adequate contrast.

 

  1. Select the More Colors... option in the Color Picker.
  2. A Select color window will pop up.  At the top right of the window, your selected color will be displayed under Highlight.
  3. Under this box with your selected color, you will see a 6-digit hex number, starting with #.  This is the number that allows the internet browser to display the selected color.  Record the 6-digit hex number for the color you have selected.

Use the hex number(s) to check contrast.

To check how the Text Color you have selected contrasts with the background color behind your text or how your Background Color contrasts with the color of your text:

  1. Access an online color contrast tool such as WebAIM's Color Contrast Checker (opens new window).
  2. To use WebAIM's Color Contrast Checker, enter the hex number for your text color into the Foreground Color box and the hex number for your text's background color into the Background Color box.  Alternatively, select the color block to the right of either text box to access WebAIM's color picker, then select a color.
  3. The contrast checker will tell you the colors Pass if they have enough contrast.