El Probador de Contraste calcula la relación de contraste WCAG 2.1 entre dos colores y los califica según los umbrales AA/AAA tanto para texto normal como grande. Una vista previa en vivo muestra el texto renderizado en los colores elegidos, y un botón de "seleccionar fondo de página" toma una muestra de la página actual.
La accesibilidad es cada vez más necesaria: el cumplimiento de las WCAG es un requisito legal en muchas jurisdicciones e, incluso donde no lo es, un contraste deficiente aleja a los usuarios. El Probador de Contraste te dice al instante si dos colores cumplen con los estándares WCAG. Elige un primer plano y un fondo a través del selector de color o pega valores hexadecimales; la herramienta calcula la relación de contraste utilizando la fórmula oficial de luminancia WCAG y la califica según cuatro umbrales: AA normal (≥4.5:1), AA grande (≥3:1), AAA normal (≥7:1) y AAA grande (≥4.5:1). Cada umbral muestra una insignia clara de Aprobado/Reprobado. Una vista previa en vivo renderiza texto grande y normal en los colores elegidos para que puedas ver el impacto visual real. Un botón de conveniencia toma una muestra del fondo del cuerpo de la página actual — útil para verificar si una combinación de colores en un sitio real es válida. Todo se ejecuta localmente en tu navegador, sin cargas.
Utiliza la fórmula oficial de luminancia WCAG para calcular la relación de contraste. El resultado es exacto y coincide con todos los probadores de accesibilidad conformes.
Aprobado/reprobado para AA normal (≥4.5:1), AA grande (≥3:1), AAA normal (≥7:1), AAA grande (≥4.5:1) — todo mostrado como una cuadrícula.
Renderiza texto real grande y normal en los colores elegidos para que veas el impacto visual junto con la relación numérica.
Toma una muestra del color de fondo del cuerpo de la página actual con un clic — útil para probar combinaciones del mundo real.
Escribe un valor hexadecimal o utiliza el selector de color nativo. Los valores se sincronizan bidireccionalmente mientras editas cualquiera de ellos.
El intercambio con un clic alterna el primer plano y el fondo — útil al verificar temas invertidos o estados de hover.
Antes de finalizar una paleta de colores, verifica cada color de texto contra su fondo para asegurar el cumplimiento de WCAG AA — evita retrabajo posterior.
Usa "seleccionar fondo de página" en un sitio en vivo, luego pega el color real del texto — encuentra violaciones de accesibilidad en minutos sin abrir Lighthouse.
Cuando una marca elige un color que podría fallar en accesibilidad, usa el probador para encontrar la variante conforme más cercana (tono más oscuro/claro).
Verifica que los colores de los estados hover/activo/deshabilitado sigan cumpliendo con los requisitos de contraste, no solo el predeterminado.
Los temas oscuros a menudo fallan en el contraste para texto gris sobre gris. Verifica tus grises más oscuros contra tus fondos más oscuros para detectar esto.
Haz clic en el ícono de Contraste en el dock de DevSuite Pro. Se abre un panel con campos de color de primer plano y fondo.
Usa el selector de color o pega un valor hexadecimal para cada uno. La vista previa en vivo se actualiza mientras cambias los colores.
El número grande (ej. 4.8:1) es la relación de contraste. Cuanto más alto, mejor. 3 es el mínimo absoluto; 4.5 es el objetivo para texto normal.
Las insignias de aprobado/reprobado para AA y AAA, tamaños de texto normal y grande, muestran de un vistazo para qué califica tu combinación.
Si reprueba, ajusta los colores. Oscurece el primer plano o aclara el fondo (o viceversa) hasta que el nivel objetivo muestre Aprobado.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
