How to Inspect CSS @media (prefers-contrast) in Safari Web Inspector

Web accessibility compliance (WCAG 2.2) mandates that text and interactive controls maintain rigorous contrast ratios to assist users with low vision, visual fatigue, or light sensitivity. Operating systems—such as macOS and iOS—provide native system accessibility settings allowing users to request increased or decreased interface contrast. The CSS prefers-contrast media feature allows web applications to detect this preference and dynamically strengthen border outlines, increase font weights, and adjust background-to-text contrast ratios. Safari Web Inspector provides specialized media feature simulation controls to audit contrast variations live.

Understanding prefers-contrast Values

The prefers-contrast media feature evaluates user system preferences:

• no-preference: The user has not requested any contrast alteration (default state).
• more: The user has enabled "Increase contrast" in macOS or iOS accessibility settings. Text, borders, and focus rings should be made significantly more prominent.
• less: The user prefers reduced contrast to minimize eye strain or light sensitivity.
• custom: The user is using forced-colour accessibility palettes (such as high-contrast themes).

Configuring Accessible High-Contrast CSS Styles

Author clean stylesheets that adapt contrast ratios gracefully:

/* Standard card component */
.interactive-card {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    padding: 1.5rem;
    border-radius: 8px;
}

/* Enhanced contrast adaptations */
@media (prefers-contrast: more) {
    .interactive-card {
        background-color: #ffffff;
        color: #000000;
        border: 2px solid #000000; /* Crisp solid border */
        box-shadow: none; /* Discard subtle drop shadows */
    }
    
    .interactive-card a {
        text-decoration: underline; /* Ensure links are unmistakable */
        font-weight: 700;
    }
}

Inspecting Contrast Adaptations in Safari Web Inspector

To inspect and audit prefers-contrast live using Safari Web Inspector on macOS:

1. Open Safari and navigate to your website.
2. Right-click the card or navigation bar and select Inspect Element.
3. In the Elements panel, inspect the Styles sidebar. Safari highlights the active media query blocks.
4. Locate the Emulate Media Features toolbar icon (the paintbrush icon) in Web Inspector.
5. Find the Prefers Contrast dropdown and toggle between no-preference, more, and less.
6. Observe how Safari immediately applies the high-contrast styles on the canvas without reloading the page.
7. Use Safari’s integrated Color Picker to inspect the contrast ratio tooltip, confirming that text-to-background contrast exceeds the WCAG AAA threshold of 7:1.

Validating macOS System Integration

To test end-to-end OS integration: open macOS System Settings > Accessibility > Display, toggle Increase contrast, and verify that Safari adopts the high-contrast presentation automatically across the entire browser window.