Why it matters
Forced colours mode, known on Windows as contrast themes and before that as high contrast mode, replaces every colour on the page with a small palette the user picked. People with low vision and some with migraines or dyslexia rely on it. It's good at keeping text readable, but it removes box shadows and background gradients and paints every background the same, so anything that relies on them can vanish: focus rings drawn with box-shadow, icons drawn with CSS masks, buttons that only had a background colour, and selected tabs that only changed colour.
This previewer renders your HTML and CSS in a sandboxed frame twice, once as written and once with a stylesheet that applies the forced colours rules from the CSS Color Adjust specification, using the classic Windows High Contrast palettes or your browser's own system colours. Alongside, a pass over your CSS lists the patterns that usually break and writes the @media (forced-colors: active) rules to fix them. It's a close simulation; confirm in Windows or with DevTools' forced-colors emulation.
How to use it
- Paste a component's HTML and CSS.
- Compare the two previews and pick a theme.
- Read the problem list: focus and icon problems first.
- Copy the forced-colors CSS and test the result in a real contrast theme.
FAQ
How do I test forced colours for real?
On Windows, open Settings, Accessibility, Contrast themes. In Chrome or Edge DevTools, open Rendering and set Emulate CSS media feature forced-colors to active.
Why use a transparent border?
In forced colours every border is painted in the text colour, even a transparent one. A 1px transparent border is invisible normally and gives buttons and cards an edge in forced colours.
Should I use forced-color-adjust: none?
Only where colour is the content, such as a colour swatch or a chart key. Elsewhere it overrides the colours the visitor chose.
Is my code sent anywhere?
No. The preview runs in a sandboxed frame in your browser.
