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, with interactive sliders when possible, to help you envision how much the colors need to adjust to comply with the requirements.

For AA compliance for unlinked text, WCAG requires at least a 4.5:1 color contrast ratio for normal-sized text and a 3:1 color contrast ratio for larger text.

For AAA compliance for unlinked text, WCAG requires at least a 75:1 color contrast ratio for normal-sized text or a 4.5:1 color contrast ratio for larger text.

Some color contrast situations require a more manual evaluation to ensure proper contrast is met:

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.

DubBot does factor the opacity applied to color contrast checking.

Some effects, like lazy loading and pseudo-classes with changing gradients over an area, can result in automated testing issues. For some of these, we can modify the applied CSS to represent the fully loaded content or the most extreme color in the gradient. For this, users can contact us via the in-app chat or help@dubbot.com for assistance.

Links that occur in blocks of text must have a color contrast of at least 3:1 with the surrounding text to ensure users with issues discerning different colors can still find a link on the page. If the link has a styling difference (like an underline) that does not rely on color, the contrast of 3:1 is not required.

Fix this flag:

Nice to have:

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 decision-makers that there is a wide range of colors presented to users, when only one color is specified on the page. The color actually seen depends upon the device being used, personal screen or browser settings, and any minor changes a person may have applied.

Color specification on the web is not as concrete as 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 WCAG compliance level. This gives web authors an approved set of colors to use on web pages that pass contrast requirements and removes a layer of possible color adaptations needed that would almost certainly not be consistent across their sites.