Contraste de color y WCAG: ¿cuál es el requisito y cómo se mide?

Respuesta corta. WCAG nivel AA exige una relación de contraste de al menos 4,5:1 entre el texto y el fondo para el texto normal, y 3:1 para el texto grande y los elementos gráficos (iconos, bordes de campos de entrada). Un contraste insuficiente es con diferencia el error de accesibilidad más frecuente en las tiendas online — y por suerte a menudo se resuelve de una sola vez en todo el tema. Es además 100 % exactamente medible con software, así que no hay nada que discutir.

¿Por qué es tan importante el contraste?

El texto gris claro sobre blanco se ve elegante en tu pantalla, pero es difícil de leer para personas con baja visión, para personas mayores, y para cualquiera que mire bajo la luz intensa del sol en un móvil. Una gran parte de tus clientes cae en al menos uno de esos grupos. El mal contraste te cuesta, por tanto, literalmente legibilidad — y con ella ventas.

¿Cuáles son los requisitos de contraste exactos de WCAG?

La norma distingue según el tamaño del texto y el tipo de elemento. Cuanto más pequeñas las letras, más nítido debe ser el contraste:

• Texto normal (menor de 24px, o 18,66px en negrita): al menos 4,5:1.
• Texto grande (a partir de 24px, o 18,66px en negrita — es decir, 18pt / 14pt bold): al menos 3:1.
• Componentes gráficos (iconos, bordes de campos de entrada, bordes de botones activos): al menos 3:1 respecto a los colores adyacentes (WCAG 1.4.11).

El contraste se expresa como una relación: 1:1 es ausencia de contraste, 21:1 es negro puro sobre blanco. Algunas combinaciones frecuentes:

¿Cómo mides el contraste tú mismo?

No tienes que adivinar, ni ponerte tú con fórmulas. Hay tres maneras fiables:

1. Un escaneo automatizado (recomendado). Herramientas como Seviranta calculan el valor de contraste de cada elemento de texto de la página de una sola vez y marcan la línea de código exacta de los infractores — incluido el valor medido junto al requerido.
2. Las herramientas de desarrollador de tu navegador. Haz clic en Chrome o Edge con el botón derecho del ratón sobre el texto → "Inspeccionar"; el selector de color suele mostrar directamente la relación de contraste y el estado WCAG.
3. Un comprobador de contraste manual. Introduce los dos códigos Hex y obtienes la relación. Útil en la fase de diseño, pero lento para todo un sitio en vivo.

¿Cómo resuelves los errores de contraste de forma eficiente?

Lo bueno de los errores de contraste: casi siempre se controlan de forma centralizada. En Shopify, WooCommerce o Magento los colores están vinculados a variables globales en tu tema. Haz el color del texto o del fondo un tono más oscuro o más claro hasta que la relación cuadre, y cumplirás de una sola vez para toda tu tienda online el requisito de contraste.

Empieza por tu embudo de conversión: el texto de los botones "Añadir al carrito" y "Pagar", tus etiquetas de precio, los elementos de menú y los avisos en el pago. Ahí está la mayor ganancia. Esto es, por cierto, uno de los 10 errores de accesibilidad más frecuentes.

¿Por qué un widget de accesibilidad no resuelve esto?

Muchos emprendedores esperan arreglar el contraste con un widget de superposición y su "botón de alto contraste". Eso es técnica y jurídicamente insuficiente: los reguladores y los rastreadores de IA comprueban el estado por defecto de tu código fuente. Si tu CSS no cumple el 4,5:1, no cumples — una capa temporal de JavaScript no cambia eso. Por qué un widget de superposición no te protege profundiza en esto. La única ruta sostenible es ajustar los colores en tu propio tema.

¿Qué cambia con WCAG 3.0 (APCA)?

En las próximas directrices WCAG 3.0, la actual fórmula matemática de contraste se sustituye por APCA (Advanced Perceptual Contrast Algorithm). APCA encaja mejor con cómo el ojo humano percibe el contraste de verdad — tiene en cuenta el tipo de letra, el grosor y el contexto, en lugar de solo la luminosidad de dos colores. Si ahora ajustas tu sitio con rigor al requisito de 4,5:1 de WCAG 2.1/2.2, también estarás bien preparado para esa transición.

Ve dónde está tu sitio

¿Tienes curiosidad por qué colores de tu sitio aún no cumplen? Escanea gratis una página. Verás, por cada punto, la relación de contraste medida junto a la requerida, con los colores reales de tu sitio — en menos de 60 segundos, sin cuenta.