How to Inspect CSS forced-color-adjust and High Contrast Modes in Safari Web Inspector

Accessibility standards mandate that web applications remain completely legible for users with low vision or colour vision deficiencies. Operating systems provide high-contrast and forced-colour modes that override author-defined backgrounds, text colours, and borders with a standardized, user-selected high-contrast palette. However, in complex interfaces containing status badges, syntax highlighters, or brand assets, total colour overrides can render critical information invisible. The CSS forced-color-adjust property allows developers to selectively preserve essential component styling. Safari Web Inspector provides specialized accessibility tools to audit forced-colour compliance across Apple platforms.

Understanding forced-color-adjust Directives

The forced-color-adjust property controls whether the browser engine is allowed to override colours inside high-contrast modes:

• auto: The default setting. The browser automatically substitutes background, text, and border colours with the user’s high-contrast system theme.
• none: Opts the selected element out of forced colour replacement, preserving author-defined colours. This should be reserved strictly for visual elements where colour is the fundamental carrier of meaning (such as colour pickers or syntax tokens).

Preserving Visual Semantics in Status Badges

When authoring status indicators, pair forced-color-adjust: none with explicit high-contrast system colours:

/* Status badge preserving semantic indicators */
.status-badge-live {
    background-color: #0d6efd;
    color: #ffffff;
    border: 1px solid transparent;
}

@media (forced-colors: active) {
    .status-badge-live {
        /* Preserve brand styling where critical */
        forced-color-adjust: none;
        background-color: #0056b3;
        color: #ffffff;
        border-color: ButtonBorder; /* Leverage standard system keywords */
    }
}

Inspecting Forced Colours in Safari Web Inspector

To simulate and audit high-contrast modes using Safari Web Inspector on macOS:

1. Open Safari and navigate to your website.
2. Right-click any UI component and select Inspect Element.
3. In the Elements panel, locate the Accessibility sidebar tab.
4. Under the Emulate Media Features controls, toggle the high-contrast simulation button to emulate forced-colors: active.
5. Examine the rendered canvas. Verify that text elements adapt to system contrast without losing readability, and ensure that borders remain crisp against dark or light high-contrast themes.
6. Select elements with forced-color-adjust: none to confirm that their essential styling remains intact without obscuring surrounding text.

Testing System Contrast Preferences on macOS

To verify real-world rendering under native macOS accessibility controls:

• Open macOS System Settings > Accessibility > Display.
• Enable Increase contrast and observe how Safari renders borders and interactive outlines.
• Ensure that interactive links and buttons maintain an accessible outline or border in forced-colour modes, guaranteeing intuitive keyboard navigation.