Forced-Colors Mode Tester

forced-colors is a CSS media feature that detects when the user has enabled a forced color scheme on their operating system — most commonly Windows High Contrast Mode. When forced-colors: active, the browser aggressively overrides author-defined colors with system-defined colors (like Canvas, CanvasText, LinkText, etc.) to ensure readability for users with visual impairments. This affects background colors, text colors, borders, box-shadows, and even SVG fills.

When Windows High Contrast Mode is active: background images are removed, box-shadows and text-shadows disappear, all colors are replaced with system-defined equivalents, borders become the main visual separator, and links are rendered in a distinct forced color (commonly yellow on black backgrounds or blue on white backgrounds). Semantic HTML elements like <button>, <input>, and <a> automatically receive appropriate system colors, but custom-styled <div>-based buttons may not adapt correctly.

CSS defines 17 system color keywords that map to the user's operating system color preferences. Key ones include: Canvas (page background), CanvasText (page text), LinkText (unvisited links), ButtonFace (button backgrounds), ButtonText (button text), Field (input backgrounds), Highlight (selection background), GrayText (disabled text), and Mark (highlighted text background). Using these keywords in your CSS helps your site adapt gracefully to forced-colors mode without extra effort. View the reference table above for a complete mapping.

forced-color-adjust: none tells the browser not to override colors on a specific element (or its subtree). Use it sparingly — only for elements that must retain their original colors to be functional, such as: brand logos, color-coded data visualizations, product swatches, or photo galleries.

Example: .brand-logo { forced-color-adjust: none; } — this preserves your logo's exact brand color even in high contrast mode. The default value is auto, which allows the browser to adjust colors. There's also preserve-parent-color for inheriting the parent's forced-color adjustment state.

prefers-contrast detects the user's contrast preference (high, low, or no-preference) and can be used to proactively enhance contrast. forced-colors detects when the OS is forcefully overriding all colors. They often overlap — if forced-colors: active is true, prefers-contrast: high is also typically true. However, prefers-contrast: high can be set independently (e.g., on macOS via Accessibility settings) without forced-colors being active. Use prefers-contrast to voluntarily increase contrast; use forced-colors to detect when the OS takes full control.

Option 1: Use this tool! Our simulation panel gives you a close approximation of how forced-colors affects UI components.
Option 2: In Chrome DevTools, press Ctrl+Shift+P (or Cmd+Shift+P on Mac), type "Rendering", and in the Rendering panel, under "Emulate CSS media feature forced-colors", select forced-colors: active.
Option 3: On Windows 10/11, go to Settings → Accessibility → High Contrast and toggle it on temporarily.
Option 4: Use Firefox's built-in forced-colors emulation in the Accessibility panel.

The browser overrides: color, background-color, border-color, outline-color, text-decoration-color, text-shadow, box-shadow, caret-color, column-rule-color, and scrollbar-color (in Firefox). Background images are also removed. SVG fill and stroke may be adjusted. Properties like opacity, transform, display, position, and layout-related properties remain unaffected.

If you build buttons using <div> or <span> elements with custom CSS (instead of semantic <button> elements), the browser may not recognize them as buttons and won't apply ButtonFace/ButtonText system colors. Always use semantic HTML: <button>, <a>, <input>, <select>. If you must use a <div>, add role="button" and ensure proper system color keywords are used in your CSS.

No. forced-colors media queries only apply to screen rendering when the OS-level high contrast setting is active. Print stylesheets use the @media print query and are unaffected by forced-colors mode. However, if your print styles rely on the same system color keywords, they will render with the printer's default color handling (which is typically not high contrast).

No, they are completely different. Dark mode (prefers-color-scheme: dark) is a user preference for a dark color scheme that still respects author styles. Forced-colors mode is an accessibility override where the OS takes full control of colors, replacing them with a strict limited palette (usually black/white + 1 accent color). Dark mode still allows rich color palettes; forced-colors flattens everything to maximum contrast.