CSS: Improve Accessibility by Respecting Users’ Contrast Preferences with prefers-contrast

Web accessibility goes beyond adding alt text or managing keyboard focus. It also includes readability, a crucial factor for many users. One often overlooked tool in this area is the CSS media query prefers-contrast. It allows you to dynamically adapt a website’s appearance to the contrast preferences set in the user’s system settings.

1. Understanding prefers-contrast

The prefers-contrast media query is designed to better support users with visual impairments, or those simply seeking improved readability. When someone enables a high contrast mode in their operating system, this media query allows developers to apply alternate styles better suited to that environment.

Rather than redesigning the entire interface, prefers-contrast lets you make targeted adjustments that enhance legibility while preserving the overall visual identity of your site.

2. Applying it to native elements

Here are a few practical examples of how to improve user experience in a high-contrast context:

You can target placeholders and disabled elements ([disabled]). These types of content are often rendered in very pale colors by default, making them hard to read for many users. By reinforcing their color using a dark semi-transparent tone, you can significantly improve their visibility.

@media (prefers-contrast: more) {
    ::placeholder {
        color: rgba(16, 16, 16, 0.8);
        opacity: 1;
    }
    
    [disabled] {
        color: rgba(16, 16, 16, 0.8);
    }
}

Removing the text shadow on selected text (::selection) is another subtle but effective improvement. Some browsers apply a drop shadow to selected text, which can reduce clarity, especially on colored backgrounds. Disabling that shadow results in a crisper contrast between the selected text and its background.

@media (prefers-contrast: more) {
    ::selection {
        text-shadow: none;
    }
}

Finally, typographically subtle elements such as italicized text (em, i) or small-sized text (small) can easily become unreadable in high-contrast environments. By applying a heavier font weight (font-weight: bold), you ensure their readability without compromising their semantic meaning.

@media (prefers-contrast: more) {
    em,
    i,
    small {
        font-weight: bold;
    }
}

3. Why is this a best practice?

Adapting your site to users' contrast preferences means acknowledging the diversity of browsing conditions. Some users enable high contrast mode out of necessity—due to visual impairments, eye strain, challenging lighting conditions (like bright sunlight), or simply for personal comfort. By supporting prefers-contrast, you're sending a strong message: your site cares about all users, including those who don’t fit into standard design assumptions.

It’s also an elegant way to address shortcomings in default browser styles without resorting to heavy-handed hacks. These adjustments may seem minor, but they can have a real impact on usability.

Using prefers-contrast is part of a broader inclusive design approach. It’s a small, low-cost enhancement that can make a significant difference for some visitors. Prioritizing accessibility means building interfaces that are more robust, higher quality, and more sustainable over time.