Accesibilidad
Cómo comprobar el contraste del color del texto según WCAG
Mide el contraste entre el texto y el fondo, entiende los umbrales AA y AAA y corrige el texto que no cumple sin tener que adivinar.
Publicado Actualizado
Un contraste legible depende de la combinación de primer plano y fondo, no de un solo color. El contraste WCAG compara la luminancia relativa de ambos y expresa el resultado como una relación de 1:1 a 21:1.
Conoce los umbrales
- WCAG AA: 4.5:1 para texto normal y 3:1 para texto grande.
- WCAG AAA: 7:1 para texto normal y 4.5:1 para texto grande.
- Se considera texto grande el de al menos 24 px en peso normal, o unos 18,66 px en negrita.
Pega la combinación real en el verificador de contraste de color. Prueba todos los estados relevantes: normal, hover, deshabilitado, seleccionado, visitado y foco. Los colores transparentes deben componerse sobre el fondo final antes de medirlos.
En interfaces de producto conviene tener una pequeña lista de comprobación: texto de párrafo, texto secundario, enlaces, etiquetas de botones, botones solo con icono, bordes de formularios, anillos de foco, estados seleccionados y variantes en modo oscuro. Son justo los lugares donde un «se ve bien» suele esconder una relación que no cumple.
Corrige una combinación que no cumple
Empieza cambiando la luminosidad sin perder el tono deseado. Oscurece el texto sobre superficies claras o acláralo sobre superficies oscuras. El verificador puede sugerir un color de texto AA cercano, pero una persona de diseño debe confirmar la jerarquía y el encaje con la marca.
El negro puro sobre blanco alcanza la relación máxima, pero no todos los párrafos necesitan el máximo contraste. Un texto casi negro puede resultar más cómodo y aun así cumplir AA con holgura.
Si un color de marca no cumple, no abandones el tono de inmediato. Prueba primero un tono más oscuro o más claro y comprueba si un color accesible cercano mantiene la identidad buscada.
No uses el contraste como única comprobación de accesibilidad. Los enlaces necesitan una señal que no sea solo el color, los indicadores de foco deben ser visibles y los estados deben incluir texto o iconos. Las pruebas con zoom y en móvil también revelan fallos de maquetación que una cifra no puede detectar.
Aplica estas mediciones al definir colores de texto en HTML y CSS.