Many users will have visual impediments that will require good contrast in the documents you are producing. The best way to help these users is to make sure that the contrast between background and foreground has a ratio of 4.5:1 or higher. Leaving the defaults of the editor intact is best - black text on white, with a ratio of 21:1.
Examples of Contrast
The image above contains examples of text with varying contrast ratios, and indicates whether the level of contrast would be adequate.
Steps to Change Foreground and Background Colors
If you need to edit the text color, select the Text Color button, which resembles a letter A with an underline: A.
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 near the Text Color button. The Background Color button resembles a solid black box containing a white letter A.
Selecting either button will display a Color Picker, from which you can select a color, such as Black or Maroon. Yellow is a Background Color commonly used to highlight text. Select a color to choose it.
Check your color selection for adequate contrast.
In most cases the contrast will be obvious, but if you need to verify, take the following steps:
- Select More Colors.. in the Color Picker.
- A Select color window will pop up. In the pop-up window, your selected color will be displayed under Highlight.
- Under this box with your selected color, you'll see a 6-digit hex number, starting with #. This is the number that allows the internet browser to display the selected color.
- Record the the 6-digit hex number for the color you have selected. Using an online tool such as WebAIM's Color Contrast Checker, check how the Text Color you've selected contrasts with the background color behind your text (if you're selecting a Text Color) or how your selected Background Color contrasts with the color of your text. To use WebAIM's Color Contrast Checker, enter the hex number for your text and background colors into the boxes provided. The contrast checker will tell you the colors Pass if they have enough contrast.