Chapter 21: Minimum Contrast

In the spectrum of people with visual challenges considerable number of users will be people with low vision and those have color blindness.

The persons with low vision may be of different experiences. Some might only have central vision, some may have blurred vision, some may be having difficulty in reading smaller font or that is far from them.

It is estimated that one in 8 men have color blindness. We might not know, one among our family members may have color blindness. The most common form of color blindness is red-green color blindness. Individuals who experience red-green color blindness may have difficulty in differentiating the light red and dark green.

To overcome many of these difficulties on the web content, WCAG 2.0 guidelines have proposed for a minimum contrast requirement between the foreground /font color and the background. A specific recommendation is also provided for the elements such as links surrounded by general text .

The requirement is as follows. Remember that this is the minimum contrast requirement.

  1. Regular text and images of regular text must have a minimum contrast of 4.5 :1. Refer to appendix for the definition of regular text.
  2. Large scale text and images of large scale text can have a minimum contrast ratio of 3 : 1.
  3. While providing color as the only means of differentiating the visual element, provide a minimum contrast ratio of 3 : 1 between the text of two elements.

Validation for color contrast.

  1. Open the page on the browser.
  2. Open the color contrast analyser (CCA) tool.
  3. For each color combination pick the foreground color using the color palate and repeat the same for background color too.
  4. Once you pick the foreground and background colors, the tool should display the contrast value and also mentions if it is pass or failed.
  5. For the content that need to be checked with surrounding content, pick both the colors and the tool should say if it is passed or failed.
  6. If the color contrast analyzer say it is passed else failed.

WCAG success criteria

1.4.3 Minimum contrast(Level AA)