Comprobador de contraste (WCAG AA / AAA)
Elige un color de texto y de fondo para calcular la relación WCAG. Vista previa en vivo y cuatro badges (AA normal, AA grande, AAA normal, AAA grande) actualizados en tiempo real.
Cómo funciona
Cómo funciona la relación de contraste
WCAG (Web Content Accessibility Guidelines) define el contraste como la relación entre la luminancia relativa de dos colores. La fórmula linealiza cada canal sRGB, los pondera por sensibilidad del ojo humano (R 0.2126, G 0.7152, B 0.0722), luego calcula (más claro + 0.05) / (más oscuro + 0.05). El resultado va de 1:1 (idénticos) a 21:1 (negro sobre blanco).
Calculamos esto en tu navegador con la fórmula oficial WCAG 2.x. Los cuatro badges comprueban los umbrales 4.5:1 (normal) y 3:1 (grande) de AA, y 7:1 (normal) y 4.5:1 (grande) de AAA. 'Texto grande' es 24px / 18pt, o 18.66px / 14pt negrita.
Por qué pasar AA como mínimo
AA es el nivel legalmente exigible en muchas jurisdicciones (US ADA, EU EN 301 549, UK Equality Act para servicios digitales). Fallar AA en texto de cuerpo es el problema de accesibilidad más común y el más fácil de arreglar durante el diseño en vez de tras lanzar.
AAA se recomienda para lectura larga, servicios gubernamentales e interfaces críticas. Es estricto — el primer instinto de un diseñador de gris pálido sobre blanco suele fallar AAA fácilmente. Si tu sitio sirve sobre todo contenido de vistazo rápido, apunta a AA; si publicas libros, artículos o información crítica, apunta a AAA.
Errores comunes
'Se ve bien en mi pantalla.' Pantallas calibradas, luces fluorescentes de oficina y uso de móvil al aire libre cambian todos el contraste percibido. Usa la relación, no tu ojo.
Diseñar dark mode invirtiendo códigos hex. La inversión cambia matiz y rompe contraste. Re-prueba cada par de colores tras cambiar de tema.
Confiar en guías de marca. Muchas paletas de marca se eligieron antes de la conciencia WCAG. Si rosa de marca sobre blanco falla, propón un rosa ligeramente más oscuro para el cuerpo y reserva el original para uso decorativo.
Preguntas frecuentes
›¿Diferencia entre AA y AAA?
AA requiere 4.5:1 para texto normal y 3:1 para grande. AAA aprieta a 7:1 y 4.5:1. AAA se recomienda pero no siempre es alcanzable.
›¿Qué es 'texto grande'?
WCAG lo define como 18pt (24px) o mayor, o 14pt (18.66px) negrita.
›¿Soporta transparencia?
Aún no. Elige el color real que ve el usuario (frente compuesto sobre fondo). El soporte de transparencia podría llegar luego.
›¿Por qué mi marca no pasa?
Muchas paletas de marca se eligieron por estética, no accesibilidad. Arreglos comunes: oscurecer colores acentuados usados como texto, reservar variantes claras para fondos o decoración.
›¿La relación es lo mismo que 'contraste percibido'?
No — WCAG 2.x usa fórmula simplificada basada en luminancia. WCAG 3 (en desarrollo) usa APCA, que predice mejor el contraste percibido pero aún no está estandarizado.
›¿Qué relación para iconos o controles UI?
WCAG 2.1 añadió un mínimo 3:1 para contraste no-textual (iconos, controles, indicadores de foco). Usa el mismo comprobador — cumple o supera 3:1.
›¿Funciona para gráficos?
Aplica el mismo umbral entre colores adyacentes que transmiten significado. Para data viz, 3:1 entre adyacentes es el mínimo WCAG 1.4.11.
›¿Los datos se envían a algún sitio?
No. El cálculo corre localmente en tu navegador.
Herramientas relacionadas
Última actualización: