How to Inspect CSS @media (inverted-colors) in Safari Web Inspector

For users with visual impairments, macular degeneration, or extreme photophobia, operating systems—including macOS and iOS—provide native display inversion options ("Invert Colors" and "Smart Invert"). Standard system-wide colour inversion mathematically negates all display pixels: turning light backgrounds dark, but inadvertently converting full-colour photographs, diagrams, and video playback into unrecognisable photographic negatives. The CSS inverted-colors media feature enables web applications to detect when the operating system has inverted display colours. By applying targeted counter-filters, developers can restore natural colours to images and video media in Safari Web Inspector.

Understanding inverted-colors Values

The inverted-colors media feature evaluates operating system display states:

• none: Display colours are rendered normally (default state).
• inverted: The operating system has inverted all display pixels. Graphics, photos, and video elements appear inverted unless specifically counter-adjusted.

Configuring Double-Inversion Safeguards for Media

Author clean styles that automatically counteract hardware color inversion on raster imagery and videos:

/* Preserve natural color balance when system colors are inverted */
@media (inverted-colors: inverted) {
    /* Counter-invert photos, videos, and embedded canvases */
    img, video, canvas, iframe {
        filter: invert(100%) hue-rotate(180deg);
    }

    /* Prevent counter-inverting SVGs that are pure monochrome icons */
    svg.icon-monochrome {
        filter: none;
    }
}

Applying filter: invert(100%) hue-rotate(180deg) negates the operating system’s inversion, restoring natural skin tones and photographic colors on the physical display.

Inspecting Inverted Colors in Safari Web Inspector

To inspect and audit inverted-colors adaptations live using Safari Web Inspector on macOS:

1. Open Safari and navigate to your website.
2. Right-click an image or video element and select Inspect Element.
3. In the Elements panel, inspect the Styles sidebar. Safari displays the active media query blocks.
4. Locate the Emulate Media Features toolbar icon (the paintbrush icon) in Web Inspector.
5. Find the Inverted Colors dropdown and select inverted.
6. Observe how Safari applies the counter-filter to images and videos on the canvas, demonstrating how natural color reproduction is preserved for users with inverted displays.

Testing System Accessibility on macOS and iOS

To verify real-world hardware rendering:

• On macOS, open System Settings > Accessibility > Display, and toggle Invert colors (or press Command + Option + Control + 8).
• On iOS, open Settings > Accessibility > Display & Text Size, and toggle Classic Invert.
• Confirm that Safari renders photographs, charts, and video streams in true-to-life colors while keeping surrounding text and container backgrounds dark.