Web Accessibility Checker : Check Details

Element

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.6 Contrast (Enhanced) (AAA)

Requirement

The contrast between the colour of link text and its background is not sufficient to meet WCAG2.0 Level AAA.

Error

Link text colour must provide high contrast with its background colour.

Short Description

The visual presentation of link text must have a contrast ratio of at least 7:1, except for large-scale text, which must have a contrast ratio of at least 4.5:1 as determined by a contrast algorithm specified by WCAG2.0. Large scale text is considered to be at least 18-point (or 14 point when bold).

Rationale

The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard, and b) the empirical finding that in the population, visual acuity of 20/40 is associated with a contrast sensitivity loss of roughly 1.5 [ARDITI-FAYE]. A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1.

How To Repair

Use a colour contrast evaluator to determine if text and background colours provide a contrast ratio of 7:1 for standard text, or 4.5:1 for larger text. Change colour codes to produce sufficient contrast. http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-resources-head

Repair Example

<style type="text/css">
a:link {color:black;}
</style>
<div style="background-color:#ffffff">
<a href="high_contrast_text.html">Coloured text must provide high contrast with a coloured background</a>
</div>

How To Determine

Question	Does the colour of link text on a coloured background provide a contrast ratio of 7:1 or greater?
PASS	Yes, the contrast ratio is at least 7:1 for link text, and 4.5:1 for large text.
FAIL	No, the contrast ratio is less than 7:1 for link text, and less than 4.5:1 for large text.

Steps To Check

Procedure

1. Enter the URL, or upload the HTML of a Web page in which colour values are defined for text and/or backgrounds, to have the contrast evaluator determine the contrast ratio between text and background colours.
2. For some contrast evaluation tools, enter the Hex colour codes (e.g #FFEE00) for the text and the background on which it appears to calculate the contrast ratio.

Expected Result

1. The contrast evaluator will display a contrast ratio of at least 7:1 for standard sized text. Standard sized text is considered to be less than 18-point (or 14 point when bold).
2. The contrast evaluator will display a contrast ratio of at least 4.5:1 for large scale text. Large scale text is considered to be at least 18-point (or 14 point when bold).

Failed Result

1. The contrast evaluator will display a contrast ratio less than 7:1 for standard sized text. Standard sized text is considered to be less than 18-point (or 14 point when bold).
2. The contrast evaluator will display a contrast ratio less than 4.5:1 for large scale text. Large scale text is considered to be at least 18-point (or 14 point when bold).

Examples

Pass Examples

Style assigns high contrast black as link colour on a white background.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>OAC Testfile - Check #310 - Negative</title>
<style type="text/css">
a:link{color:black;}
</style>
</head>
<body>
<p style="background-color:#ffffff;">
Read the <a href="carol-text-dogs.txt">text transcript of Carol's talk about dogs</a>.
</p>
</body>
</html>

Fail Examples

Style assigns low contrast green to visited link colour on a red background.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>OAC Testfile - Check #310 - Positive</title>
<style type="text/css">
a:link{color:#b70006;}
</style>
</head>
<body>
<p style="background-color:#59b500;">
Read the <a href="carol-text-dogs.txt">text transcript of Carol's talk about dogs</a>.
</p>
</body>
</html>