Skip to content

Take 22% off using code GET22. Hurry, ends soon!

Web Accessibility Toolkit for WordPress
Get Started

Contrast Adjustments

How to adjust contrast ratio in WordPress

The Contrast feature in Web Accessibility Toolkit allows you to manually override the text and background colors of specific elements on your site. It’s designed to help you quickly resolve contrast issues without modifying any code within your theme.

Poor contrast is one of the most common accessibility problems, and this tool provides a fast way to fix contrast ratio using CSS selectors and a point-and-click interface.

What accessibility issue does this fix

This option helps meet the WCAG 2.1 Success Criterion 1.4.3 – Contrast (Minimum) (opens in new tab), which requires:

  • contrast ratio of at least 4.5:1 for normal text
  • contrast ratio of at least 3:1 for large text (18pt or 14pt bold)

It ensures that all users, including those with visual impairments or color blindness, can read your content clearly regardless of screen brightness or ambient lighting.

How does Contrast affect accessibility

Without sufficient contrast, users may struggle to read your text, especially users with low vision. Gray-on-white or pastel-on-pastel combinations often fail to meet the required contrast ratios.

When you apply accessible contrast settings:

  • Text becomes legible for a broader range of users
  • WCAG compliance improves
  • Visual fatigue is reduced, creating a better user experience

By correcting isolated contrast issues with this tool, you can keep your site’s overall design intact while ensuring readability where it’s needed most.

How to enable Contrast using Web Accessibility Toolkit

  1. Go to Settings > Web Accessibility.
  2. Open the Contrast tab.
  3. Click Add Row to define a new contrast rule.
  4. In the Selector field, enter a valid CSS selector targeting the element (e.g. .footer-links, #promo-banner, or div.notice-box).
  5. Choose a Text Color and a Background Color.
  6. The plugin will automatically calculate the contrast ratio and display whether it passes WCAG AA or AAA guidelines, or if it fails.
  7. Click Save Changes to apply your custom styles.

You can add as many rules as needed for different areas of your site.

Tip: Use this feature for targeted improvements rather than full-site color schemes. For larger visual changes, consider updating your theme CSS directly.

How to confirm that Contrast is working

  1. Visit a page that contains the targeted element.
  2. Inspect the element using your browser’s Developer Tools to confirm that your chosen color and background-color values have been applied.