Element

body

Error Type

Known

Guidelines

Requirement

The contrast between active link text and background color is greater than WAI ERT color algorithm threshold.

Error

Poor contrast between active link text and background color (WAI ERT algorithm).

Short Description

The contrast between active link text and background color must be greater than the WAI ERT color algorithm threshold.

How To Repair

Change either the alink attribute value or the bgcolor attribute value of the body element so the contrast surpasses the WAI ERT color algorithm threshold.

Repair Example

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

Steps To Check

Procedure

1. Calculate the color difference and the color brightness difference between the alink attribute value and the bgcolor attribute value of the body element.
2. The color difference can be determined using the following formula:
3. (maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
4. The color brightness difference can be determined using the following formula:
5. ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Expected Result

1. The color difference is expected to be greater than 124.
2. The color brigheness difference is expected to be greater than 499.

Failed Result

1. Change either the alink attribute value or the bgcolor attribute value of the body element so the colors exceed the WAI ERT algorithm threshold
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 background color and the alink color surpass the WAI ERT color algorithm threshold.
<?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 #228-2 - Negative</title>
</head>
<body bgcolor="#ffffff" alink="#000000">
<p>This is some example text.</p>
</body>
</html>

Fail Examples

The background color and the alink color do not surpass the WAI ERT color algorithm threshold.
<?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 #228-1 - Positive</title>
</head>
<body bgcolor="#ffffff" alink="#cccccc">
<p>This is some example text.</p>
</body>
</html>

English | German | Italiano


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