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 active link text and background color is at least 5:1.

Error

Poor color contrast between active link text and background color.

Short Description

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

How To Repair

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

Repair Example

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

Steps To Check

Procedure

1. Check if the alink 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 alink 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 active link and background color is at least 5:1 or the active link and background colors are not set.

Failed Result

1. Change either the alink 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 alink attribute and the bgcolor attribute from the body element.

Examples

Pass Examples

The luminosity contrast ratio between active link 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 #223.2 - Negative</title>
</head>
<body bgcolor="#ffffff" alink="#000000">
<p>This is some <a href="http://www.example.com">example</a> text.</p>
</body>
</html>

Fail Examples

The luminosity contrast ratio between active link 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 #223.1 - Positive</title>
</head>
<body bgcolor="#ffffff" alink="#cccccc">
<p>This is some <a href="http://www.example.com">example</a> text.</p>
</body>
</html>