WordPress plugin

Colour and contrast tools

Guide to the six colour and contrast modes in the AccessYes widget: dark contrast, light contrast, high contrast, high saturation, low saturation, and monochrome.

Updated

In this article: What each colour and contrast mode does, who it helps, and the mutual-exclusivity rule. Covers dark contrast, light contrast, high contrast, high saturation, low saturation, and monochrome.

The colour and contrast section of the AccessYes widget gives visitors six modes for adjusting how colours are rendered on your site. These modes address a range of needs: low vision, light sensitivity, colour blindness, and preference for specific viewing environments.

Only one contrast mode can be active at a time. Activating a second mode replaces the first.

Dark contrast

Dark contrast switches the page to a dark mode rendering: dark backgrounds with light text. The widget inverts background and text colours across the page, creating a low-light display that is easier on the eyes in dim environments.

Dark mode benefits several groups:

  • Visitors with photosensitivity or migraines who find bright white backgrounds painful
  • Visitors reading in low-light environments (at night, in bed, in a darkened room)
  • Visitors with certain eye conditions such as aniridia or cataracts, where glare from bright backgrounds causes discomfort

The AccessYes dark contrast mode applies to the entire page, not just text areas. Background images, decorative elements, and UI components are all adjusted. Results vary by theme — sites with heavily custom CSS may show imperfect inversions in some areas. The mode covers the majority of cases well.

Light contrast

Light contrast applies a clean, bright light mode. It renders the page with a stark white background and high-contrast dark text, removing mid-tone greys and tinted backgrounds.

This mode helps visitors who find nuanced colour schemes hard to read — particularly those with certain types of colour vision deficiency, low vision, or cognitive disabilities that make it harder to distinguish foreground text from patterned or tinted backgrounds. Removing background variation gives the text a clean, unambiguous surface to sit on.

High contrast

High contrast maximises the contrast ratio between text and background elements. It is the strongest contrast mode: foregrounds become solid black or white, backgrounds are stripped of colour, and all subtle tonal variation is removed.

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for body text and 3:1 for large text. High contrast mode targets ratios well above these thresholds, making it useful for:

  • Visitors with severe low vision who need the absolute maximum contrast available
  • Visitors who use high contrast mode at the operating system level and find most websites fail to honour it
  • Anyone reading in very bright ambient light where screen glare reduces apparent contrast

High saturation

High saturation intensifies the colours on the page, making them more vivid and distinct. Hues that are muted in the original design become brighter and more saturated.

This mode is most useful for visitors with certain types of colour blindness, particularly those who see colour but find colours appear washed out or indistinct. Higher saturation makes colour differences more perceptible, which can help when a site uses colour as a meaningful signal (such as status indicators or category labels).

High saturation does not affect contrast ratios in the same way as the contrast modes — it changes colour intensity, not the relationship between foreground and background luminance.

Low saturation

Low saturation reduces the intensity of colours on the page, moving the rendering towards a more muted, desaturated palette.

This mode helps:

  • Visitors with light sensitivity who find vivid or highly saturated colours uncomfortable or physically painful
  • Visitors with photophobia (light sensitivity associated with migraines or certain neurological conditions)
  • Visitors with sensory processing differences who find strong colours overwhelming

Low saturation creates a calmer visual experience without fully removing colour information, unlike the monochrome mode.

Monochrome

Monochrome renders the entire page in greyscale. All colour is removed; the page displays purely in shades of black, white, and grey.

Monochrome is useful for visitors who are fully colour blind (achromatopsia) and for whom colour-coded information on the page has no meaning. It is also used by some visitors with light sensitivity who find that removing colour reduces visual complexity and discomfort.

Note

If your site uses colour alone to convey important information (such as red for errors or green for success), visitors using monochrome mode will not be able to distinguish those states by colour. This is a WCAG failure at the source — the information should always be conveyed by means other than colour as well (such as an icon or text label). The monochrome mode exposes this issue; it does not cause it.

Mutual exclusivity

Only one contrast mode can be active at a time. The modes are:

  • Dark contrast
  • Light contrast
  • High contrast
  • High saturation
  • Low saturation
  • Monochrome

Activating any one of these deactivates any other that was previously active. This prevents conflicting styles from being applied simultaneously.

Colour and contrast modes work alongside content adjustments — for example, a visitor can have high contrast active while also having font size increased and readable font enabled.

Can site owners disable these tools?

Every colour and contrast mode can be individually enabled or disabled from AccessYes → Features in the WordPress admin. Removing a mode hides it from the widget panel for all visitors.

Important

The contrast modes are among the most used tools in the widget. Disabling them reduces support for visitors with visual impairments. Only do so if there is a genuine technical conflict on your site.