Color Contrast & Microsoft Word

For those that post accessible content to the Web, color contrast is very important. The contrast between the foreground color of an element to the background of that element determines its readability.

While U.S. law, Section 508, Subpart B, does not specify ratios for acceptable color contrast, the Web Content Accessibility Guidelines (WCAG) do:

WCAG Level AA

  • 4.5:1 normal text
  • 3:1 large text (18pt+ or 14pt+ bold)

WCAG Level AAA

  • 7:1 normal text
  • 4.5:1 large text (18pt+ or 14pt+ bold)

When I’m coding in HTML, I can plug HEX values into any number of contrast checkers available online to ensure sufficient contrast. I most often go to WebAim’s Color Contrast Checker, and I target WCAG AAA for either large or small text. I use this tool in combination with other checkers like WebAim’s WAVE tool and my own eyeballs.

When working in MS Word, things get more convoluted. By using the built-in MS Word 2010 Accessibility Checker (File > Info > Check for Issues > Check Accessibility), I am not able to know whether or not the document contains any issues regarding color contrast. Here is the ridiculously slow system I’ve developed for checking color contrast in MS Word.

A. Find the RGB Formula for Text

  1. Select a bit of text.
  2. In the Home ribbon, select the triangle next to the Text Color icon (a capital letter A), and choose “More Colors.…”
  3. In the Colors dialog box, select the “Custom” tab.
  4. Under the “Color model” drop-down field (make sure it’s set to RGB) should be 3 fields (Red, Green Blue) populated with numbers that make up the RGB formula for the color of the text.
  5. Memorize these numbers. HAHAHAHA! This never works for me. Instead, create a document in a text editor and paste in these numbers. Make a note of where they came from and what they pertain to. I promise. THIS WILL SAVE YOU MUCH TIME.
Microsoft Word’s Custom Color Tab

B. Find the HEX Value of Text

  1. Access ColorHexa.
  2. Type (or paste) the RGB formula into the search field (rgb 255 255 255).
  3. ColorHexa returns the HEX value (#ffffff). Copy and paste it into that text editor file.

C. Find the RGB Formula for Background

  1. Select the same bit of text as before. The following 3 steps are basically the same as that of “A. Find the RGB Calculation for Text.”
  2. In the Home ribbon, select the triangle next to the Fill Color icon (a tilted bucket), and choose “More Colors.…”
  3. In the Colors dialog box (a hexagon-shaped colorful array of color tiles shows), select the “Custom” tab.
  4. Under the “Color model” drop-down field (make sure it’s set to RGB) should be 3 fields (Red, Green Blue) populated with numbers that make up the RGB formula for the color of the text.
  5. Copy and paste into that text editor file.

D. Find the HEX Value of Background

  1. Access ColorHexa.
  2. Type the RGB formula into the search field (rgb 113 177 77).
  3. ColorHexa returns the HEX value (#71b14d). Copy and paste it into that same text editor with the value of the text color.

E. Test the Color Contrast Ratio

  1. Access WebAIM’s Color Contrast Checker. If you prefer another, WCAG lists tools and resources on “Contrast (Minimum): Understanding SC 1.4.3.”
  2. Enter the HEX values you saved for foreground and background.
  3. FAIL. The contrast of #ffffff on #71b14d is only 2.59:1.
WebAim’s Color Contrast Checker

F. Increase Color Contrast

  1. Choose “darken” link after the HEX value field and keep choosing it until everything passes.
  2. Copy the passing HEX value (#3b5c27).
  3. Copy and paste into that text editor file, and make a note of why it’s there.

G. Find the HEX Value of the New Background Color

  1. Access ColorHexa.
  2. Type the HEX value into the search field (#3b5c27).
  3. ColorHexa returns the RGB formula (rgb 59, 92, 39). Copy and paste it into the text editor file.

H. Update the MS Word Document

Hopefully, the creator of the document is going to make your job easier in that they have built it using paragraph styles. In that case, you’ll just modify the colors through the style options. These steps show you how to modify the background color of the style, Heading 1.

  1. Select the arrow (revealed as you hover) to the right of the style name (Heading 1) in the Styles palette.
  2. Choose “Modify…”
  3. Under the “Format” drop-down in the lower left of the “Modify Style” dialog box, choose “Border.”
  4. In the “Borders and Shading” dialog box, select the down-arrow in the “Color” drop-down field and choose “More Colors…”
  5. Choose the “Custom” tab.
  6. Under the drop-down field for “Color Model” that is showing “RGB,” populate the fields for Red, Green and Blue with the new values (59, 92, 39).
  7. Keep clicking “OK” until you get out of all the dialog boxes.
White Text on Green That Doesn’t Pass vs. White on Green That Does Pass

In Short, That’s Too Long

That’s a ridiculously-long process. It’s even more complicated if the person who built the MS Word file didn’t use paragraph styles. It’s more complicated still the more foreground/background color combinations there are in the document. This process involving 8 tasks of up to 7 steps each needs to be done for each.

The Paciello Group Color Contrast Analyser lets you enter RGB values to test contrast. That would ease the pain of checking color contrast in MS Word significantly as you could eliminate sections B, D and G all having to do with converting from and to RGB.

Are there web-based color-contrast tester tools that accept RGB values?

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.