Text elements must have sufficient color contrast against the background

Rule ID: color-contrast

Ruleset: attest-ios 1.0

User Impact: Serious

WCAG: 1.4.3

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Start learning today

Compliance Data & Impact

User Impact

Serious
▼

Minor

Critical

Disabilities Affected

Low Vision
Colorblindness

Requirement(s)

WCAG 2.1 (AA): MUST
WCAG 2.0 (AA): MUST

WCAG Success Criteria

1.4.3 Contrast (Minimum)

Section 508 Guidelines

Not specified, or not applicable

How to Fix the Problem

Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it.

Success Criterion: Ensure color contrast of at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pt or 14pt bold.

Note:

Elements marked with "N/A" background and foreground colors are considered incomplete and require a manual review. N/A background and foreground colors happen for any of the following reasons:

when the background is an image
when the element is partially off-screen
when the element is detected to have more than one background color

Use the color contrast analyzer below to find colors that pass the guidelines.

Why it Matters

Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.

There are nearly three times more individuals with low vision than those with total blindness. One in twelve people cannot see the average full spectrum of colors - about 8% of men and 0.4% of women in the US. A person with low vision or color blindness is unable to distinguish text against a background without sufficient contrast.

Rule Description

The Algorithm (in simple terms)

Checks all text elements to ensure that the contrast between the foreground text and the background colors meet the WCAG 2 AA contrast ratio thresholds.

Note:

This rule will not report on text elements that have a UIImageView, are obscured by other elements or are images of text.

This also checks for child elements of disabled buttons so they can be ignored to avoid a false value.

Resources

Deque University Course Pages (subscription required)

Contribute to axe-core on GitHub

Other Resources

You may also want to check out these other resources.

Was this information helpful?

You have already given your feedback, thank you..