Comprobador de contraste

Cómo usar Comprobador de contraste

1. Elige el color del texto y el del fondo.
2. Consulta el ratio y los niveles que cumple.
3. Ajusta la luminosidad hasta alcanzar el nivel que necesitas.

Los umbrales de las WCAG

El ratio se expresa como una proporción, de 1:1 (idénticos) a 21:1 (negro sobre blanco).

Se considera texto grande a partir de 18 puntos, o de 14 puntos si está en negrita. En píxeles equivale aproximadamente a 24 px, o 18,66 px en negrita.

El nivel AA es el que exige la normativa. El AAA es un objetivo más ambicioso que no siempre es alcanzable manteniendo la identidad visual de una marca.

Los logotipos están exentos, igual que el texto puramente decorativo y los elementos de interfaz desactivados.

Un detalle que se pasa por alto: el requisito de 3:1 para componentes de interfaz afecta a los bordes de los campos de formulario, a los iconos con significado y a los indicadores de foco. Un borde gris claro sobre fondo blanco falla casi siempre.

Qué exige la normativa en España

Aquí el contraste deja de ser una cuestión de gusto.

El Real Decreto 1112/2018 traspone la directiva europea de accesibilidad de los sitios web y aplicaciones del sector público, y toma como referencia la norma EN 301 549, que a su vez remite a las WCAG en nivel AA.

Eso afecta a administraciones públicas y a entidades vinculadas, y también a servicios financiados con fondos públicos en muchos casos.

Además existe la obligación de publicar una declaración de accesibilidad y un mecanismo de comunicación para que cualquier persona pueda reclamar.

Por otro lado, la Ley de Accesibilidad europea amplía obligaciones a una serie de productos y servicios del sector privado, entre ellos el comercio electrónico, la banca y el transporte de viajeros. Muchas empresas que antes no estaban afectadas ahora lo están.

Las obligaciones concretas y los plazos dependen del tipo de entidad y del servicio, así que confirma tu caso con la normativa vigente o con asesoramiento especializado. Lo que no cambia es el criterio técnico: el nivel AA de las WCAG.

Y más allá de la norma, hay una razón práctica: alrededor de una de cada doce personas tiene alguna deficiencia en la visión del color, y muchas más leen en pantallas al sol o con la vista cansada.

Cómo arreglar un contraste insuficiente

Hay más margen del que parece sin destrozar el diseño.

Oscurece el texto en lugar de aclarar el fondo. Suele alterar menos la sensación general de la página.

Si el color de marca no llega, úsalo en elementos grandes — títulos, fondos de bloque, iconos de gran tamaño — y no en el texto de párrafo.

Aumentar la saturación no ayuda casi nunca; lo que cuenta es la luminancia. Dos colores muy saturados pueden tener un contraste pésimo entre sí.

Cuidado con el texto sobre imágenes: es el fallo más frecuente. Necesita una capa de color semitransparente detrás, o una sombra, o un recuadro sólido.

Y un caso especialmente descuidado: el texto de marcador de posición en los formularios, que suele ser gris muy claro. Si contiene información necesaria, tiene que cumplir el contraste igual que cualquier otro texto — y la información importante no debería estar solo ahí.

Comprueba también el modo oscuro por separado. Una paleta que cumple en claro puede fallar al invertirse, y el blanco puro sobre negro puro produce un deslumbramiento que muchas personas encuentran incómodo.

Preguntas frecuentes