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 formula WCAG 2.1. El resultado es un numero 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 Chromaforge, cada par de colores de la paleta se verifica automaticamente. 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 calculo.
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 boton 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 pequeno (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 minimo requerido por la mayoria 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 vision 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 titulos?
Vale para texto grande, definido como al menos 18pt (24px) en peso normal, o 14pt (18.67px) en negrita. Un titulo 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 graficos 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.
¿Debo comprobar tambi?n los enlaces en el texto?
Si distingues los enlaces del texto normal solo con el color (sin subrayado), el color del enlace debe tener un contraste de 3:1 tanto contra el fondo como contra el texto circundante. Es m?s sencillo usar subrayado y preocuparse solo del contraste enlace/fondo.
¿WCAG 3.0 cambiara algo?
WCAG 3.0 (a?n en borrador) introducir? APCA (Advanced Perceptual Contrast Algorithm), que eval?a el contraste de forma m?s sofisticada considerando tama?o de fuente, peso y polaridad. Por ahora WCAG 2.1 AA sigue siendo el est?ndar aplicable.