Support forced colors modes

Overview

People may use various display modes to use and understand web content better, like high contrast modes in Windows or reading modes in browsers. When the content or user interface is designed and developed using best practices like native HTML, the user experience should still be clear and usable.

However, certain design choices and custom features can hinder a site's ease of use in these display modes, and need extra consideration.

Best Practices and Tips

Let forced colors do its thing

The best way to ensure support forced colors/contrast modes is to use native HTML semantics, which tells forced colors mode how content should render. The goal is not to create entirely separate styles for forced colors:

High contrast mode is not about design anymore but strict usability. You should aim for highest readability, not color aesthetics.
— Kitty Giraudel tweet from June 20, 2017

Your job for WHCM [Windows High Contrast Mode] users is to respect their color choices and use them appropriately. Do not override the feature because you may find something ugly. Ugly and usable trumps pretty and unusable every time.

— Adrian Roselli

Instead, minor adjustments should be added for forced colors when:

custom features aren't using native or semantic HTML elements, or
key info about an interface isn't coming through.

Use more than color to show backgrounds or element states

Forced colors mode resets properties related to text, backgrounds, borders, outlines, gradients, and SVG fill/stroke. This means if color is used to indicate a link is being hovered/focused on, or provides a background color, those are removed so contrast and readability is set to the user's system settings.

Building designs to use more than color to convey meaning will ensure the content's still easy to use and understand. Specific examples for doing so are mentioned in the Pattern Examples section.

Avoid images of text where possible

Text that is presented in an image will not convert in a forced colors or specific contrast mode. This means someone who needs this mode to better read text may have difficulty reading or can't detect the text in the image, since it retains the original color scheme.

Using real text ensures your content works in a forced colors or contrast mode.

Examples/Patterns

Use borders to create visual or clickable boundaries

If the goal of the design is to remove borders through border: 0 or border: none, use border: [width] solid transparent in the element's base styling. This lets the element's visual shape still render in forced colors mode.

Example: Announcement blocks

A "need accessibility help" announcement in a non-forced colors mode:

A section on getting accessibility help is in a green rectangle, with an icon preceding in a blue box

Announcement in forced colors with border: 0 or border: none:

Accessibility help text is on a black background, with an icon floating next to it. The shape of the announcement has disappeared.

Announcement with border: [medium width] solid transparent:

A white border surrounds the need accessibility help announcement, with a line separating the message from the icon

Use more than color to indicate hover/focus/active states

By default a link on hover may have a background color or gradient:

two links on a page, with one on hover showing blue text on a lighter blue background

Because background colors are set to user preference, the hover color no longer appears on the second link in forced colors mode:

The same links in a light forced colors mode. The link on hover looks identical to the default link, now purple text on a white background

Using additional outline techniques, like a border, will ensure the user can still tell what's being hovered or focused on, or which control is actively being chosen:

The link on hover in forced colors mode now has a purple outline to show its hover state, compared to the link not on over

Check SVGs for low contrast

Depending on the styling, some SVGs may not convert properly, which can be unreadable in forced colors mode. Due to a bug with using CurrentColor in forced colors, the current fix is to style the SVGs in forced colors using system colors based on their purpose.

Example: Western social media

Social media links with a Western blue fill causes icons to not work with a user's dark scheme:

Five social media icon SVGs are dark blue and nearly vanish into the black forced colors background

Social media links now styled for forced colors mode (since links wrap the SVGs, we give them the LinkText keyword so they appear as links):

/* ...other CSS...*/

  svg {
    fill: #003f87; // Western blue
  }
  @media (forced-colors: active) {
    svg {
      fill: LinkText; // match user's chosen 
                       link text color
    }
  }