Supporting High Contrast Settings

Introduction

Some people with visual disabilities using the web need more than the required default minimum color contrast to perceive content. Operating systems provide settings that enable those users to increase contrast and choose alternate color themes. Web authors can ensure their content is accessible to those users by appropriately responding to such operating system settings. This section explains how to make components responsive to color and contrast settings and how to test support for those settings.

This section covers:

1. Operating system and user agent features that enable users to adjust rendered colors and contrast ratios.
2. Using the CSS media queries that support user color and contrast settings (prefers-contrast, prefers-color-scheme, and forced-colors).
3. Using <system-colors> CSS data types to provide consistent rendering of components.
4. Using the value of currentcolor to inherit the value of the color property value of text content that responds to user color and contrast settings.
5. The benefits of using SVG graphics when creating components that adapt to color contrast and theme settings.

User Options for Adjusting Colors and Contrast

The following table summarizes operating system settings that enable users to adjust color themes and increase contrast as well as authoring practices for supporting those settings in web content.

Invert Colors

The invert colors setting is a simple transformation that renders content to its opposite color. For example, content rendered as white is changed to black. Content styled as blue is rendered as a brown, i.e., a mixture of red and green. User agents do not provide a media query that can determine whether invert colors is enabled in the operating system.

To support invert colors effectively, ensure content meets WCAG 1.4.3: Contrast (Minimum).

The following example illustrates how a switch element is rendered on macOS both when invert colors is disabled and enabled.

Invert Colors Example: Button Switch

Setting	Screen Shot
Invert Colors: Off (default)
Invert Colors: on

Increase Contrast

Increase contrast is an operating system feature, typically available in accessibility settings, that enables users to specify a preference for contrast that is higher than default minimum. When the increase contrast setting is enabled, the prefers-contrast media query changes from no-preference to more. To support the increase contrast setting, change the rendering of text content and components to use a color scheme that meets or exceeds the requirements specified in WCAG 1.4.6: Contrast (Enhanced).

Note: Operating systems that support the forced-colors media query set prefers-contrast to custom when the forced-colors is set to active.

Increase Contrast Example

Enable the "increased contrast" feature on your device, and color contrast ratios in the below example will change:

• Text contrast increases from 12.8 to 18.1.
• Contrast of border and fill for the button increases from 4.6 to 12.2.

CSS Media Query Code

          
  @media (prefers-contrast: more) {

    button[role="switch"] {
      background-color: #eeeeee;
      color: #000;
    }

    button[role="switch"] .label {
      color: #000;
    }

    button[role="switch"] svg rect {
      fill: #0051A4;
      stroke: #061d3a;
    }

    button[role="switch"] svg circle.off,
    button[role="switch"] svg circle.on {
      stroke: #061d3a;
      fill: #fff;
    }
  }
          
        

Testing Increase Contrast

In each operating system used by the target audience:

1. Turn on the increase contrast feature, which is typically located in accessibility settings.
2. Verify that the color contrast ratios of text and components meets or exceeds the requirements specified by WCAG 1.4.6: Contrast (Enhanced).

Color Scheme (Light or Dark)

The color scheme known as dark mode is used by Many people in dark settings, e.g. at night, because it can make content easier to read or be less disruptive to other people. While such use cases were primary drivers of its development, dark mode also significantly improves accessibility for many people with visual impairments.

To support dark mode, develop styles for dark text on a light background and light text on a dark background and use a media query to apply the appropriate style. The CSS media query prefers-color-scheme identifies the current color scheme by returning light or dark. Ensure the text content and components of both color schemes meet or exceed the color contrast ratios specified by WCAG 1.4.3: Contrast (Minimum).

Color Scheme Example: Switch

The below example of a switch shows how colors can change when users switch color schemes. Enable "dark mode" on your device, and the example will be rendered with the dark color scheme.

CSS Media Query Code

          
@media (prefers-color-scheme: dark) {
  button.color-scheme[role="switch"] {
    background-color: #333;
    color: #fff;
  }

  button.color-scheme[role="switch"] .label {
    color: #fff;
  }

  button.color-scheme[role="switch"] svg rect {
    fill: #36c;
    stroke: #36c;
  }

  button.color-scheme[role="switch"] svg circle.off,
  button.color-scheme[role="switch"] svg circle.on {
    fill: #fff;
    stroke: #fff;
  }

  button.color-scheme[role="switch"]:focus,
  button.color-scheme[role="switch"]:hover {
    border-color: #add8e6;
  }
}
          
        

Color Scheme Example: Wikipedia Page

The following example illustrates how Wikipedia supports the color scheme media query. The example includes showing the "Appearance" sidebar allowing the user to choose the light or dark scheme and other rendering options for text size and column width.

Media Query	Screen Shot
prefers-color-scheme: light
prefers-color-scheme: dark

Testing Dark Color Scheme

In each operating system used by the target audience:

1. Turn on the dark color theme.
2. Verify contrast for text and components meet or exceed the contrast ratios specified by WCAG 1.4.2: Contrast (Minimum).

Contrast Themes (Forced Colors)

The forced-colors CSS media query provides a means for components to use the color preferences of people with visual impairments. When the user chooses a color theme in their operating system, browsers set the forced-colors property to active. CSS media queries can change component colors to use operating system specified values using <system-colors> CSS data types. The advantage of using forced-colors over currentcolor is the ability to set a background color and to uniquely define colors for borders, outlines and text content.

System Colors

The following table identifies the current system colors defined in CSS Color Module Level 4. System colors are supported in all major browsers, but the actual colors they render may vary between browsers and operating systems based on default and user theme and contrast settings.

System Color Example: Rating Slider

The Rating Slider Example uses CSS forced-colors: active media query to change the styling of SVG elements used for the rating scale, thumb and labels. The buttontext system color value is used for stroke and fill properties of the range and thumb elements and canvas system color is used for the label elements (e.g. "Extremely Unsatisfied" and "Extremely Satisfied"). The following table shows how the graphical rendering changes for some high contrast options.

The buttontext system color value was chosen so the interactive slider elements would match the colors of other standard form controls on the page. The canvas system color was chosen for the labels to match other static text on the page.

Rating Slider Example with Selected High Contrast User Settings

Operating System	Setting	Screen Shot
macOS 14.4	Invert Colors: Off (default)
macOS 14.4	Invert Colors: on
Windows 11	Contrast Theme: none (default)
Windows 11	Contrast Theme: Night sky
Windows 11	Contrast Theme: Desert

Examples in using forced-colors

• Feed
• Rating Radio Group

currentcolor Keyword

The currentcolor keyword provides a means for components to use the color value of ancestors to set the color properties of an element. When the user chooses a high contrast setting the browser changes the color and background-color values of text content. The currentcolor value is set to the text color for use in setting the color of other properties including: border and outline on HTML elements, and stroke and fill properties on SVG elements. Note: There is no equivalent value for using the background color, so when using this technique it is important for the background of the element to be transparent to allow the background color of the page to be visible.

Current Color Example: Switch

The Button Switch Example uses currentcolor value to style the SVG rect elements used as the switch container and to indicate the on and off states. Current color applied to the stroke and fill properties of the rect elements. The following table shows how the graphical rendering changes for some high contrast options.

Button Switch Example with Selected High Contrast User Settings in Windows 11

Setting	Screen Shot
Contrast Theme: none (default)
Contrast Theme: Night sky
Contrast Theme: Desert

Examples using currentcolor keyword

• Checkbox (Mixed-State)
• Disclosure (Show/Hide) for Answers to Frequently Asked Questions
• Radio Group Using aria-activedescendant
• Media Seek Slider
• Vertical Temperature Slider

SVG Graphics versus Bit-Mapped Images for Components

Limitations of Bit-Mapped Images

The colors of pixels used in bit-mapped images (e.g. .png, .jpeg) can respond to media queries by changing the actual image rendered or by applying a CSS filter to the image. Even when one or more of these techniques are used to respond to changes in contrast settings the resulting images may still be difficult or impossible for people with some types of visual impairments to see. Low resolution images also do not scale smoothly when the browser zoom features are used to increase the size of rendered content and the resulting distortion will make it more difficult or impossible for people to identify the component.

Note: Bit-mapped images used for components should meet WCAG 1.4.3: Contrast (Minimum) requirement.

Benefits of SVG Graphics

SVG graphics can respond to contrast related media queries including prefers-contrast, prefers-color-scheme and forced-colors to change the styling of components. SVG provides smooth scaling of the graphics as the size of components are adjusted using browser zoom features. SVG elements can also adapt to a wide variety of screen sizes and load faster due to their smaller size than equivalent bit-mapped images.

Note: Be sure to include forced-color-adjust=auto CSS property on SVG elements, due to inconsistencies in browsers setting the default value to auto.

Testing for Contrast Theme Support

High contrast testing requires setting operating system contrast features or using browser extensions or configuration to emulate high contrast.

Operating System High Contrast Settings

• Windows 10 and 11: Change color contrast in Windows
• macOS: Change Display settings for accessibility on Mac
• Linux GNOME: Adjust the contrast
• iPad: Make iPad text easier to read with accessibility features
• iPhone: Make iPhone text easier to read with accessibility features
• Android: Change text & display settings

Chrome High Contrast Options

The Chrome browser has Render options in the DOM Inspector to enable and disable contrast related media queries. Use the DOM Inspector Render Tab: Emulate and you can change the setting for prefers-color-scheme: dark and forced-colors: active.