¿Qué ratio de contraste exige WCAG?

WCAG 2.1 fija dos umbrales. AA - el suelo legal más habitual - exige 4,5:1 para texto normal y 3:1 para texto grande (18 pt+, o 14 pt+ en negrita). AAA sube a 7:1 y 4,5:1. Los componentes UI no textuales y objetos gráficos necesitan 3:1 contra su vecino inmediato.

¿Cómo se calcula realmente el ratio?

Es el ratio de luminancia relativa: (L_clara + 0,05) / (L_oscura + 0,05). La luminancia es una suma ponderada de los canales RGB gamma-corregidos (0,2126 R + 0,7152 G + 0,0722 B). El sumando 0,05 estabiliza la fórmula frente a negros puros. El resultado va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).

¿Qué cuenta como «texto grande»?

WCAG define texto grande como 18 pt o más, O 14 pt o más en negrita. Eso son aproximadamente 24 px / 18,66 px en píxeles CSS al DPI por defecto de 96. El texto grande sólo necesita 3:1 (AA) o 4,5:1 (AAA) porque los glifos grandes se leen más fácil con menor contraste - el texto pequeño y fino necesita más separación.

¿Cambia el ratio en modo oscuro?

Sí - depende sólo de los colores realmente renderizados, así que toca verificar ambos modos. Un `#475569` sobre `#ffffff` pasa AA (6,5:1), pero si tu token de modo oscuro pasa a `#475569` sobre `#0f172a`, estás a 1,6:1 y suspendiendo claramente. Prueba ambas superficies; por eso los diseñadores entregan tokens de color claros + oscuros, no una paleta única compartida.

¿Y con texto anti-aliasing o imágenes de fondo?

El ratio WCAG asume colores planos. Para texto sobre imagen, audita el peor píxel bajo el texto (normalmente el más claro para texto oscuro). Para texto con backplate translúcido o sombra, calcula el ratio contra el color efectivamente renderizado. La mayoría de herramientas - incluida ésta - sólo comprueban pares planos; las auditorías sobre imágenes requieren otra herramienta o inspección manual.

¿Aprobar WCAG basta para accesibilidad?

El contraste es necesario pero no suficiente. También hacen falta fuentes legibles, HTML semántico, textos alternativos, soporte de teclado, indicadores de foco (que también necesitan 3:1 contra el fondo), etc. El contraste es el test de accesibilidad más fácil de automatizar, por eso recibe atención desproporcionada - pero es uno más entre muchos.

Comprobador de contraste

Comprobador de contraste WCAG con ratio en vivo, insignias AA/AAA y texto de muestra.

Primer plano

Fondo

Texto de muestra

Texto de cuerpo a 14 pt regular - la prueba más estricta para contraste de texto normal.

Texto de cuerpo a 16 pt regular - tamaño por defecto del navegador.

Texto grande en negrita a 14 pt - cuenta como «grande» según WCAG.

Texto grande a 18 pt regular - umbral de «texto grande» WCAG.

Título - 24 pt, mucho espacio para respirar.

Ratio de contraste

14.68:1

AA texto normal (4,5:1)Aprobado
AA texto grande (3:1)Aprobado
AAA texto normal (7:1)Aprobado
AAA texto grande (4,5:1)Aprobado

Elige un color de primer plano y otro de fondo. El ratio se actualiza al escribir, y cuatro insignias indican si el par pasa WCAG AA y AAA para texto normal y grande. El texto de muestra se renderiza a los tamaños reales de la spec (14 pt regular, 14 pt bold = grande, 18 pt = grande) para comprobar visualmente, no solo por número.

Cómo usarla

Elige los colores
Usa los selectores de primer plano y fondo, o pega valores hex. El ratio se actualiza en vivo.
Lee las insignias
Cuatro insignias muestran pass/fail para AA-normal, AA-grande, AAA-normal, AAA-grande. Las que importan dependen del tamaño de tu texto.
Prueba el intercambio
Pulsa intercambiar para girar primer plano y fondo - útil al diseñar estados invertidos (botones llenos, recuadros invertidos).
Comprueba a ojo
El texto de muestra se renderiza a los tamaños WCAG reales. Si el ratio pasa pero el texto se ve sucio, tu fuente es demasiado fina - prueba un peso mayor.

¿Qué es?

Un comprobador de contraste calcula el ratio de contraste WCAG entre dos colores - normalmente texto sobre su fondo - e indica si el par cumple cada nivel WCAG. El ratio es el de luminancias relativas (medida perceptiva de brillo), con un sumando para que la fórmula se comporte en los extremos. Más alto = más legible; 4,5:1 es el suelo WCAG AA para texto de cuerpo, 7:1 el de AAA.

Cuándo usarla

Auditar cada par texto/fondo de un design system, revisar los colores frente a requisitos legales de accesibilidad (Section 508 en EE.UU., EN 301 549 en la UE, AODA en Ontario), elegir colores de marca que sobrevivan tanto en tema claro como oscuro, escoger colores de anillo de foco que alcancen 3:1 con la UI alrededor, validar colores de gráfico contra las líneas de cuadrícula, y revisar una paleta elegida antes de publicar.

Errores comunes

Probar sólo la versión más brillante de un token (el cambio a modo oscuro suele fallar). Tratar 3:1 como «suficientemente bueno» para texto de cuerpo - ése es el umbral de texto grande; el cuerpo pequeño necesita 4,5:1. Olvidar que las exenciones para texto deshabilitado existen en WCAG pero no ayudan al usuario - si el texto deshabilitado no se lee, tu formulario está roto. Aprobar pares desde una captura - la compresión JPEG desplaza los tonos; verifica siempre los hex reales de los design tokens.

Preguntas frecuentes

¿Qué ratio de contraste exige WCAG?: WCAG 2.1 fija dos umbrales. AA - el suelo legal más habitual - exige 4,5:1 para texto normal y 3:1 para texto grande (18 pt+, o 14 pt+ en negrita). AAA sube a 7:1 y 4,5:1. Los componentes UI no textuales y objetos gráficos necesitan 3:1 contra su vecino inmediato.
¿Cómo se calcula realmente el ratio?: Es el ratio de luminancia relativa: (L_clara + 0,05) / (L_oscura + 0,05). La luminancia es una suma ponderada de los canales RGB gamma-corregidos (0,2126 R + 0,7152 G + 0,0722 B). El sumando 0,05 estabiliza la fórmula frente a negros puros. El resultado va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).
¿Qué cuenta como «texto grande»?: WCAG define texto grande como 18 pt o más, O 14 pt o más en negrita. Eso son aproximadamente 24 px / 18,66 px en píxeles CSS al DPI por defecto de 96. El texto grande sólo necesita 3:1 (AA) o 4,5:1 (AAA) porque los glifos grandes se leen más fácil con menor contraste - el texto pequeño y fino necesita más separación.
¿Cambia el ratio en modo oscuro?: Sí - depende sólo de los colores realmente renderizados, así que toca verificar ambos modos. Un `#475569` sobre `#ffffff` pasa AA (6,5:1), pero si tu token de modo oscuro pasa a `#475569` sobre `#0f172a`, estás a 1,6:1 y suspendiendo claramente. Prueba ambas superficies; por eso los diseñadores entregan tokens de color claros + oscuros, no una paleta única compartida.
¿Y con texto anti-aliasing o imágenes de fondo?: El ratio WCAG asume colores planos. Para texto sobre imagen, audita el peor píxel bajo el texto (normalmente el más claro para texto oscuro). Para texto con backplate translúcido o sombra, calcula el ratio contra el color efectivamente renderizado. La mayoría de herramientas - incluida ésta - sólo comprueban pares planos; las auditorías sobre imágenes requieren otra herramienta o inspección manual.
¿Aprobar WCAG basta para accesibilidad?: El contraste es necesario pero no suficiente. También hacen falta fuentes legibles, HTML semántico, textos alternativos, soporte de teclado, indicadores de foco (que también necesitan 3:1 contra el fondo), etc. El contraste es el test de accesibilidad más fácil de automatizar, por eso recibe atención desproporcionada - pero es uno más entre muchos.