In this article
Fixing Color Contrast Issues
To achieve the minimum required contrast specified by WCAG, the text or background color must be adjusted, typically found in your style sheets. DubBot provides information on the currently calculated contrast and interactive sliders when possible to help you envision how much the colors need to adjust to comply with the requirements.
Items that Need Manual Checking
Some color contrast situations require a more manual evaluation to ensure proper contrast is met:
Text over images, overlapping content in general, including CSS gradients.
Background colors set through CSS pseudo-elements or borders.
One such tool you can use for manual contrast testing is ColorZilla. You can select the colors for the foreground and background in question and paste the hexadecimal code for those colors into a color contrast checker such as the WebAIM Contrast Checker.
Resources
Learn More with WCAG
DubBot Flag: Elements must meet minimum color contrast ratio thresholds
Link Text Contrast
Fix this flag:
Increase the contrast to 3:1 between the link text and the surrounding text OR
Add a style, such as an underline or bold, to the link text
Nice to have:
Manually check that when you hover over a link, there is a visual enhancement of the link (bolded, font change, etc.)
Learn More with WCAG
DubBot Flag: Links must be distinguishable without relying on color
Dealing with Brand Colors?
A common issue is that the client's 'official' colors don't meet these contrast requirements. Luckily, often only minor adjustments are needed to reach the required contrast levels. It is helpful to remind those who don't want to adjust these official colors about the wide range of colors that are seen by users, as it depends on the device they are using and any personal settings they have applied. Color specification on the web is not as concrete as it is in print; there is no guarantee that the color specified is what someone sees. Often, companies add a web-only color palette that meets their chosen compliance level.
Looking for color contrast basics? Refer to our Ensure Proper Color Contrast article.
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!