CSS Media Queries and Accessibility: The Complete Guide for an Inclusive Web

Web accessibility is often seen as a technical chore. We tend to think it is only about complying with laws like the EAA 2025. In reality, accessibility is a mark of quality. An accessible site is better built and faster for everyone.

In 2026, we have precision tools to help users: Preference Media Queries. These lines of code detect settings chosen by users on their phones or computers. The site can then change its look automatically.

In this guide, we will explore 7 essential media queries. We will learn how to code for maximum performance while remaining compatible with all browsers.

#A Golden Rule: Progressive Enhancement

Before coding, you must understand an important rule. Do not build a heavy site and then try to “fix” it for people with disabilities. Do the opposite.

Use the Progressive Enhancement logic:

1. First, create a simple, static, and easy-to-read base. This is the version for everyone.
2. Add animations or visual effects only if the user has not requested restrictions.

To achieve this, we often use the no-preference value.

#1. prefers-reduced-motion: mastering movement

Some people experience dizziness or nausea when there is too much movement on the screen. These are called vestibular disorders. About 35% of adults over 40 are affected by these disorders, according to a study published by the National Institutes of Health.

Unfortunately, since support is currently limited on some browsers, we cannot condition everything via this media query. If a browser does not support it, no style will be applied. To avoid this, we define a static base and then add the animation inside the media query block. We will therefore have two contradictory orders when the value is “no-preference,” but that is the price of compatibility.

The high-performance method:

Copy/* Static and lightweight base for everyone */
.my-title {
  transform: none;
}

/* Animation is only enabled if the user accepts movement */
@media (prefers-reduced-motion: no-preference) {
  .my-title {
    animation: 1s slide-in forwards;
  }
  
  :root {
    scroll-behavior: smooth;
  }
}

#2. prefers-color-scheme: native dark mode

This is likely the most well-known media query. It detects whether the user has chosen a light or dark theme in their device settings.

Using prefers-color-scheme is essential for visual comfort. It is also a gesture for the planet: on modern (OLED) screens, displaying black consumes less energy.

Optimize with light-dark()

To go further and simplify your code, you can combine this query with the new light-dark() function. It allows you to manage two colors in a single line of code.

To understand how to use it and boost your rendering performance, read my complete guide on the light-dark() function and eco-design.

#3. prefers-contrast: visual clarity

Not everyone perceives contrasts the same way. With age or certain vision conditions (like cataracts), light gray text on a white background becomes unreadable.

Implementation:

Copy.my-card {
  border: 1px solid #ccc;
}

@media (prefers-contrast: more) {
  .my-card {
    border: 2px solid #000; /* Thicker, black border */
    box-shadow: none;       /* Remove shadows that blur vision */
  }
}

#4. forced-colors: visual survival mode

On Windows, “High Contrast” mode replaces your colors with a palette chosen by the system. In this case, your background colors disappear. You must ensure that your elements remain visible through their borders.

It is useless to fight against this mode. You must embrace it by using system color keywords.

Copy@media (forced-colors: active) {
  .action-button {
    /* Force a border that adapts to system colors */
    outline: 2px solid ButtonText;
    border: 1px solid ButtonText;
  }
}

To see all available codes, check the system colors list on MDN. This guarantees that your buttons will never be invisible.

#5. inverted-colors: respecting system inversion

Some visually impaired users invert all their screen colors to read better (white becomes black, blue becomes orange). The problem is that your photos also become unreadable “negatives.” The inverted-colors query allows you to fix this.

Copy@media (inverted-colors: inverted) {
  img, video {
    /* Re-invert images to make them look natural again */
    filter: invert(100%);
  }
}

#6. prefers-reduced-transparency: avoiding visual fatigue

Blur effects (Glassmorphism) are pretty but tire the brains of people with attention disorders or reading difficulties. Text becomes blurry on a transparent background.

Since Firefox does not yet handle this option, we use the same logic as for movement: a solid base style, and the visual effect added only for those without restrictions.

Copy/* Base: solid, opaque background for easy reading */
.nav-menu {
  background: #ffffff;
}

/* Visual effect added only if the user has no restriction */
@media (prefers-reduced-transparency: no-preference) {
  .nav-menu {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
  }
}

#7. The speech media query: the web for ears

Accessibility is also for those who listen to the web. Blind users use software that reads the site aloud. The speech query allows you to adapt the text specifically for these tools.

Copy@media speech {
  .decorative-spacer, .ads-banner {
    display: none;
  }
}

#Performance and SEO: why code this way?

Using these techniques is not just an ethical act. It is a software quality strategy:

1. Zero JavaScript: CSS is handled natively by the browser, which is much faster than detection scripts.
2. LCP Score: Rendering is more stable because media queries are resolved instantly during CSS parsing.
3. Technical SEO: Google favors sites that respect web standards and provide a smooth experience for all user profiles.

#Conclusion: a more human web

Learning accessibility media queries is the mark of an expert developer in 2026. It’s not just extra code; it’s better-thought-out code. An accessible site is a universal site, performant and ready for the future.

Inclusion is the ultimate form of optimization.

Frequently Asked Questions

Lionel Péramo

Web Performance & Eco-design Expert

Full Stack Developer and creator of the OTRA framework (PHP) and EcoComposer library. I write to make the web faster and more inclusive.

About me →