This document provides information about the Acquia Web Governance accessibility check:
Is link text distinguishable in all interactive states? (Enhanced)
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
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.
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
Sufficient contrast for all states
a {
color: #003366; /* Contrast ratio: 12.6:1 on white */
}
a:hover,
a:focus {
color: #002244; /* Contrast ratio: 9.5:1 on white */
}
Why this works:
The default link color (#003366) has sufficient contrast (12.6:1).
The hover/focus color (#002244) maintains a contrast ratio above 7:1.
Is link text distinguishable in all interactive states? (Enhanced)
1.4.6 Contrast (Enhanced)
Introduction
This document provides information about the Acquia Web Governance accessibility check:
Is link text distinguishable in all interactive states? (Enhanced)
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
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.
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
Sufficient contrast for all states
a {
color: #003366; /* Contrast ratio: 12.6:1 on white */
}
a:hover,
a:focus {
color: #002244; /* Contrast ratio: 9.5:1 on white */
}
Why this works:
The default link color (#003366) has sufficient contrast (12.6:1).
The hover/focus color (#002244) maintains a contrast ratio above 7:1.