Web Accessibility Checker : Check Details

Element

body

Error Type

Known

Guidelines

Stanca Act
Requirement 6: Visual Contrast

Requirement

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

Error

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

Short Description

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

How To Repair

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

Repair Example

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

Steps To Check

Procedure

1. Calculate the color difference and the color brightness difference between the text 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 text 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 text attribute and the bgcolor attribute from the body element.

Examples

Pass Examples

The background color and the text 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 #226-2 - Negative</title>
</head>
<body bgcolor="#ffffff" text="#000000">
<p>This is some example text.</p>
</body>
</html>

Fail Examples

The background color and the text 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 #226-1 - Positive</title>
</head>
<body bgcolor="#ffffff" text="#cccccc">
<p>This is some example text.</p>
</body>
</html>