Verificador de contraste de color
Comprueba la relación de contraste WCAG entre un color de texto y uno de fondo — ve las notas de aprobado/reprobado AA/AAA para texto normal, texto grande y componentes de interfaz, con una previsualización en vivo y sugerencias de colores accesibles.
El veloz zorro marrón
El texto grande se lee cómodamente cuando el contraste es suficiente.
Este es un párrafo de muestra de texto de cuerpo normal. Un buen contraste de color mantiene tu contenido legible para todos, incluidas las personas con baja visión o daltonismo. un enlace de muestra.
La letra pequeña y los pies de foto son lo más difícil de leer — necesitan el mayor contraste.Todo se calcula en vivo en tu navegador usando la fórmula de luminancia relativa WCAG 2.x — sin subidas, sin registro, completamente gratis.
Acerca de Verificador de contraste de color
El Verificador de Contraste de Color mide la relación de contraste WCAG entre un color de texto y un color de fondo, y luego califica el par según los niveles de accesibilidad AA y AAA para texto normal, texto grande y componentes de interfaz. La relación y cada veredicto de aprobado/reprobado se actualizan en tiempo real mientras ajustas cualquiera de los dos colores.
Un panel de vista previa realista muestra encabezados, texto de cuerpo, letra pequeña, un botón y un enlace en tu combinación elegida, para que puedas juzgar la legibilidad con contenido real en lugar de muestras abstractas. Cuando un par no aprueba, la herramienta sugiere el color de texto accesible más cercano que alcanza el umbral AA de 4,5:1, listo para aplicar con un clic.
El cálculo sigue la fórmula de luminancia relativa de WCAG 2.x y se ejecuta íntegramente en tu navegador: nada se sube y las verificaciones son gratis. También puedes copiar un informe de texto compacto con la relación y las calificaciones para pegarlo en una revisión de accesibilidad o un pull request.
Cómo usar Verificador de contraste de color
- Define tu color de texto y tu color de fondo con los selectores o escribiendo valores.
- Lee la relación de contraste y los resultados AA/AAA para texto normal, texto grande y componentes de interfaz.
- Revisa la vista previa en vivo para ver encabezados, párrafos, botones y enlaces reales en tus colores.
- Si el par no aprueba, aplica el color de texto accesible sugerido o intercambia los dos colores.
- Haz clic en "Copiar informe" para compartir la relación y los resultados de cumplimiento.