Skip to main content
Fix Color Contrast Errors
Updated over a week ago

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.

Failure Summary shown when text doesn't meet contrast 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!

Did this answer your question?