Accessibility - Step-by-step instructions for analyzing Color Contrast

Contrast values can be analyzed using color contrast checkers. Learn how to use them to make content easier to locate and understand.

Step 1: Understand the standard

  • Normal text must have a contrast ratio of at least 4.5:1 with its background.
  • Large text (≥18pt regular, ≥14pt bold) requires 3:1.
  • UI components and graphical objects also require 3:1.
  • Example: Light gray (#CCCCCC) on white (#FFFFFF) is almost always insufficient.

Step 2: Gather the colors to test

Option 1: This process is for identifying the color of text or background shading applied directly in Word.

  1. Select the Text:
    • Highlight the text whose color you want to identify.
  2. Open the "Font Color" Dialog:
    • On the "Home" tab, look for the "Font Color" button (an underlined 'A').
    • Click the small dropdown arrow next to the button to open the color palette.
  3. Access "More Colors":
    • At the bottom of the palette, click "More Colors...".
  4. Go to the "Custom" Tab:
    • A new window will appear. Click on the "Custom" tab.
  5. Find and Copy the HEX Code:
    • In this dialog box, you will see the color model displayed as RGB (Red, Green, Blue).
    • At the bottom, you will see a field labeled "Hex:". This is the HEX code for the selected color. You can copy this value directly.

Option 2: Use a color picker tool (such as the ColorZilla browser extension or the built-in dev tools “Inspector” in Chrome/Edge/Firefox) to identify colors used.

Step 3: Open a Color Contrast tool

Step 4: Enter the color values

  1. Copy the text color HEX code or RGB value and paste it into the “Foreground Color” box.
  2. Copy the background color and paste it into the “Background Color” box.

Step 5: Review the results

The tool instantly calculates the contrast ratio (e.g., “4.67:1”). The checker indicates PASS/FAIL for:

  • Normal text (4.5:1)
  • Large text (3:1)
  • Graphics/UI (3:1)

If all text and UI scores “PASS,” in Level AA, then the color combination is compliant.

Step 6: Diagnose and fix failures

If you get a FAIL:

  • Try darkening text color or lightening the background to increase the contrast.
  • Use the sliders in WebAIM to adjust colors until you see a "PASS."

Tip: Stay above 4.5:1 whenever possible for body text.

Print Article