How to Inspect and Debug CSS inverted-colors Media Queries in Safari Web Inspector

Modern operating systems—such as macOS and iOS—provide system-wide accessibility features that invert screen colours (both Classic Invert and Smart Invert) to aid users with photophobia, severe visual impairments, or contrast sensitivity. However, when an operating system inverts colours globally, media content such as photographs, video streams, canvas elements, and colour-critical diagrams can become distorted or unrecognisable. To solve this, the CSS Media Queries Level 5 specification introduces the inverted-colors media feature. WebKit in Safari provides robust support for detecting inverted displays and offers built-in simulation tools within Safari Web Inspector, enabling web engineers to preview, audit, and debug inverted colour adaptations without toggling system-wide accessibility preferences.

Understanding the CSS inverted-colors Media Feature

The inverted-colors media feature detects whether the user agent or underlying operating system is applying colour inversion to the rendering surface. It accepts two primary evaluated states:

• none: The display is rendering colours normally without hardware or software colour inversion.
• inverted: All display pixels or target areas have been inverted, meaning black renders as white, blue renders as orange, and photographs suffer from photographic negative effects unless counter-inverted.

By leveraging @media (inverted-colors: inverted), developers can selectively apply CSS transformations—such as re-inverting images and videos—so that when the operating system inverts the screen, media assets invert a second time and appear in their natural photographic colours.

Writing Resilient CSS Counter-Inversion Rules

To prevent media assets from rendering as negatives when display inversion is active, apply a counter-inversion filter to photographic elements:

/* Natural rendering for non-inverted displays */
img, picture, video, canvas {
    transition: filter 0.3s ease;
}

/* Counter-invert visual media when display inversion is active */
@media (inverted-colors: inverted) {
    img:not([src$=".svg"]), 
    picture, 
    video, 
    canvas, 
    .keep-original-color {
        filter: invert(100%) hue-rotate(180deg);
    }

    /* Preserve shadows and high-contrast borders */
    .card-container {
        box-shadow: none;
        border: 1px solid currentColor;
    }
}

Applying hue-rotate(180deg) alongside invert(100%) restores the original hue angles of images, ensuring skin tones, skies, and natural palettes render realistically under OS-level inversion.

Enabling Safari Web Inspector for Accessibility Auditing

To inspect and simulate CSS media queries in Safari, ensure the Web Inspector developer tools are enabled on macOS:

• Open Safari on macOS.
• Navigate to Safari > Settings > Advanced.
• Tick the checkbox labelled Show features for web developers (or Show Develop menu in menu bar).
• Open your target website, right-click any element, and choose Inspect Element to launch Web Inspector.

Simulating Inverted Colours via Device Emulation and Console

Safari Web Inspector allows developers to force and evaluate media query overrides directly from the browser runtime.

To simulate inverted colours using the Web Inspector Console:

// Test matchMedia evaluation in Safari Console
const mediaQuery = window.matchMedia('(inverted-colors: inverted)');
console.log('Inverted Colors Active:', mediaQuery.matches);

// Listen dynamically to state changes
mediaQuery.addEventListener('change', (e) => {
    console.log('Display inversion status changed to:', e.matches ? 'inverted' : 'none');
});

To simulate OS-level Smart Invert or Classic Invert without altering entire desktop displays:

• In Web Inspector, navigate to the Elements tab.
• Select the target container or root <html> element.
• In the Styles sidebar, add a temporary simulation rule to observe filter stacking:

  html.simulate-invert {
      filter: invert(100%);
  }

• Observe how child media selectors configured with filter: invert(100%) hue-rotate(180deg) visually neutralise the root inversion.

Testing Native Inversion with macOS Accessibility Shortcuts

To verify that WebKit accurately detects live operating system signals, test against native macOS accessibility inversion:

• Navigate to System Settings > Accessibility > Display.
• Locate the Invert colours toggle.
• Choose between Classic Invert (inverts all colours uniformly) or Smart Invert (reverses display colours except for images, media, and apps with dark UI).
• Alternatively, enable the keyboard shortcut via Accessibility > Shortcuts (typically Control + Option + Command + 8) to toggle screen inversion instantly.

With Safari active, observe how the DOM dynamically recalculates styles within @media (inverted-colors: inverted) blocks instantly without requiring a page reload.

Auditing Computed Styles in the Styles Sidebar

When display inversion triggers, inspect the computed cascade within Safari Web Inspector:

• Select an <img> element in the DOM tree.
• In the Computed panel of the right sidebar, search for the filter property.
• Confirm that the filter rule resolves to invert(1) hue-rotate(180deg) rather than being overridden by utility classes or CSS resets.
• Ensure that text elements, background gradients, and navigation bars retain sufficient contrast ratios under inverted rendering.

By pairing Safari Web Inspector with the CSS inverted-colors media query, web developers can deliver accessible, high-fidelity browsing experiences that respect user visual preferences across all Apple devices.