# Fixes for Windows High Contrast (Forced Colors) Mode

> Makes buttons, focus outlines, icons and custom checkboxes stay visible when visitors use Windows High Contrast or another forced-colors mode, where many themes lose borders and icons.

- Type: CSS
- Runs: Site-wide header
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: high-contrast, css, windows
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-forced-colors-fixes/

## Code

```css
@media (forced-colors: active) {
    button,
    .button,
    .wp-block-button__link,
    .wp-element-button,
    input[type="submit"] {
        border: 2px solid ButtonText !important;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px;
    }

    svg {
        forced-color-adjust: auto;
        fill: currentColor;
    }

    .screen-reader-text:focus,
    .skip-link:focus {
        border: 2px solid CanvasText;
    }
}
```

## Notes

Only applies when the visitor's system forces its own colors; nobody else sees a difference.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Fixes for Windows High Contrast (Forced Colors) Mode" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/