Skip to content

[Low Vis] Failure of Success Criterion 1.4.3 and 1.4.6 due to using background color that do not provide sufficient contrast with foreground text color  #95

Closed
@joshueoconnor

Description

Submitter's Name: aurelien levy
Submitter's Email: [email protected]

This failure occurs when people with low vision are not able to read text that is displayed over a background color. When there is not sufficient contrast between the background color and the text color, features of the background color can be confused with the text color making it difficult to accurately read the text.
To satisfy Success Criterion 1.4.3 and 1.4.6, there must be sufficient contrast between the text color and its background color.

Example 1 Head: Failure Example 1
Example 1 Description:
Black text overlays a dark grey background

h2{
color:#000000;
background: #515151;
}

Example 2 Head: Failure Example 2
Example 2 Description:
Black text overlays a background with a css vertical gradient from black to white.

h2{
color:#000000;
background: linear-gradient(to bottom, #FFFFFF 0%,#000000 100%);
}

Test Procedure:
1.Quickcheck: First do a quick check to see if the contrast between the text and the area of the background color that is darkest (for dark text) or lightest (for light text) meets or exceeds that required by the Success Criterion (1.4.3 or 1.4.6). If the contrast meets or exceeds the specified contrast, then there is no failure.
2.If the Quickcheck is false, then check to see if the background color behind each letter has sufficient contrast with the letter.

Expected Result:
If Quickcheck is false and #2 is false as well then this failure condition applies and the content fails the contrast Success Criterion.

Additional Notes:
this failure relates to 1.4.3 and 1.4.6

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions