La comprobación de contraste WCAG se realiza en unos pocos pasos simples. Nada sale de tu navegador.
- Introduces un color de primer plano y otro de fondo. La herramienta analiza valores hex, rgb(), hsl() o colores CSS con nombre en sus valores de canal rojo, verde y azul.
- Cada canal RGB se linealiza mediante la función de transferencia sRGB. Esto convierte los valores de visualización codificados con gamma en intensidades de luz lineales.
- Los valores lineales se ponderan según la sensibilidad del ojo humano a cada canal — 0,2126 para el rojo, 0,7152 para el verde, 0,0722 para el azul. La suma es la luminancia relativa del color.
- La relación de contraste es (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es la luminancia del color más claro y L2 la del más oscuro. El 0,05 adicional mantiene la fórmula válida para el negro puro.
- La relación se compara con los umbrales WCAG: el texto normal AA necesita al menos 4,5:1, el texto grande AA 3:1, el texto normal AAA 7:1 y el texto grande AAA 4,5:1. Se considera texto grande al menos 18pt o 14pt en negrita.
FAQ
Preguntas frecuentes sobre la comprobación de contraste WCAG.
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel de conformidad mínimo para la mayoría del contenido web. Requiere una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande. AAA es un estándar más alto que exige 7:1 para texto normal y 4,5:1 para texto grande. Puedes aspirar a AAA para contenido clave como el cuerpo de texto de un sitio de noticias, mientras usas AA para el diseño general. Cumplir AAA en todas partes puede ser difícil con los colores de marca, por lo que muchos equipos apuntan a AA en todo y elevan el texto clave a AAA cuando pueden.
¿Qué se considera «texto grande» según WCAG?
WCAG 2.x define texto grande como al menos 18 puntos (24px) para peso normal, o 14 puntos (~19px) para negrita. Los símbolos e iconos que forman parte de una tipografía siguen los mismos umbrales. Si no estás seguro de qué umbral aplica a tu interfaz, consulta ambos: AA Grande tiene una barrera más baja (3:1), por lo que la mayoría de los pares de color que no pasan AA Normal sí pasan AA Grande cuando el texto es suficientemente grande.
¿Por qué mi par pasa AA Grande pero no AA Normal?
Porque AA Grande solo requiere una relación de 3:1 mientras que AA Normal requiere 4,5:1. WCAG establece un umbral más bajo para texto grande porque los caracteres más grandes son más fáciles de leer incluso con menos contraste. Un par de color que obtiene, por ejemplo, 4,0:1 pasa AA Grande (umbral 3:1) pero no AA Normal (umbral 4,5:1). Esto es muy común con colores de marca claros usados como primer plano sobre fondos blancos.
¿Puedo confiar solo en esta herramienta para auditar la accesibilidad?
Esta herramienta verifica una cosa: la relación de contraste WCAG 2.x entre dos colores sólidos. La accesibilidad real implica más: indicadores de foco, tamaño y peso de fuente, el color como única forma de transmitir información, y compatibilidad con lectores de pantalla y herramientas de zoom. Usa esta comprobación de contraste junto con otros métodos de auditoría para obtener una imagen completa de la accesibilidad de tu aplicación.
¿Qué formatos de color acepta la entrada?
Puedes pegar códigos hex de 3, 4, 6 u 8 dígitos (con o sin #), valores rgb() y rgba() en sintaxis tradicional con comas o sintaxis moderna separada por espacios, hsl() y hsla() con cualquier unidad de tono estándar (deg, rad, grad, turn), hsv(), hwb() y cualquiera de los 150 colores CSS con nombre de la especificación CSS Color Module Level 4. El color se analiza completamente en tu dispositivo.