Verificador de contraste
Compruebe que un texto se lee bien sobre su fondo según las normas de accesibilidad WCAG
Relación de contraste
14.68:1
| AA | AAA | |
|---|---|---|
| Texto normal | Aprobado | Aprobado |
| Texto grande (24 px o 18,66 px en negrita) | Aprobado | Aprobado |
El veloz murciélago hindú comía feliz cardillo y kiwi.
El veloz murciélago hindú comía feliz cardillo y kiwi.
Acerca de la herramienta
Este verificador calcula la relación de contraste entre el color de un texto y el de su fondo, con la fórmula de luminancia relativa de las WCAG 2. Sirve para comprobar que un botón, un enlace o un párrafo se lee bien, también para personas con baja visión, antes de entregar una maqueta o un tema. Una vista previa muestra una frase de ejemplo con ambos colores.
El resultado indica si se alcanzan los niveles AA y AAA, tanto para texto normal como para texto grande. Si el contraste no llega al nivel AA en texto normal, la herramienta propone el color de texto más cercano que lo cumple, oscureciéndolo o aclarándolo. Los colores se introducen en hexadecimal o con el selector.
Cómo usarla
- Indica el Color del texto y el Color del fondo, en hexadecimal o con el selector.
- Consulta la Relación de contraste y los resultados Aprobado o Suspenso para Texto normal y Texto grande.
- Si aparece un color propuesto para el nivel AA, pulsa Aplicar para usarlo.
- Pulsa Invertir para probar la combinación con los colores intercambiados.
Preguntas frecuentes
¿Qué umbrales WCAG aplica la herramienta?
Para texto normal, 4,5:1 en el nivel AA y 7:1 en el nivel AAA. Para texto grande, es decir, 24 px o 18,66 px en negrita, 3:1 en el nivel AA y 4,5:1 en el nivel AAA.
¿Cómo se calcula el color propuesto?
La herramienta acerca poco a poco tu color de texto al negro o al blanco, según cuál contraste más con el fondo, y se detiene en cuanto la relación llega a 4,5:1. Así el tono propuesto queda lo más cerca posible del original.
¿Qué formatos de color se aceptan?
Códigos hexadecimales de tres o seis dígitos, con o sin almohadilla, o el selector de color. La transparencia no está admitida: para un texto semitransparente, introduce el color que resulta una vez mezclado con el fondo.
¿Los colores que pruebo salen de mi navegador?
No. El cálculo se hace por completo en tu navegador, sin ninguna petición de red. Los dos últimos colores probados solo se guardan en el almacenamiento local del navegador para mostrarlos de nuevo cuando vuelvas.