Media Queries CSS y accesibilidad: la guía completa para una web inclusiva

La accesibilidad web a menudo se ve como una tarea pesada. Pensamos que solo se trata de cumplir leyes como la EAA 2025. Pero en realidad, la accesibilidad es una prueba de calidad. Un sitio accesible es un sitio mejor construido y más rápido para todos.

En 2026, tenemos herramientas de precisión para ayudar a los usuarios: las Media Queries de preferencias. Estas líneas de código permiten detectar los ajustes elegidos por el internauta en su teléfono u ordenador. El sitio puede cambiar de aspecto automáticamente.

En esta guía, veremos cómo usar 7 media queries esenciales. Aprenderemos a programar para garantizar el máximo rendimiento manteniendo la compatibilidad con todos los navegadores.

#Una regla de oro: la mejora progresiva

Un error clásico consiste en programar un sitio pesado y luego intentar eliminar los efectos para las personas con discapacidad. Esto obliga al navegador a realizar un trabajo inútil.

El mejor método es separar los estilos. Definimos una base sólida y accesible, y luego añadimos las opciones visuales solo si el usuario no ha solicitado restricciones. Para ello, solemos usar el valor no-preference (sin preferencia).

#1. prefers-reduced-motion: dominar el movimiento

Algunas personas sufren mareos o náuseas cuando hay demasiado movimiento en pantalla. Esto se llama trastornos vestibulares. Cerca del 35 % de los adultos mayores de 40 años se ven afectados por estos trastornos, según un estudio publicado por los National Institutes of Health.

Lamentablemente, como el soporte es limitado por ahora en algunos navegadores, no podemos condicionarlo todo mediante esta media query. Si el navegador no la admite, no se aplicará ningún estilo. Para evitarlo, definimos una base estática y luego añadimos la animación en el bloque de la media query. Tendremos, por tanto, dos órdenes contradictorias cuando el valor sea “no-preference”, pero es el precio de la compatibilidad.

El método eficiente:

Copy/* Base estática y ligera para todos */
.mi-titulo {
  transform: none;
}

/* La animación solo se activa si el usuario acepta movimientos */
@media (prefers-reduced-motion: no-preference) {
  .mi-titulo {
    animation: 1s slide-in forwards;
  }
  
  :root {
    scroll-behavior: smooth;
  }
}

#2. prefers-color-scheme: el modo oscuro nativo

Esta es probablemente la media query más conocida. Detecta si el usuario ha elegido un tema claro u oscuro en los ajustes de su dispositivo.

Usar prefers-color-scheme es indispensable para el confort visual. También es un gesto por el planeta: en las pantallas modernas (OLED), mostrar negro consume menos energía.

Optimizar con light-dark()

Para ir más allá y simplificar tu código, puedes combinar esta consulta con la nueva función light-dark(). Permite gestionar dos colores en una sola línea de código.

Para entender cómo usarla y mejorar tu rendimiento de renderizado, lee mi guía completa sobre la función light-dark() y el ecodiseño.

#3. prefers-contrast: claridad visual

No todo el mundo percibe los contrastes de la misma forma. Con la edad o ciertas enfermedades visuales (como las cataratas), los textos gris claro sobre fondo blanco se vuelven ilegibles.

Implementación:

Copy.mi-tarjeta {
  border: 1px solid #ccc;
}

@media (prefers-contrast: more) {
  .mi-tarjeta {
    border: 2px solid #000; /* Borde más grueso y negro */
    box-shadow: none;       /* Eliminamos la sombra que nubla la vista */
  }
}

#4. forced-colors: el modo de supervivencia visual

En Windows, el modo “Contraste alto” sustituye tus colores por una paleta elegida por el sistema. En este caso, tus colores de fondo desaparecen. Debes asegurarte de que tus elementos sigan siendo visibles gracias a sus bordes.

Es inútil luchar contra este modo. Hay que acompañarlo usando las palabras clave de colores del sistema.

Copy@media (forced-colors: active) {
  .boton-accion {
    /* Forzamos un borde que se adaptará a los colores del sistema */
    outline: 2px solid ButtonText;
    border: 1px solid ButtonText;
  }
}

Para conocer todos los códigos disponibles, consulta la lista de colores del sistema en MDN. Es la garantía de que tus botones nunca serán invisibles.

#5. inverted-colors: respetar la inversión del sistema

Algunos usuarios con discapacidad visual invierten todos los colores de su pantalla para leer mejor (el blanco se vuelve negro, el azul se vuelve naranja). El problema es que tus fotos también se convierten en “negativos” ilegibles. La query inverted-colors permite corregir esto.

Copy@media (inverted-colors: inverted) {
  img, video {
    /* Reinvertimos las imágenes para que vuelvan a ser naturales */
    filter: invert(100%);
  }
}

#6. prefers-reduced-transparency: evitar la fatiga visual

Los efectos de desenfoque (Glassmorphism) son atractivos pero fatigan el cerebro de las personas con trastornos de atención o dificultades de lectura. El texto se vuelve borroso sobre un fondo transparente.

Como Firefox aún no gestiona esta opción, usamos la misma lógica que para el movimiento: un estilo de base sólido y el efecto visual añadido solo para quienes no tienen restricciones.

Copy/* Base: fondo sólido y opaco para una lectura fácil */
.menu-navegacion {
  background: #ffffff;
}

/* Efecto visual añadido solo si el usuario no tiene restricciones */
@media (prefers-reduced-transparency: no-preference) {
  .menu-navegacion {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
  }
}

#7. La media query speech: la web para los oídos

La accesibilidad también es para quienes escuchan la web. Las personas ciegas usan software que lee el sitio en voz alta. La query speech permite adaptar el texto específicamente para estas herramientas.

Copy@media speech {
  .separador-visual, .banner-publicidad {
    display: none;
  }
}

#Rendimiento y SEO: ¿por qué programar así?

Usar estas técnicas no es solo un acto ético. Es una estrategia de calidad de software:

1. Cero JavaScript: El CSS es procesado nativamente por el navegador, lo que es mucho más rápido que los scripts de detección.
2. Puntuación LCP: El renderizado es más estable porque las media queries se resuelven instantáneamente durante el análisis del CSS.
3. SEO técnico: Google favorece los sitios que respetan los estándares de la web y ofrecen una experiencia fluida a todos los perfiles de usuario.

#Conclusión: una web más humana

Aprender las media queries de accesibilidad es la marca de un desarrollador experto en 2026. No es código extra, es código mejor pensado. Un sitio accesible es un sitio universal, eficiente y preparado para el futuro.

La inclusión es la forma más noble de optimización.

Preguntas Frecuentes

Lionel Péramo

Experto en Rendimiento Web y Ecodiseño

Desarrollador Full Stack y creador del framework OTRA (PHP) y de la librería EcoComposer. Escribo para hacer la web más rápida e inclusiva.

Sobre mí →