¿Cómo se calcula la relación de contraste de color según WCAG?

El ratio de contraste WCAG 2.1 se calcula con la fórmula (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 la del color más oscuro. La luminancia se calcula convirtiendo los canales sRGB de 8 bits (0 a 255) a valores lumínicos lineales: si C / 255 <= 0.04045, C lineal = (C / 255) / 12.92; de lo contrario, C lineal = (((C / 255) + 0.055) / 1.055)^2.4. Posteriormente se ponderan según L = 0.2126*R + 0.7152*G + 0.0722*B. El ratio resultante oscila entre 1:1 (colores idénticos) y 21:1 (negro puro #000000 sobre blanco puro #FFFFFF).

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

El nivel WCAG AA es el estándar de cumplimiento legal exigido por normativas como la directiva europea EN 301 549 (incorporada en España por el Real Decreto 1112/2018), la Sección 508 y la Ley ADA Título III. Requiere un contraste mínimo de 4.5:1 para texto normal (inferior a 18 pt / 24 px regular o 14 pt / 18.66 px negrita) y de 3.0:1 para texto grande y componentes esenciales de UI. El nivel WCAG AAA es el umbral avanzado para usuarios con baja visión severa, exigiendo 7.0:1 en texto normal y 4.5:1 en texto grande. La mayoría de sistemas de diseño corporativos exigen el nivel AA de forma global y reservan el AAA para avisos legales, aplicaciones sanitarias y plataformas gubernamentales.

¿Qué tamaño de fuente se considera texto grande según WCAG?

Según las pautas WCAG 2.1, el 'texto grande' se define formalmente como aquel con al menos 18 puntos tipográficos (equivalente a 24 píxeles CSS en una resolución estándar de 96 DPI) o al menos 14 puntos en negrita (aproximadamente 18.66 píxeles CSS con font-weight 700 o superior). El texto grande solo requiere un ratio de 3.0:1 para el nivel AA y de 4.5:1 para el nivel AAA, ya que el mayor grosor de los trazos del glifo proporciona una mayor superficie retiniana visual.

¿Por qué los textos de marcador de posición (placeholder) y los botones deshabilitados suspenden con frecuencia las comprobaciones de contraste?

El color de placeholder por defecto en los navegadores (como #767676 sobre fondo blanco) roza el límite de 4.5:1, pero muchos frameworks de CSS reducen su opacidad a 0.4 o 0.5, desplomando el ratio hasta ~2.2:1. Aunque el criterio WCAG 1.4.3 exime expresamente a los componentes de interfaz inactivos (como botones desactivados), los campos de formulario NO están exentos si el placeholder contiene instrucciones operativas esenciales. Sustituir textos efímeros por etiquetas flotantes persistentes garantiza el cumplimiento de 4.5:1 sin depender de elementos con bajo contraste.

¿Qué diferencias existen entre el cálculo de contraste de WCAG 2.1 y el algoritmo APCA de WCAG 3.0?

WCAG 2.1 emplea una relación matemática estática (1:1 a 21:1) basada exclusivamente en la luminancia relativa, sin considerar la frecuencia espacial (grosor del trazo y peso de la tipografía) ni la polaridad del contraste (texto claro sobre fondo oscuro frente a texto oscuro sobre fondo claro). En contraste, APCA (Accessible Perceptual Contrast Algorithm), formulado para la futura especificación WCAG 3.0, calcula un valor de contraste de luminosidad con signo (Lc de 0 a más de 108) fundamentado en la respuesta de los fotorreceptores humanos y el procesamiento cortical. Con APCA, las fuentes finas exigen valores Lc sustancialmente mayores que las fuentes gruesas, y el modo oscuro requiere una mayor diferencia de luminancia para igualar la legibilidad del modo claro.

Comprobador de Contraste WCAG & Color

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

El nivel WCAG AA es el estándar de cumplimiento legal exigido por normativas como la directiva europea EN 301 549 (incorporada en España por el Real Decreto 1112/2018), la Sección 508 y la Ley ADA Título III. Requiere un contraste mínimo de 4.5:1 para texto normal (inferior a 18 pt / 24 px regular o 14 pt / 18.66 px negrita) y de 3.0:1 para texto grande y componentes esenciales de UI. El nivel WCAG AAA es el umbral avanzado para usuarios con baja visión severa, exigiendo 7.0:1 en texto normal y 4.5:1 en texto grande. La mayoría de sistemas de diseño corporativos exigen el nivel AA de forma global y reservan el AAA para avisos legales, aplicaciones sanitarias y plataformas gubernamentales.

Q: ¿Qué tamaño de fuente se considera texto grande según WCAG?

Según las pautas WCAG 2.1, el 'texto grande' se define formalmente como aquel con al menos 18 puntos tipográficos (equivalente a 24 píxeles CSS en una resolución estándar de 96 DPI) o al menos 14 puntos en negrita (aproximadamente 18.66 píxeles CSS con font-weight 700 o superior). El texto grande solo requiere un ratio de 3.0:1 para el nivel AA y de 4.5:1 para el nivel AAA, ya que el mayor grosor de los trazos del glifo proporciona una mayor superficie retiniana visual.

Q: ¿Por qué los textos de marcador de posición (placeholder) y los botones deshabilitados suspenden con frecuencia las comprobaciones de contraste?

El color de placeholder por defecto en los navegadores (como #767676 sobre fondo blanco) roza el límite de 4.5:1, pero muchos frameworks de CSS reducen su opacidad a 0.4 o 0.5, desplomando el ratio hasta ~2.2:1. Aunque el criterio WCAG 1.4.3 exime expresamente a los componentes de interfaz inactivos (como botones desactivados), los campos de formulario NO están exentos si el placeholder contiene instrucciones operativas esenciales. Sustituir textos efímeros por etiquetas flotantes persistentes garantiza el cumplimiento de 4.5:1 sin depender de elementos con bajo contraste.

Q: ¿Qué diferencias existen entre el cálculo de contraste de WCAG 2.1 y el algoritmo APCA de WCAG 3.0?

WCAG 2.1 emplea una relación matemática estática (1:1 a 21:1) basada exclusivamente en la luminancia relativa, sin considerar la frecuencia espacial (grosor del trazo y peso de la tipografía) ni la polaridad del contraste (texto claro sobre fondo oscuro frente a texto oscuro sobre fondo claro). En contraste, APCA (Accessible Perceptual Contrast Algorithm), formulado para la futura especificación WCAG 3.0, calcula un valor de contraste de luminosidad con signo (Lc de 0 a más de 108) fundamentado en la respuesta de los fotorreceptores humanos y el procesamiento cortical. Con APCA, las fuentes finas exigen valores Lc sustancialmente mayores que las fuentes gruesas, y el modo oscuro requiere una mayor diferencia de luminancia para igualar la legibilidad del modo claro.

Compruebe al instante el ratio de contraste WCAG y la accesibilidad de color. Valide pares de texto y fondo según WCAG 2.1 AA/AAA y obtenga ajustes de color accesibles.

Preajustes recomendados

Parámetros de color y tipografía

Color de texto (Primer plano)

255, 255, 255

Canal alfa (Opacidad)100%

H:0° S:0% L:100%

Color de fondo

24, 24, 27

H:240° S:6% L:10%

Luminancia relativa 0.0093

Escala tipográfica y jerarquíaTexto normal (< 18pt)

Tamaño de fuente16px

Grosor tipográfico

Norma de referencia

Simulación de daltonismo

Luz ambiental

Canalización de cálculo fotométricoFórmula estándar WCAG: (L1 + 0.05) / (L2 + 0.05)

Listo para análisisLuminancia de texto (L1) 1.0000 | Luminancia de fondo (L2) 0.0093

Ratio de contraste

17.72:1AAA Conforme

Contraste perceptual (Lc): Lc -106.7