¿Qué relación de contraste requiere WCAG 2.1 AA para el texto del cuerpo?

WCAG 2.1 AA requiere una relación de contraste de 4,5:1 para texto normal (por debajo de 18 pt / 14 pt negrita) y 3:1 para texto grande (18 pt+ o 14 pt+ negrita).

¿Cómo calculo la relación de contraste entre dos colores?

Relación de contraste = (L_claro + 0,05) / (L_oscuro + 0,05), donde L es la luminancia relativa en sRGB lineal. Convierte el hex a sRGB, linealiza usando la gamma IEC 61966, luego aplica la fórmula de luminancia antes de dividir.

¿Cuál es la diferencia entre los niveles de contraste WCAG AA y AAA?

AA requiere 4,5:1 para texto (3:1 para texto grande) y es el mínimo legal en la mayoría de las jurisdicciones. AAA requiere 7:1 para texto (4,5:1 para texto grande) y se recomienda para contextos de legibilidad crítica como interfaces médicas o legales.

¿La fórmula de contraste WCAG funciona para todas las discapacidades visuales?

No — la fórmula WCAG 2.x se basa únicamente en la luminancia y no tiene en cuenta el daltonismo basado en el tono o los valores de bajo contraste dentro de valores de luminancia similares. El algoritmo APCA (propuesto para WCAG 3.0) se correlaciona mejor con la legibilidad del mundo real.

¿Hay algún color de fondo CSS que pase 4,5:1 tanto contra texto negro como blanco?

Ningún color único logra 4,5:1 contra ambos simultáneamente. El negro (#000000) tiene una relación de 21:1 contra el blanco y 1:1 contra sí mismo; debes elegir un primer plano por fondo y verificarlo con una herramienta de comprobación de contraste.

¿Cuándo exige el Acta Europea de Accesibilidad el cumplimiento de WCAG?

El Acta Europea de Accesibilidad (Directiva 2019/882) requirió que los productos y servicios digitales cubiertos cumplieran WCAG 2.1 AA antes del 28 de junio de 2025, con aplicación para nuevos contratos a partir de esa fecha.

Guide

Contraste de color para accesibilidad: WCAG 2.1, APCA y qué implementar hoy

WCAG 4,5:1 es el mínimo legal. También es una fórmula con defectos. Aquí está el panorama moderno.

By Buğra SözeriPublished May 16, 2026

WCAG 2.1 requiere una relación de contraste de 4,5:1para texto de cuerpo regular y 3:1 para texto grande (18pt+ normal o 14pt+ negrita). La fórmula es el estándar legal de facto en EE. UU. (relevante para ADA), la UE (EAA) y la mayor parte del mundo. También tiene defectos bien documentados que generaron un reemplazo (APCA) que no llegó a WCAG 2.2. Esta guía explica el panorama práctico hoy.

La fórmula de contraste WCAG 2.x

Definida en WCAG 2.0 (2008) y sin cambios hasta 2.2:

contraste = (L_claro + 0,05) / (L_oscuro + 0,05)
donde L = luminancia relativa (0-1) de cada color, calculada en sRGB de luz lineal

Los resultados van de 1:1 (colores idénticos) a 21:1 (blanco puro sobre negro puro).

Umbrales WCAG (para cumplimiento AA, el objetivo estándar):

4,5:1 — texto del cuerpo, iconos, controles de formulario.
3:1 — texto grande (≥ 18pt o ≥ 14pt negrita), componentes de interfaz.
AAA más estricto: 7:1 cuerpo, 4,5:1 grande. Solo requerido en algunos contextos específicos.

Dónde la fórmula es incorrecta

Tres problemas documentados:

Insensibilidad a tonos medios. La fórmula da puntuaciones de contraste iguales a pares de tonos medios que se ven muy diferentes en la percepción real. Un par 4,5:1 de grises medios puede ser visualmente más débil que un par 3:1 de negro sobre gris claro.
Ciega al tono. Los tonos de igual luminancia (rojo y verde al mismo brillo) puntúan un contraste de 1:1, pero los usuarios daltónicos pueden discriminarlos mal de todos modos. La fórmula no puede detectar problemas de daltonismo.
Peso de fuente ignorado.Las fuentes delgadas necesitan más contraste que las negritas del mismo tamaño; WCAG no da crédito por el peso más allá del umbral binario de “texto grande.”

APCA: el reemplazo que no llegó a WCAG 2.2

APCA (Algoritmo de Contraste Perceptivo Accesible) es la métrica de contraste de próxima generación propuesta y rechazada. Desarrollado por Andrew Somers para el borrador de trabajo de WCAG 3.0. Aborda los problemas anteriores y es dramáticamente más preciso contra datos reales de estudios de usuarios.

Las puntuaciones APCA van de −108 a +106. Positivo significa texto oscuro sobre fondo claro; negativo significa lo contrario. Umbrales:

Lc 75 — texto del cuerpo (reemplaza el 4,5:1 de WCAG).
Lc 60 — texto grande o titulares (reemplaza el 3:1).
Lc 45 — texto no contenido (decorativo, líneas de copyright).

APCA da diferentes umbrales por dirección (claro sobre oscuro vs oscuro sobre claro) porque los ojos humanos procesan los dos casos de manera diferente. La fórmula simétrica de WCAG pasa por alto esto.

Qué usar en 2026

Pasa WCAG 2.1 AA como mínimo. Es el estándar legal. Usa la fórmula de relación estándar, apunta a 4,5:1 cuerpo / 3:1 grande. Herramientas: npm i wcag-contrast para programático, DevTools del navegador para ad-hoc.
Usa APCA como verificación de cordura. Cuando WCAG pasa pero el resultado parece subjetivamente débil, APCA generalmente lo señala. APCA está disponible como apca-w3 (npm) y en herramientas dedicadas.

Recomendaciones concretas

Texto del cuerpo: apuntar a #1a1a1a(gris oscuro) sobre blanco da ~17:1 — agradable, claramente legible.
Texto deshabilitado / marcador de posición:WCAG exime los “componentes de interfaz inactivos” de la regla 4,5:1, pero los usuarios aún necesitan leer los marcadores. Apunta al mínimo 3:1.
Botones: el texto del botón vs el fondo del botón debe alcanzar 4,5:1. El borde del botón vs el fondo de la página debe alcanzar 3:1.
Indicadores de foco: el contorno de foco debe alcanzar 3:1 contra el fondo adyacente.
Modo oscuro: la fórmula WCAG es simétrica; los números se trasladan. Pero APCA es asimétrico — el modo oscuro tiende a necesitar tokens de diseño ligeramente diferentes al modo claro para la misma calidad percibida. No te limites a invertir los colores.

Qué evitar

No uses el contraste como única señal para el estado.Los estados de error necesitan contraste y otra señal (un icono, texto). Los usuarios daltónicos pueden no distinguir los errores rojos de los éxitos verdes incluso a alto contraste.
No apuntes a AAA de forma refleja.La propia guía de WCAG dice que AAA “no se recomienda como política general para sitios enteros.” AA es el techo de diseño para la mayoría de los productos.

El flujo de trabajo pragmático

En tiempo de diseño: usa el comprobador de contraste WCAG en tu herramienta de diseño (Figma, Sketch, Adobe XD tienen todos plugins). Alcanza los mínimos 4,5:1 / 3:1.

En tiempo de código: analiza tus tokens de diseño contra WCAG conwcag-contrast o similar. Falla en CI en las regresiones.

En tiempo de QA: pruebas reales con lector de pantalla y navegación por teclado. El contraste es una pequeña parte de la accesibilidad; los caminos de teclado y lector de pantalla son donde viven la mayoría de los errores de a11y.

Para la mecánica del espacio de color subyacente que linealiza la fórmula, consulta nuestra guía de formatos de color CSS.

Frequently asked questions

¿Qué relación de contraste requiere WCAG 2.1 AA para el texto del cuerpo?: WCAG 2.1 AA requiere una relación de contraste de 4,5:1 para texto normal (por debajo de 18 pt / 14 pt negrita) y 3:1 para texto grande (18 pt+ o 14 pt+ negrita).
¿Cómo calculo la relación de contraste entre dos colores?: Relación de contraste = (L_claro + 0,05) / (L_oscuro + 0,05), donde L es la luminancia relativa en sRGB lineal. Convierte el hex a sRGB, linealiza usando la gamma IEC 61966, luego aplica la fórmula de luminancia antes de dividir.
¿Cuál es la diferencia entre los niveles de contraste WCAG AA y AAA?: AA requiere 4,5:1 para texto (3:1 para texto grande) y es el mínimo legal en la mayoría de las jurisdicciones. AAA requiere 7:1 para texto (4,5:1 para texto grande) y se recomienda para contextos de legibilidad crítica como interfaces médicas o legales.
¿La fórmula de contraste WCAG funciona para todas las discapacidades visuales?: No — la fórmula WCAG 2.x se basa únicamente en la luminancia y no tiene en cuenta el daltonismo basado en el tono o los valores de bajo contraste dentro de valores de luminancia similares. El algoritmo APCA (propuesto para WCAG 3.0) se correlaciona mejor con la legibilidad del mundo real.
¿Hay algún color de fondo CSS que pase 4,5:1 tanto contra texto negro como blanco?: Ningún color único logra 4,5:1 contra ambos simultáneamente. El negro (#000000) tiene una relación de 21:1 contra el blanco y 1:1 contra sí mismo; debes elegir un primer plano por fondo y verificarlo con una herramienta de comprobación de contraste.
¿Cuándo exige el Acta Europea de Accesibilidad el cumplimiento de WCAG?: El Acta Europea de Accesibilidad (Directiva 2019/882) requirió que los productos y servicios digitales cubiertos cumplieran WCAG 2.1 AA antes del 28 de junio de 2025, con aplicación para nuevos contratos a partir de esa fecha.

Published May 16, 2026