High Contrast Mode

High contrast mode is an accessibility feature available in operating systems and browsers that overrides the default colors of applications and websites with a high-contrast color scheme. The feature is designed for users with low vision, light sensitivity, or other visual conditions that make standard color combinations difficult to perceive. In Windows, this feature is known as Contrast Themes (previously High Contrast Mode). It allows users to choose from preset themes (such as Desert, Dusk, Night Sky, and Aquatic) or create a custom theme with their preferred colors for text, backgrounds, links, buttons, and selected content. When activated, the system forces these colors across all applications and web content, overriding developer-specified styles. On macOS, the equivalent features are Increase Contrast (which enhances the contrast of existing colors) and the inverted color options (Classic Invert and Smart Invert). iOS and Android offer similar contrast enhancement settings. In web browsers, high contrast mode is exposed to developers through the CSS `forced-colors` media query. When `forced-colors: active` is true, the browser is operating in a mode where the user's color preferences override author styles. Developers can use this media query to adjust their designs for high contrast environments. The key behavior of high contrast mode is that it replaces most author-defined colors with the user's preferred colors. Background colors, text colors, and border colors are overridden. However, some visual elements, particularly those using images (including CSS background images), may not be adjusted, which can create problems if those elements convey important information.

High contrast mode is used by a meaningful percentage of computer users, and its use extends beyond the low-vision community. **Low-vision users.** People with conditions such as macular degeneration, glaucoma, cataracts, and diabetic retinopathy often need higher contrast than standard designs provide. Even websites that meet WCAG's minimum contrast ratios (4.5:1 for normal text) may not provide sufficient contrast for these users. High contrast mode lets them set their own contrast preferences. **Light sensitivity.** Some users have conditions like photophobia or migraine disorders where bright screens cause pain. Dark high-contrast themes provide a more comfortable viewing experience by reducing overall brightness while maintaining readability. **Cognitive benefits.** Some users with cognitive or attention-related disabilities find that simplified, high-contrast color schemes reduce visual clutter and make content easier to focus on. **Testing indicator.** High contrast mode serves as a useful testing tool for developers. Websites that break in high contrast mode often have underlying accessibility issues, such as relying on color alone to convey information or using background images for essential content. Testing in high contrast mode reveals these problems. **Growing usage.** With Windows making contrast themes more prominent and customizable and dark mode becoming mainstream, more users are familiar with and willing to customize their color preferences. Supporting these preferences is increasingly expected.

Supporting high contrast mode requires understanding what the browser changes and how to adapt: **What gets overridden.** In forced-colors mode, the browser replaces most CSS color values with the user's preferred colors. This includes `color`, `background-color`, `border-color`, `outline-color`, `column-rule-color`, and the colors of text decorations, scrollbars, and form control borders. The user's color scheme is defined by system color keywords like `Canvas` (background), `CanvasText` (text), `LinkText` (links), `ButtonFace`, and `ButtonText`. **What does not get overridden.** Background images, including CSS `background-image`, are typically removed in forced-colors mode. SVGs embedded as images may be affected differently depending on the browser. Box shadows are also removed. Notably, the CSS `forced-color-adjust: none` property can exempt specific elements from color overrides, but this should be used sparingly and only when the author's colors are essential (such as in a color picker or a data visualization with its own high-contrast mode). **Common problems.** Several issues commonly arise in high contrast mode. Icon buttons that rely on CSS background images for their icons become invisible. Status indicators that use only background color (green for success, red for error) disappear. Custom focus indicators that use box-shadow instead of outline vanish, since box-shadows are removed. Text that matches its background color to create a "hidden" visual effect becomes visible. Borders that were invisible (matching the background) suddenly appear. **Using the forced-colors media query.** Developers can detect forced-colors mode and apply specific styles: ```css @media (forced-colors: active) { .icon-button { forced-color-adjust: none; } .status-indicator { border: 2px solid currentColor; } } ``` This media query allows targeted adjustments without affecting the normal appearance. **Best practices.** Use real text instead of images of text whenever possible. For icons, prefer inline SVGs that inherit `currentColor` rather than CSS background images, as inline SVGs adapt to the user's text color. Use semantic HTML borders and outlines rather than box-shadows for important visual boundaries. Do not rely solely on color to convey information (this is already required by WCAG 1.4.1). Ensure focus indicators use `outline` rather than `box-shadow`, as outlines are preserved in forced-colors mode. Test interactive element states (hover, focus, active, disabled) to ensure they remain visually distinguishable. **Testing.** On Windows, activate a Contrast Theme and browse your site. Check that all text is readable, all interactive elements are identifiable, icons and images are visible or have text alternatives, focus indicators are visible, and status indicators and error states are distinguishable. On macOS, enable Increase Contrast in System Preferences > Accessibility > Display. Also test with the `forced-colors: active` emulation in Chrome DevTools (Rendering panel).