Comprobador de contraste WCAG
Comprueba si texto y fondo cumplen los ratios de contraste WCAG AA y AAA.
Cómo ayuda
Comprueba si texto y fondo cumplen los ratios de contraste WCAG AA y AAA.
- Genera paletas desde un color base.
- Comprueba el contraste antes de publicar texto UI.
- Exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.
- Funciona localmente en el navegador.
Cómo funciona el comprobador de contraste WCAG
El ratio de contraste se calcula comparando la luminancia relativa de dos colores según la fórmula WCAG 2.1. El resultado es un número entre 1:1 (sin contraste) y 21:1 (negro sobre blanco).
El estándar WCAG define dos niveles: AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt en negrita). El nivel AAA eleva la exigencia a 7:1 para texto normal y 4.5:1 para texto grande.
En Chromoforge, cada par de colores de la paleta se verifica automáticamente. Al generar una escala desde un color de marca, la herramienta muestra de inmediato que pasos superan AA y cuales AAA, para que puedas elegir combinaciones seguras sin abrir una hoja de cálculo.
Algo que sorprende a menudo: el texto sobre fondo de color es más crítico que el texto blanco sobre negro. Un azul medio (#0070c0) sobre blanco supera AA con 4.6:1, pero sobre gris claro (#e0e0e0) baja a 3.1:1 y falla para texto normal. Verifica siempre el par exacto que usarás en producción.
Ejemplos prácticos
- Botones CTA: el color de marca como fondo del botón no siempre supera AA con texto blanco. Usa la herramienta para encontrar la variante más oscura que funcione.
- Badges y etiquetas: los badges de colores con texto pequeño (menor de 14pt) requieren 4.5:1, no 3:1. Muchas paletas fallan aquí.
- Dark mode: verifica la misma paleta sobre fondo oscuro — a menudo los tonos medios se vuelven insuficientes.
- Placeholders de formulario: el placeholder gris claro sobre input blanco es una de las violaciones más comunes; debe superar 4.5:1 igual que el texto normal.
FAQ — Contraste WCAG
¿Cuál es la diferencia entre WCAG AA y AAA?
AA es el nivel mínimo requerido por la mayoría de normativas de accesibilidad (incluyendo la Directiva de Accesibilidad Web de la UE). AAA es el estándar más alto, recomendado para textos largos o usuarios con visión reducida severa. En la práctica, muchas interfaces apuntan a AA y alcanzan AAA solo para el cuerpo de texto principal.
¿El contraste 3:1 vale solo para títulos?
Vale para texto grande, definido como al menos 18pt (24px) en peso normal, o 14pt (18.67px) en negrita. Un título h1 a 32px supera claramente el umbral "texto grande". Una etiqueta de formulario a 13px no: requiere 4.5:1.
¿El contraste se aplica también a los iconos?
Sí. Los elementos gráficos informativos (iconos que transmiten significado sin texto alternativo visible) deben respetar el ratio 3:1 contra el fondo adyacente, según el criterio WCAG 1.4.11 Non-text Contrast.