How to Inspect and Control CSS forced-color-adjust in Safari Web Inspector

Accessibility standards mandate that web applications remain readable and usable for individuals with visual impairments or photosensitivity. When users enable High Contrast Mode or forced colour accessibility features (such as Windows Contrast Themes or macOS Increase Contrast), the browser rendering engine automatically overrides author-defined styling—replacing backgrounds, text colours, borders, and button palettes with a restricted set of high-contrast system colours. However, indiscriminate colour replacement can inadvertently destroy visual context—such as erasing status badges (success/warning/error), obscuring syntax highlighting in code editors, or rendering multi-colored analytics charts unreadable. With the CSS forced-color-adjust property, developers can protect essential graphical elements from being stripped. Safari Web Inspector provides tools to test and inspect forced color adaptations in real time.

Understanding CSS forced-color-adjust and Forced Colors Mode

The forced-color-adjust property is part of the CSS Color Adjustment Module. When a user activates a system-level high contrast mode (detected via the @media (forced-colors: active) query):

• forced-color-adjust: auto (Default): The browser engine aggressively converts author colours (such as color, background-color, border-color, and outline-color) into standardized system colour tokens (e.g., Canvas, CanvasText, Highlight, ButtonText).
• forced-color-adjust: none: Explicitly exempts the target element and its children from forced colour overriding. The element retains its authored CSS colors, gradients, and backgrounds even while the rest of the webpage conforms to high contrast standards.
• Accessibility Best Practice: forced-color-adjust: none should be used sparingly and deliberately—strictly for elements where colour carries vital information (such as green/amber/red status indicators, interactive chart series, or syntax-highlighted code blocks) that would otherwise become indistinguishable.

Enabling Safari Web Inspector and Selecting the Element

To inspect accessibility styling in Safari on macOS:

1. Enable developer features via Safari > Settings > Advanced > Show features for web developers.
2. Navigate to the web application containing status chips, data visualizations, or custom widgets.
3. Right-click the target component and select Inspect Element.
4. In Web Inspector, locate the element in the Elements DOM tree.

Simulating Forced Colors and Contrast Media Features in Safari

Rather than continually toggling system-wide accessibility settings inside macOS System Settings, Safari Web Inspector allows developers to simulate contrast media features directly within the browser session:

1. In Web Inspector, switch to the Console or open the Elements tab.
2. In the top-right toolbar of Web Inspector, click the Media Feature Emulation icon (looks like a page with sliders).
3. Select prefers-contrast: more or activate forced-colors: active emulation.
4. Observe how Safari immediately applies high-contrast overrides across your page layout.

Inspecting forced-color-adjust Rules in the Styles Panel

With high-contrast emulation active, examine how components render in the Styles panel:

/* Example status badge preserving visual semantic state */
.status-pill.status-error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #f87171;
    forced-color-adjust: none; /* Preserves red warning background in high contrast */
}

/* Example syntax highlighting token */
.token-keyword {
    color: #7c3aed;
    forced-color-adjust: none;
}

Notice that without forced-color-adjust: none, an error badge and a success badge would both be converted to identical CanvasText black/white text on Canvas background, completely stripping away the semantic meaning of the status.

Pairing forced-color-adjust with High-Contrast Fallbacks

While forced-color-adjust: none retains authored colours, users who rely on high contrast themes still require sufficient visual distinction against custom backgrounds. Combine the property with the forced-colors: active media query to add high-contrast borders and outlines:

/* Accessible status pill styling across standard and forced color modes */
.status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-weight: 600;
}

@media (forced-colors: active) {
    .status-indicator {
        forced-color-adjust: none;
        /* Add explicit system-colored border to guarantee visibility against any custom theme */
        border: 2px solid ButtonText;
    }
}

In Safari Web Inspector, toggle the media feature emulator to verify that the element renders cleanly with distinct structural outlines.

Value	Browser Action in High Contrast	Appropriate Use Cases
auto	Overwrites element colors with system contrast tokens.	Body paragraphs, standard navigation links, modal backgrounds, input wrappers.
none	Preserves authored CSS colors, backgrounds, and borders.	Critical status pills, syntax highlighting, multi-series data charts, color swatches.

Auditing Contrast Accessibility in Safari Computed Styles

To verify that an element configured with forced-color-adjust: none meets minimum WCAG contrast standards:

1. In Web Inspector, switch to the Computed tab for the element.
2. Scroll to the Color and Background Color properties.
3. Click the color swatch to open the native Safari contrast checker.
4. Ensure the computed contrast ratio meets or exceeds 4.5:1 (Level AA) for regular body copy and 3:1 for large text and graphical components.

Utilising forced-color-adjust and auditing its presentation in Safari Web Inspector ensures web applications maintain critical visual semantics while fully respecting user accessibility preferences.