Comprobador de contraste de color gratis
Comprueba el contraste entre texto y fondo con las directrices de accesibilidad de WCAG AA y AAA.
Cargando herramienta…
Cómo comprobar el contraste de color de texto y de fondo
Comparar los colores de primer plano y de fondo. Revisa la proporción y muestre los resultados AA y AAA para texto normal y grande.
- Establecer el color de primer plano.
- Establecer el color de fondo detrás de él.
- Inspecciona la muestra y la relación de contraste.
- Ajusta el par y revisa los indicadores de texto normal y grande.
¿Quién necesita un control de contraste?
Los diseñadores utilizan controles de contraste al elegir colores de marca para botones, enlaces y texto corporal. Los desarrolladores los comprueban antes de enviar un nuevo tema o modo oscuro. Los editores de contenido los encuentran útiles al colocar subtítulos en banners de colores.
Un buen contraste ayuda a las personas con visión baja, diferencias de visión de color y ojos más viejos. También ayuda a cualquiera que lee un teléfono con luz solar brillante. Comprobar un par toma segundos, por lo que vale la pena hacerlo por cada color de texto en un sistema de diseño.
El panel de previsualización en vivo muestra un título grande y una línea de texto corporal en los colores elegidos. Ver el par en dos tamaños hace más fácil juzgar la legibilidad junto con la proporción numérica, y cada cambio a cualquiera de los colores actualiza el resultado al instante.
Un ejemplo práctico
Introduce #767676 como primer plano y #ffffff como fondo. La herramienta muestra una relación de 4.54:1. El texto normal muestra AA Pass y AAA Fail, y el texto grande muestra AA Pass.
Ahora cambia el gris a #777777, un paso más ligero. La proporción baja a 4.48:1 y el texto normal falla AA, mientras que el texto grande todavía pasa. Un gris muy claro como el #999999 en blanco da sólo 2.85:1, fallando incluso la verificación de texto grande.
Oscurecer el gris hasta el #595959 y la proporción alcanza las 7.00:1, que pasa AAA para texto normal. Esto muestra cómo pequeños cambios hexagonales pueden mover un color a través de un umbral.
Cómo se calcula la relación
El verificador sigue la fórmula WCAG 2. Cada canal rojo, verde y azul se escala de 0 a 1 y se convierte de sRGB a luz lineal. La luminancia relativa es entonces 0,2126 veces roja, más 0,7152 veces verde, más 0,0722 veces azul. El verde es el que más peso tiene porque los ojos humanos son más sensibles a él.
La relación de contraste es la luminancia más ligera más 0,05, dividida por la luminancia más oscura más 0,05. Los resultados van desde 1:1 para colores idénticos a 21:1 para el negro en blanco. El orden de los dos colores no cambia la proporción.
La herramienta marca el texto normal como pasar AA a 4.5:1 y AAA a 7:1. El texto grande pasa AA a las 3:1. En WCAG, texto grande significa al menos 18 puntos, o 14 puntos cuando negrita. Estos umbrales provienen de los criterios de éxito del WCAG 1.4.3 para el nivel AA y 1.4.6 para el nivel AAA. Muchas organizaciones tratan a AA como su objetivo mínimo, mientras que AAA es un objetivo más estricto que no siempre es práctico para cada color en una paleta de marca.
Errores comunes a evitar
Escribe códigos hexadecimal de seis dígitos completos con el signo hash, como #1a2b3c. Taquigrafía como #fff no se expande por el campo de texto, por lo que uses el selector de color o escribe los seis dígitos.
No te desvíes a un pase. La relación mostrada tiene dos decimales, pero las etiquetas de paso y de fallo usan el valor exacto. Un color que muestra 4,50 todavía puede fallar si la proporción verdadera es poco menos de 4,5.
Comprueba cada estado, no sólo el predeterminado. Los colores Hover, los botones desactivados, el texto de marcador de posición y los contornos de enfoque a menudo usan tonos más claros que caen por debajo del umbral.
Consejos útiles y limitaciones
- La comprobación de modelos de colores sólidos, no una imagen entera o gradiente.
- Los tamaños de letra, etiquetas, estructura y acceso al teclado también necesitan revisión.
- Prueba el color del enlace tanto en el fondo de la página como en el color de texto del cuerpo circundante.
- Cuando un color de marca falla, intenta ajustar su ligereza primero para que el tono se mantenga reconocible.
Preguntas frecuentes
¿Un pase hace que toda mi página sea accesible?
No. Controla un par de colores, no todos los requisitos de accesibilidad.
¿Por qué son diferentes los resultados de texto normales y grandes?
Utilizan diferentes criterios de contraste mostrados.
¿Puede evaluar el texto sobre una fotografía?
No como un par fiable de colores sólidos. Inspecciona el fondo real detrás del texto.
¿Importa qué color pongo en el campo de primer plano?
No. La fórmula de proporción siempre divide la luminancia más ligera por la más oscura, así que intercambiar los campos da el mismo número.
¿Cuál es la proporción más alta posible?
El negro puro sobre el blanco puro, o el reverso, da 21:1.
¿El verificador soporta colores transparentes?
No. Compara dos colores hexagonales sólidos, así que mezcla cualquier color transparente con su fondo real primero e introduce el color sólido resultante.
Su entrada se procesa en tu navegador sin una cuenta ToolWorld Online. Copia o descarga cualquier cosa que quieras guardar antes de salir de la página.
Lee nuestra política de privacidad · Acerca de ToolWorld Online