Understanding Color Contrast Issues

What is color contrast?

Color contrast refers to the difference in brightness between text (or other important visual elements) and its background.

Sufficient contrast helps ensure content can be read by visitors with low vision, color vision deficiencies, or those viewing your website under challenging lighting conditions.

DubBot reports color contrast issues when the contrast between foreground and background colors may not meet accessibility requirements.

Common causes

Color contrast issues may be caused by:

• Text placed on colored backgrounds.
• Images with text overlays.
• Custom styling or inline formatting.
• Website templates or themes.

Can I fix this issue?

Sometimes.

If the issue is caused by content you added, such as colored text, custom formatting, or an image containing text, you may be able to correct it by updating your content.

If the issue originates from your website’s template, theme, or shared components, it will need to be addressed by Web Services.

What content editors can do

Review the affected page for:

• Text placed on colored backgrounds.
• Images containing important text.
• Inline color formatting.
• Decorative elements that reduce readability.

Whenever possible:

• Use your website’s default styles.
• Avoid manually changing text colors.
• Avoid placing important text inside images.

When to contact Web Services

If the reported issue involves:

• Navigation
• Headers or footers
• Buttons
• Shared components
• Templates
• Website themes

submit a Web Services support ticket.

Include:

• The affected page URL.
• A screenshot, if helpful.
• The DubBot issue description.

Verify the correction

After making any content changes:

1. Publish the updated page.
2. Confirm the page displays correctly.
3. Wait for DubBot’s next crawl to verify whether the issue has been resolved.

If no content changes can be made, no further action is required beyond notifying Web Services.