1.4.6 Contrast (Enhanced)
Introduction¶
This success criteria states that contrast must be calculated so that color is not a key factor. This helps people with a color vision deficit.
What¶
The color of link text in all user-induced states such as hover, focus, active, and visited, must have enhanced contrast with its background. The required contrast ratios are:
- At least 7:1 for standard-sized text.
- At least 4.5:1 for large-scale text (24px or 18.67px bold).
This ensures that link text remains highly legible for users with visual impairments.
Why¶
Enhances readability in all interactions:
Ensures that link text remains visible across different states.
Improves accessibility for visually impaired users:
Higher contrast helps users with low vision to distinguish link text.
Prevents usability issues:
Links that change color on hover or focus must remain easily identifiable.
Examples¶
This section provides some pass and fail examples.
Pass examples¶
Fail examples¶
Insufficient contrast in default state
a {
color: #777777; /* Contrast ratio: 4.3:1 on white */
}
Issue:
- The contrast is below 7:1, which does not meet the requirement.
Fix:
a {
color: #003366; /* Contrast ratio: 12.6:1 */
}
Hover/focus state fails enhanced contrast requirement
a {
color: #003366; /* Good contrast */
}
a:hover {
color: #555555; /* Contrast ratio: 5.1:1 */
}
Issue:
- The hover color (#555555) is below 7:1.
Fix:
a:hover {
color: #002244; /* Contrast ratio: 9.5:1 */
}
Large text fails enhanced contrast minimum (requires 4.5:1)
.large-link {
font-size: 24px;
color: #888888; /* Contrast ratio: 3.2:1 */
}
Issue:
- The contrast is below the required 4.5:1 for large text.
Fix:
.large-link {
color: #444444; /* Contrast ratio: 5.2:1 */
}
How¶
This section provides instructions on how to review and fix the issue.
How to review it¶
This section provides instructions on how to review this issue.
- Identify all user-induced states of links:
- Default
- Hover
- Focus
- Active
- Visited.
- Use a contrast checker to verify that each state meets these requirements:
- 7:1 for normal text
- 4.5:1 for large-scale text
- Ensure that all interactions maintain readability and do not cause color contrast failures.
How to fix it¶
This section provides some ways to fix the issue.
Use sufficiently contrasting colors
a {
color: #002255; /* Contrast 9.8:1 */
}
a:hover {
color: #001133; /* Contrast 7.4:1 */
}
Use a contrast checking tool such as:
Ensure that large text meets the 4.5:1 requirement
.large-link {
font-size: 24px;
color: #444444; /* Contrast 5.2:1 */
}
Additional resources¶
WCAG success criteria¶
1.4.6 Contrast (Enhanced)