El contraste de color enfrenta a muchas webs de despachos a un fallo que no se nota hasta que alguien lo mide: texto gris sobre fondo blanco, botones pálidos, menús que se leen mal con el móvil al sol. Afecta a cualquiera que navegue con poca luz, con la vista cansada o simplemente desde una pantalla reflectante, y es uno de los puntos que más despachos incumplen sin saberlo. Si el contraste no llega al mínimo técnico, una parte de tus visitantes abandona antes de leer una sola línea, convencida de que la página no ha cargado bien.
El contraste de color mínimo que exige la norma WCAG 2.2 de nivel AA es de 4,5 a 1 entre el texto y su fondo, y de 3 a 1 para texto grande, botones, iconos y bordes de formulario. Por debajo de esas cifras, una parte real de tus visitantes no puede leer el contenido, aunque a quien diseñó la web le parezca legible.
El contraste de color que marca la ley
La referencia técnica es la norma WCAG 2.2 del W3C, el consorcio que fija los estándares de la web. Su criterio 1.4.3 exige un ratio de 4,5 a 1 entre el color del texto y el del fondo para el cuerpo del artículo, los párrafos y los enlaces. El texto grande, 18 puntos o 14 en negrita, baja el mínimo a 3 a 1, porque el tamaño ya ayuda a la lectura.
El criterio 1.4.11, el de contraste no textual, pone el mismo 3 a 1 a los elementos que no son texto pero sí información: el borde de un campo de formulario, el icono de un desplegable, el contorno de un botón. Quedan fuera los logotipos y los componentes inactivos, pero no un botón de «Pide tu cita» a la vista de cualquiera.
El ratio de contraste es el cociente entre la luminancia relativa de dos colores, calculado con la fórmula que fija el propio W3C. Va de 1 a 1, dos colores idénticos, a 21 a 1, negro puro sobre blanco puro: cuanto más alto, más fácil de leer es el texto para cualquier persona, con o sin problemas de vista.
8 de cada 10 webs fallan este contraste
El informe WebAIM Million 2026, que analiza la accesibilidad del millón de páginas de inicio más visitadas, encuentra texto con contraste por debajo del mínimo AA en el 83,9% de ellas, casi cinco puntos más que en 2025. La página media acumula 34 casos distintos del mismo fallo, un 15% más que el año anterior.
No es un problema aislado: junto con las imágenes sin texto alternativo, los campos de formulario sin etiqueta y los enlaces vacíos, el contraste bajo forma parte de los seis fallos que explican el 96% de todos los errores de accesibilidad detectados en la web, y lleva siete años seguidos encabezando esa lista. Que un despacho lo repita no es la excepción: es lo habitual, y corregirlo sigue siendo de los cambios más baratos de toda una auditoría de accesibilidad.
Los puntos donde falla el contraste en tu web
El fallo no suele estar en el cuerpo del artículo, casi nadie pone letra gris clarito sobre blanco en un párrafo largo, sino en los elementos que se diseñan pensando en que «se vean suaves»: el texto secundario, los enlaces que casi no se distinguen del texto normal, los iconos sin relleno y los textos de ejemplo de los formularios. Son justo los puntos donde un visitante decide si confía en el despacho o se va.
- Texto gris claro sobre fondo blanco en subtítulos y pies de foto.
- Enlaces del mismo tono que el texto que los rodea, sin subrayado ni color propio.
- Iconos de contorno fino sin relleno, sobre todo en menús y redes sociales.
- Texto de ejemplo dentro de un campo de formulario, casi siempre el color peor pensado de toda la web.
Botones y llamadas a la acción
El botón de «Pide tu cita» o «Contacta ahora» es el elemento que más leads cuesta cuando pasa desapercibido. Un azul pastel sobre fondo blanco puede quedar por debajo del 3 a 1 que exige el criterio de contraste no textual al contorno y al relleno del botón, aunque el texto de dentro sí llegue al 4,5 a 1: son dos comprobaciones distintas y hay que pasar las dos. Lo mismo pasa con los iconos de teléfono o WhatsApp flotantes: si se diseñan en un tono pastel para que no choquen, el resultado es que una parte de las visitas no los ve, literalmente, y pierde la vía de contacto más directa que tiene la web.
Formularios y mensajes de error
El formulario de contacto es donde más se junta el contraste bajo con otros errores: el texto de ejemplo dentro del campo, «Escribe tu nombre», suele ir en un gris que no supera el 3 a 1, y el aviso de campo obligatorio se pinta solo en rojo, sin subrayarlo ni añadir texto, así que quien no distingue bien ese rojo nunca sabe qué ha fallado. La documentación de accesibilidad de Chrome lo resume con una regla simple: el color nunca debe ser la única señal de un error, tiene que ir acompañado de texto o de un icono. Si además el despacho ya sabe que su formulario de contacto ahuyenta clientes por otros motivos, el contraste suele ser uno más de la lista, no el único.
Cómo medir el contraste antes de publicar
No hace falta calcular la fórmula a mano. El propio navegador trae la herramienta: la auditoría de accesibilidad de Lighthouse, integrada en las herramientas para desarrolladores de Chrome, señala automáticamente cada texto por debajo del ratio exigido y marca el elemento exacto en el código, según la guía de Chrome para desarrolladores. Chrome incluye además una vista experimental con el modelo APCA, pensado para sustituir al cálculo actual del WCAG con una medida más fina de cómo se percibe el contraste en pantalla.
Conviene revisar el color que de verdad se renderiza, no el de la paleta de marca en el archivo de diseño: una tipografía fina sobre un fondo con imagen, o un botón con transparencia sobre un vídeo de fondo, cambian de ratio según lo que haya detrás en cada momento. Y conviene probarlo también con el modo de alto contraste del sistema operativo activado, porque algunos estados, un enlace visitado, un campo con el foco, pueden desaparecer si la web dependía de una diferencia de color demasiado sutil para empezar.
Lo que pierde tu despacho sin ese contraste
Un texto que cuesta leer no se lee: se abandona. Antes de valorar una sanción o una demanda, el coste inmediato es ese, y pasa en la franja de edad que más contrata despachos, porque la vista cansada por la edad es, con diferencia, la causa más común de necesitar más contraste. Perder a ese visitante en los primeros segundos no sale en ningún informe de SEO, pero sí en la tasa de conversión del formulario o del teléfono de contacto.
Hay además un terreno legal que ya pisan varios despachos, y no solo los que llevan subvención pública: la ley de accesibilidad web que ya obliga a bastantes despachos usa justo estas cifras del WCAG 2.2 AA como referencia de cumplimiento. Y el contraste no llega solo: casi siempre aparece junto a otros fallos de diseño que también pueden acabar en requerimiento, como los patrones oscuros que ya multa la AEPD cuando el diseño empuja al usuario en lugar de informarle con claridad.
Preguntas frecuentes sobre el contraste de color
¿Qué contraste mínimo exige la ley?
El mínimo del nivel AA de WCAG 2.2 es 4,5 a 1 para el texto normal y 3 a 1 para el texto grande, los iconos y los bordes de los campos de formulario. Por debajo de esas cifras, la web no cumple el criterio de contraste y una parte de las visitas no puede leer el contenido con normalidad.
¿Afecta el contraste de color al SEO?
No es un factor de posicionamiento declarado, pero sí entra en la auditoría de accesibilidad de Lighthouse que usan muchas herramientas de SEO técnico, y un contraste bajo sube el abandono y baja el tiempo en página, dos señales que Google sí observa de forma indirecta.
¿Qué herramienta mide el contraste de una web?
La auditoría de accesibilidad de Lighthouse, integrada en las herramientas para desarrolladores de Chrome, revisa toda la página y señala cada color que no llega al ratio exigido, con el elemento exacto del código donde corregirlo.
¿Un gris claro siempre incumple la norma?
No: un mismo gris puede cumplir la norma sobre un fondo y fallarla sobre otro, porque lo que cuenta es el ratio exacto entre los dos colores, no el nombre o el aspecto del tono.
Fuente: WCAG 2.2 (W3C)