This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Using sufficient contrast for images that convey information

Jump to: navigation, search



This technique relates to any technology that uses images that convey meaning.

WCAG references

New Low Vision SC needed similar to Success Criterion 1.4.3 (Contrast (Minimum).

See New Low Vision SC to set baseline contrast for images & icons that convey information #3


The objective of this technique is to help ensure that when an image is used to convey information or functionality even given a text-based alternative, it has sufficient contrast.

People with low vision often have difficulty perceiving images that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness) difference of 3:1 or greater can make the image more distinguishable when the person does not see a full range of colors and does not use assistive technology.


  • A Web application uses icons to represent concepts. A 3:1 minimum contrast is used for the foreground and background of each icon.
  • Colored slices next to each other in a pie chart have a 3:1 minimum contrast as well as differing patterns or text to differentiate them from each other.


Related Techniques



For each image within the Web page or application that uses color to convey information or functionality:

  1. Check that each as a contrast ratio of at least 3:1.

Expected Results

  • #1 is true.