La herramienta aplica la fórmula oficial de luminancia relativa de WCAG, así que sus cifras coinciden con las del comprobador de WebAIM y con la mayoría de auditorías de accesibilidad. Todo se ejecuta en el navegador: los colores nunca se suben a ningún servidor y no hay límites de uso.
Comprobar contraste de colores
Funciona del todo en tu navegador: sin subir nada y sin registro.
Ratio de contraste
Pasanecesita 4.5:1
Pasanecesita 3:1
Fallanecesita 7:1
Pasanecesita 4.5:1
Grande = 18pt (24px), o 14pt (18,66px) en negrita.
¿Para qué sirve comprobar el contraste de colores?
Una herramienta para comprobar el contraste de colores mide la ratio de contraste entre el color del texto y el del fondo, y te dice si cumple los estándares de accesibilidad WCAG. Devuelve una ratio de 1:1 a 21:1 y muestra si pasa o falla en AA y AAA tanto para texto normal como para texto grande.
Cómo se usa
- 1Introduce tus colores. Escribe un código hex, un valor rgb() o un nombre de color CSS para el texto y el fondo, o elige los colores con el selector.
- 2Lee la ratio. La ratio de contraste se actualiza en tiempo real, con una previsualización del texto sobre su fondo.
- 3Consulta las etiquetas. Cada etiqueta indica si pasa o falla en WCAG AA y AAA para texto normal y texto grande.
Para quién es
- Diseñadores que prueban los colores de marca antes de que lleguen a desarrollo.
- Desarrolladores front-end que comprueban el contraste en botones, enlaces y etiquetas según WCAG AA.
- Auditores de accesibilidad que documentan fallos de contraste con ratios exactas.
- Equipos de contenido y email que confirman que el texto sigue siendo legible sobre fondos de color.
Preguntas frecuentes
¿Es gratis comprobar el contraste de colores?
Sí, es 100 % gratis, sin registro y sin límites. Funciona en tu navegador.
¿Qué ratio de contraste necesito para pasar el nivel AA de WCAG?
WCAG 2.1 nivel AA exige una ratio de al menos 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA sube eso a 7:1 para texto normal y 4,5:1 para texto grande.
¿Qué se considera texto grande?
Texto grande es aquel de al menos 18pt (unos 24px) en peso normal, o 14pt (unos 18,66px) en negrita. El texto grande admite una ratio de contraste menor porque los glifos más grandes son más fáciles de leer.
¿Cómo se calcula la ratio de contraste?
La fórmula es (L1 + 0,05) / (L2 + 0,05), donde L1 y L2 son la luminancia relativa del color más claro y el más oscuro. La luminancia se calcula a partir de los canales rojo, verde y azul sRGB según la definición de WCAG 2.x.
¿Admite hex, RGB y nombres de color?
Sí. Puedes introducir hex de 3, 4, 6 u 8 dígitos, valores rgb() y rgba(), o cualquier nombre de color CSS como «teal». También puedes elegir colores con el selector nativo.
¿Por qué la misma ratio a veces pasa y otras veces falla?
La ratio exigida depende del tamaño del texto y del nivel que buscas. Una ratio de 3,5:1 falla en AA para texto normal pero pasa en AA para texto grande, así que comprueba siempre en función del tamaño y el nivel que uses.