Search for a command to run...
Calcula el ratio de contraste WCAG 2.1 de dos colores y muestra los resultados AA y AAA al instante.
Admite #RGB, #RRGGBB, #RRGGBBAA, rgb()/rgba() y hsl()/hsla(). Los nombres de color CSS no están admitidos.
El alfa se compone sobre el fondo antes de medir, y un fondo translúcido se compone sobre blanco.
Color sugerido que cumple
Ajusta la luminosidad del texto hacia el negro y hacia el blanco hasta alcanzar AA 4.5:1 y propone el tono más cercano.
Ratio de contraste
3.66:1
#7B8794 / #FFFFFF
AA texto normal
Mínimo 4.5:1
AA texto grande
Mínimo 3.0:1
AAA texto normal
Mínimo 7.0:1
AAA texto grande
Mínimo 4.5:1
Componentes no textuales y de UI
Mínimo 3.0:1
Vista previa
Texto normal a 16px, el tamaño habitual del cuerpo.
Texto grande 24px en negrita
What
Un comprobador de contraste mide la relación de luminancia entre un color de texto y su fondo, el valor que WCAG 2.1 usa para decidir si el texto es legible. Esta herramienta interpreta hex, rgb() y hsl(), compone el alfa sobre el fondo y evalúa todos los umbrales AA y AAA.
Cases
Validar el contraste del texto antes de publicar tokens de diseño.
Comprobar si un texto de marcador gris claro cumple AA.
Revisar botones e iconos frente al requisito 3:1 de no texto.
Auditar la paleta de modo oscuro junto a la de modo claro.
Buscar el tono accesible más cercano cuando el color de marca falla.
Documentar resultados en un ticket de revisión de accesibilidad.
How To
Introduce un color de texto y uno de fondo para ver los veredictos WCAG.
Usa el selector o escribe un valor hex, rgb() o hsl().
Repite con el fondo y usa Intercambiar colores para invertir el par.
Revisa el ratio y las etiquetas AA, AAA y de componentes no textuales.
Aplica el color sugerido si falla y copia el informe del resultado.
Knowledge
FAQ