Color Contrast - Information For This Demo

Quick tip: Some automated scanners, like WAVE, do a good job of checking contrast, but they will not usually find errors where text is place on a background image, or when "opacity" is used to allow you to see the background image found behind a block of text. In that case, you must use a tool like the Colour Contrast Analyser, which lets you select the actual colors from the display.

How to test this issue

  • Test technique: WAVE.
    • The WAVE contrast tool will show errors for plain text on a plain background.
    • The main WAVE display indicates whether contrast errors were found.
    • Click the Contrast tab in the Wave tool to see the errors.
    • Note: WAVE will not find contrast errors when text is displayed over a background image. In those cases, you must use the Colour Contrast Analyser tool.
  • Alternate test technique: Colour Contrast Analyser.
    • The Colour Contrast Analyser can be used to test any type of text, including text found in images or text displayed on top of a background image.
    • Use the tool's eyedropper function to select the text color and background color for any text you suspect may have contrast issues.
    • Confirm that the contrast ratio is 4.5 to 1 or greater. (The AA results for normal text will show Pass or Fail.)

Failing WCAG Guidelines and Test Tips

For this demo, the following WCAG guidelines fail:

  • 1.4.3: Minimum contrast