Web Accessibility Checker : Check Details

Element

body

Error Type

Known

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.1 Use of Colour (A)

Requirement

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

Error

Poor color contrast between text and background color.

Short Description

The luminosity contrast ratio between text and background color is at least 5:1

How To Repair

Change either the text attribute value or the bgcolor attribute value of the body element so the luminosity contrast ratio is greater than 5:1

Repair Example

<body text="#000000" bgcolor="#ffffff">

Steps To Check

Procedure

1. Check if the text attribute value and the bgcolor attribute value of the body element are set.
2. If these 2 attribute values are not set then the test passes. If these 2 attribute values are set then perform the following steps:
3. Calculate the luminosity contrast ratio between the text attribute value and the bgcolor attribute value of the body element.
4. The luminosity contrast ratio can be determined using the following formula:
5. (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 is at least 5:1 or the text and background colors are not set.

Failed Result

1. Change either the text attribute value or the bgcolor attribute value of the body element so the luminosity contrast ratio is greater than 5:1
2. Another way to pass this test is to remove the text attribute and the bgcolor attribute from the body element.

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 HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>ATRC Testfile - Check #221.2 - Negative</title>
</head>
<body bgcolor="#ffffff" text="#000000">
<p>This is some example text.</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 HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>ATRC Testfile - Check #221.1 - Positive</title>
</head>
<body bgcolor="#ffffff" text="#cccccc">
<p>This is some example text.</p>
</body>
</html>