What the issue is
Links that do not have sufficient color contrast compared to the surrounding text or background color can create readability issues. This includes both textual links and image links. Users with visual impairments, such as color blindness or low vision, may struggle to identify or read these links, which can significantly impede their web navigation experience. Links without adequate contrast fail to stand out, requiring users to exert more effort to find navigable elements, potentially leading to a frustrating experience.
The level of contrast required depends on:
- The WCAG level targeted (AA or AAA).
- Whether the link is textual or graphic.
- if textual, the effective point size of the text (larger fonts are allowed a lower contrast ratio).
The specific requirement for text and non-text contrast are provided bi the WCAG guidelines.
Why this is important
Sufficient color contrast is vital for making web content accessible to all users, including those with visual impairments. High contrast between links and their background or surrounding text ensures that all users can distinguish and utilize links effectively. Adhering to color contrast guidelines enhances the readability of web content, contributing to a more inclusive and equitable user experience. This not only benefits users with visual impairments but also improves the overall legibility of web pages in various viewing conditions.
Who it affects
This issue affects:
- Users with visual impairments, such as color blindness or low vision, who require high contrast to distinguish text and navigational elements.
- Users in environments with glare or reduced lighting conditions, where low-contrast elements become challenging to discern (situational disabilities).
- All users, as sufficient contrast improves clarity and legibility for texts and interactive components.
How to remediate the issue
- Ensure that the color contrast ratio between link text and its background meets or exceeds the minimum requirements defined by WCAG (e.g. at least 4.5:1 for normal text at level AA).
- Provide additional visual cues beyond color for links, such as underlines or bold text, especially for links embedded within text.
- Use tools and resources to test color contrast throughout the development and maintenance phases of the web project to ensure compliance with accessibility standards.
- Consider user settings and preferences by supporting browser and assistive technology adjustments for different color schemes and contrasts.
- Be careful of overlaying text and images and differnt screen resolutions and dimensions may change what part of an image the text is over. Something that at fill screen appears to be black text agains a light sky may become black text against a dark building.
- If text is embedded in an image, then ensure that the contrast at all edges of that text still meets the appropriate contrast ratio for the effective point size of the text when displayed (logo-texts have an exception). Remember that images may vary in size depending on the device the page is present on.
Guidance on ensuring sufficient color contrast can be found at WCAG Quick Reference on Contrast (Minimum).