Web Accessibility Checker : Check Details

Element

img

Error Type

Potential

Guidelines

WCAG 2.0 (Level AAA)
1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
Success Criteria 1.4.6 Contrast (Enhanced) (AAA)

Requirement

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

Error

This 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 10:1.

Failed Result

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

Examples

Pass Examples

The luminosity contrast ratio between text and background color is greater than 10: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 #253.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 10: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 #253.1 - Positive</title>
</head>
<body>
<p><img src="contrast1.gif" alt="hello"/></p>
</body>
</html>