Element

img

Error Type

Potential

Guidelines

  • Visual Content
    Guideline Group[ _GROUPNAME_90 ]
  • WCAG 2.0 (Level A)
    Guideline Group1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
    Guideline SubgroupSuccess Criteria 1.4.1 Use of Color (A)
  • WCAG 2.0 (Level AA)
    Guideline Group1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
    Guideline SubgroupSuccess Criteria 1.4.1 Use of Color (A)
  • WCAG 2.0 (Level AAA)
    Guideline Group1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
    Guideline SubgroupSuccess Criteria 1.4.1 Use of Colour (A)

Requirement

The luminosity contrast ratio between text and background color in all images is at least 5:1.

Error

Image may contain text with poor contrast.

Short Description

Make sure that users can read text that is presented over a background.

How To Determine

Question Does this image contain text with a poor contrast ratio?
PASS Image does not contain text with a poor contrast ratio.
FAIL Image contains text with poor contrast ratio.

Steps To Check

Procedure

1. Check if the image contains any text.
2. If the image contains text, calculate the luminosity contrast ratio between the text and the background color.
3. The luminosity contrast ratio can be determined using the following formula:
4. (L1+.05) / (L2+.05) where L is luminosity and is defined as .2126*R + .7152*G + .0722B using linearized R, G, and B values. Linearized R (for example) = (R/FS)^2.2 where FS is full scale value (255 for 8 bit color channels). L1 is the higher value (of text or background) and L2 is the lower value.

Expected Result

1. The luminosity contrast ratio between text and background color in all images is at least 5:1.

Failed Result

1. Change the background or text color so the luminosity contrast ratio is at least 5:1.

Examples

Pass Examples

The luminosity contrast ratio between text and background color is greater than 5:1.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>ATRC Testfile - Check #251.2 - Negative</title>
</head>
<body>
<p><img src="contrast2.gif" alt="hello"/></p>
</body>
</html>

Fail Examples

The luminosity contrast ratio between text and background color is less than 5:1.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
<title>ATRC Testfile - Check #251.1 - Positive</title>
</head>
<body>
<p><img src="contrast1.gif" alt="hello"/></p>
</body>
</html>

English | German | Italiano


Web site engine's code is copyright © 2011
Inclusive Design Institute
Web Service API