Herramientas
Comprobador de contraste
Comprobador de contraste de color (WCAG)
Mide el contraste entre texto y fondo y comprueba si cumple las pautas WCAG AA y AAA.
Texto grande (24 px o más)
Texto normal a 16 px. Un párrafo de ejemplo para ver cómo se lee el color elegido sobre el fondo.
Texto pequeño a 14 px, para notas y pies de foto.
- AA normal: mínimo 4.5:1 para texto de menos de 18 pt (o 14 pt en negrita)
- AA grande: mínimo 3:1 para texto de 18 pt o más (o 14 pt o más en negrita)
- AAA normal: mínimo 7:1 para una accesibilidad reforzada
- AAA grande: mínimo 4.5:1 para texto grande con accesibilidad reforzada
Sobre esta herramienta
Comprueba si un texto se puede leer bien sobre su fondo según las pautas de accesibilidad WCAG 2.1. Calcula el ratio de contraste entre los dos colores y te dice si aprueba los niveles AA y AAA para texto normal y grande. Sirve para revisar botones, enlaces, textos sobre colores de marca o avisos antes de publicar una web o una campaña.
Escribe los códigos HEX en «Fondo» y «Texto», o pulsa cada muestra para elegirlos con el selector. Verás el ratio, una vista previa con tres tamaños de letra y la tabla de cumplimiento. «Invertir» intercambia los colores. «Ajustar a AA» y «Ajustar a AAA» cambian la luminosidad del color de texto, sin tocar su tono, hasta alcanzar 4.5:1 o 7:1.
Todo se calcula en tu navegador; no se envía nada. Solo admite colores HEX de seis cifras y opacos: no tiene en cuenta transparencias, degradados ni imágenes de fondo. El ratio sigue la fórmula de luminancia relativa de WCAG 2.1, no el método APCA propuesto para WCAG 3. Úsalo como apoyo; una auditoría completa revisa más cosas que el color.
Preguntas frecuentes
¿Qué contraste mínimo pide WCAG?
El nivel AA exige 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA sube a 7:1 y 4.5:1 respectivamente.
¿Qué se considera texto grande?
Para WCAG, texto de 18 pt (unos 24 px) o más, o de 14 pt (unos 18,5 px) o más en negrita.
¿Cómo mejoro el contraste sin cambiar mi color de marca?
Oscurece o aclara solo la luminosidad del texto, que es lo que hace el botón «Ajustar a AA». Otra opción es reservar el color de marca para fondos o elementos grandes y usar un tono más oscuro para el texto.
¿Por qué el blanco sobre naranja suele suspender?
Los naranjas y amarillos intensos tienen una luminancia alta, parecida a la del blanco, así que el ratio queda por debajo de 4.5:1. Con texto oscuro sobre ese naranja el resultado suele ser mucho mejor.