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.
Opens WPIDE on
Code
@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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.