Web Accessibility Checker : Check Details

Element

all elements

Error Type

Known

Guidelines

WCAG 2.0 (Level AA)
1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
Success Criteria 1.4.3 Contrast (Minimum) (AA)

Requirement

Provide sufficient contrast between text and background colours.

Error

The contrast between the colour of text and its background for the element is not sufficient to meet WCAG2.0 Level AA.

Short Description

The visual presentation of text must have a contrast ratio of at least 4.5:1, except for large-scale text, which must have a contrast ratio of at least 3: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 4.5:1 for standard text, or 3: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

<div style="background-color:#FFFFFF">
<span style="color:#000000">Coloured text must contrast sufficiently with a coloured background</span>
</div>

How To Determine

Question	Is there more than a 4.5:1 contrast ratio between standard text and its background, or a 3:1 contrast ratio for large scale text?
PASS	Yes, the contrast ratio is greater than 4.5:1 for text, and less than 3:1 for large text
FAIL	No, the contrast ratio is less than 4.5:1 for text, and less than 3: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 greater than or equal to 4.5: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 greater than or equal to 3: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 4.5: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 3:1 for large scale text. Large scale text is considered to be at least 18-point (or 14 point when bold).

Examples

Pass Examples

High contrast black text 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 #301 - Negative</title>
</head>
<body>
<p style="background-color:#ffffff;color:#000000;">
Read the <a href="carol-text-dogs.txt">text transcript of Carol's talk about dogs</a>.
</p>
</body>
</html>

Fail Examples

Low contrast black text on a blue 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 #301 - Positive</title>
</head>
<body>
<p style="background-color:#0000ff;color:#000000;">
Read the <a href="carol-text-dogs.txt">text transcript of Carol's talk about dogs</a>.
</p>
</body>
</html>