This check ensures that when link text is activated through hover, focus, active, or visited, it remains in sufficient contrast with the background.
What
The color of link text in all user-induced states such as hover, focus, active, and visited must have sufficient contrast with its background. The required contrast ratios are:
At least 4.5:1 for standard-sized text.
At least 3:1 for large-scale text (24px or 18.67px bold).
This ensures that link text remains legible and accessible under all conditions.
Why
This section provides information about why this check is important and provides some examples.
Why is this important?
Sufficient contrast provides the following:
Maintains readability in all interactions: Users can read link text regardless of its state.
Ensures accessibility for visually impaired users: Users can easily distinguish high contrast link text.
Prevents usability issues: Links that change color on hover or focus remain visible.
Examples
This section provides some pass and fail examples.
Pass examples
Sufficient contrast for all states
a {
color: #0055cc; /* Contrast ratio: 7.1:1 on white */
}
a:hover,
a:focus {
color: #003399; /* Contrast ratio: 5.2:1 on white */
}
Why this works:
The default link color (#0055cc) has sufficient contrast against the white background (7.1:1).
The hover/focus color (#003399) maintains a contrast ratio above 4.5:1.
Link text color in user-induced states must meet minimum contrast
1.4.3 Contrast (Minimum)
Introduction
This check ensures that when link text is activated through hover, focus, active, or visited, it remains in sufficient contrast with the background.
What
The color of link text in all user-induced states such as hover, focus, active, and visited must have sufficient contrast with its background. The required contrast ratios are:
At least 4.5:1 for standard-sized text.
At least 3:1 for large-scale text (24px or 18.67px bold).
This ensures that link text remains legible and accessible under all conditions.
Why
This section provides information about why this check is important and provides some examples.
Why is this important?
Sufficient contrast provides the following:
Maintains readability in all interactions: Users can read link text regardless of its state.
Ensures accessibility for visually impaired users: Users can easily distinguish high contrast link text.
Prevents usability issues: Links that change color on hover or focus remain visible.
Examples
This section provides some pass and fail examples.
Pass examples
Sufficient contrast for all states
a {
color: #0055cc; /* Contrast ratio: 7.1:1 on white */
}
a:hover,
a:focus {
color: #003399; /* Contrast ratio: 5.2:1 on white */
}
Why this works:
The default link color (#0055cc) has sufficient contrast against the white background (7.1:1).
The hover/focus color (#003399) maintains a contrast ratio above 4.5:1.