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