Contraste de color: cómo cumplir WCAG en tu web

Por qué importa

Un gris claro sobre blanco puede quedar elegante en la pantalla del diseñador y ser ilegible para alguien con baja visión, para una persona mayor o para cualquiera que mire el móvil a pleno sol. Si no se lee el precio o el texto de un botón, esa información no existe para el visitante.

Es uno de los fallos de accesibilidad más habituales y de los más fáciles de corregir: casi siempre basta con oscurecer un color. Además, en la Unión Europea la Ley Europea de Accesibilidad se aplica desde junio de 2025 a muchos servicios digitales, entre ellos el comercio electrónico, con excepciones para microempresas.

Cómo lo comprueba Posiciona

Usamos la auditoría de contraste de Lighthouse 13, basada en axe, que se ejecuta en la misma prueba móvil de PageSpeed Insights que la velocidad. Compara cada texto visible con su fondo según WCAG: 4,5:1 para texto normal y 3:1 para texto grande. Lighthouse la suspende en cuanto falla un solo texto; nosotros puntuamos según cuántos fallan: 100 si ninguno, 80 con 1 o 2, 65 de 3 a 5, 50 de 6 a 10, 35 de 11 a 20 y 20 con más. En el informe te mostramos ejemplos con su ratio y sus colores. Si PageSpeed no da el dato, el check no puntúa.

En la nota de Accesibilidad esta comprobación cuenta como “importante” (peso 3 de 5).

Cómo solucionarlo

Revisa los ejemplos del informe y mide cada combinación con un comprobador de contraste, como el de WebAIM o el que muestran las herramientas para desarrolladores de Chrome al inspeccionar un color.
Oscurece el texto o aclara el fondo hasta llegar a 4,5:1. Sobre blanco, por ejemplo, #767676 es el gris más claro que cumple; #999999 se queda en 2,85:1.
Presta atención a los fallos típicos: textos grises de ayuda, precios tachados, etiquetas de oferta con texto blanco sobre naranja y botones con solo borde.
Si pones texto sobre una foto, añade una capa oscura semitransparente entre ambos o un fondo sólido detrás del texto. Las herramientas automáticas no siempre pueden medir estos casos: revísalos a mano.
Define la paleta una vez (textos, enlaces, botones y sus estados) y compruébala entera, para no corregir elemento a elemento.

Mismo texto con contraste insuficiente y correctoHTML

<!-- 2,85:1: no cumple -->
<p style="color: #999999; background: #ffffff;">Envío gratis a partir de 50 €</p>

<!-- 7:1: cumple con margen -->
<p style="color: #595959; background: #ffffff;">Envío gratis a partir de 50 €</p>

En WordPress

En un tema de bloques, cambia los colores globales en Apariencia → Editor → Estilos → Colores. Al elegir colores para un bloque, el editor avisa si la combinación de texto y fondo puede ser difícil de leer.
En temas clásicos, los colores suelen estar en Apariencia → Personalizar, o en los ajustes globales de tu constructor visual.

En Shopify

En Shopify, abre Tienda online → Temas → Personalizar y entra en la configuración del tema: allí están los colores o esquemas de color que usan todas las secciones. Corrige ahí antes que sección por sección.
Revisa cada esquema de color con los textos, botones y enlaces que lo usan, y también las etiquetas de oferta y agotado, que suelen tener colores propios.

Preguntas frecuentes

¿Qué se considera texto grande en WCAG?

El texto de al menos 18 puntos (unos 24 píxeles CSS) o de 14 puntos en negrita (unos 18,7 píxeles). A ese tamaño basta un contraste de 3:1, porque se lee con más facilidad. Todo lo demás, incluidos precios pequeños, notas legales y textos de botón de tamaño normal, necesita 4,5:1.

¿Los logotipos y las imágenes también tienen que cumplir?

Los logotipos y el texto que forma parte de una marca están exentos. El texto dentro de una imagen sí debe cumplir si transmite información, como un banner con “-30 % en toda la tienda”, aunque las herramientas automáticas no lo detecten. Además, WCAG pide 3:1 para los iconos y los bordes de campos que hacen falta para entender la interfaz.

¿Por qué el informe da 0 si solo fallan unos pocos textos?

Porque la auditoría de Lighthouse es de aprobado o suspenso: basta un elemento con contraste insuficiente para no superarla. Mira qué tienen en común los que fallan: si se deben al mismo color, como el gris del pie o el de los precios tachados, cambiar una sola variable del tema puede arreglarlos todos a la vez.