• ** Daily Tips **
• December 15, 2025

Forced Colors Mode is an accessibility feature that, as my friend Ben Myers explains…

replaces websites’ colors (backgrounds, borders, text, focus outlines, and more) with a significantly reduced color palette, sometimes comprised of user-selected colors. Forced colors mode also makes changes which simplify an interface’s appearance…

Today, I wanted to talk briefly about what is, how it affects designs, and how to build for it. Let’s dig in!

Bye bye backgrounds

I first learned about forced colors mode when someone Michael Matthews opened a very helpful ticket up about on Kelp UI.

Kelp’s tabs component uses background color to show which tab is currently selected. Forced colors mode strips those colors out, making it impossible to tell which tab is currently active.

This also affected radio buttons, toggle switches, how well dialog modals standout from the background, and more.

Fortunately, this is relatively easy to address, once you know about it.

Windows-only

One of the reasons this had completely flown under my radar is because it is still mostly a Windows-only feature.

macOS has an Increase Contrast accessibility setting that does not seem to pass information along to the browser. Firefox has a specific setting for it.

In Chromium, you can emulate it by opening up developer tools, opening up the command palette (Command+Shift+P in macOS), and typing forced colors, which surfaces some options.

Even though enabling forced colors mode is OS-specific, targeting it with CSS is widely supported cross-browser.

CSS and forced colors mode

In Kelp’s CSS, I added media queries for forced-colors: active to detect forced colors mode in various places and update styles…

@media (forced-colors: active) {
/* high-contrast styles... */
}

The easiest fix in many situations is to use really beefy borders for things that should stand out.

For example, I give my dialog modals a really thick border so that they standout better from the background, since the ::backdrop doesn’t show up in forced colors mode.

@media (forced-colors: active) {
dialog {
border-width: 0.5em;
}
}

I do something similar for the currently active tab.

@media (forced-colors: active) {
kelp-tabs [role="tab"][aria-selected="true"] {
border-width: 0.5em;
}
}

Remember that toggle switch we built last week? It requires a slightly different approach.

For that one, the background color is what makes it look like a switch. There’s no way around that!

But my friend Stephanie Eckles found a neat trick: in forced colors mode, background color will show up if you give it a value of CanvasText, which maps to the current text color.

For our toggle switch, we can use that provide a border and background and ensure our switch is still clearly visible and it’s state is apparent.

@media (forced-colors: active) {
[role="switch"] {
border: 1px solid CanvasText;
}

[role="switch"]:checked {
background-color: CanvasText;
}
}

Ugly and obvious

The most important thing to keep in mind when designing for forced colors mode is that making things obvious is the most important consideration.

This browsing mode is often used by people who are not blind but do have vision issues, people who suffer migraines from lots of color, and so on.

In forced colors mode, your design preferences no longer matter.

Your site almost certainly will look ugly, or at least different from how you’d like it, and that’s ok. That’s the point. It’s not about you!

This is an instance where letting go and ceding control to the user is particularly important.