Contraste de color

¿Qué es el contraste de color?

El contraste de color es la diferencia de luminancia entre dos colores, casi siempre el texto y el fondo que tiene detrás. Se mide como una ratio, desde 1:1 para dos colores idénticos hasta 21:1 para negro puro sobre blanco puro. Cuanto más alta es la ratio, más fácil se lee el texto, sobre todo para personas con baja visión, daltonismo o cualquiera que entorne los ojos ante una pantalla a pleno sol.

La WCAG fija umbrales concretos. En el nivel AA, el texto de cuerpo normal necesita una ratio de contraste de al menos 4,5:1, y el texto grande necesita 3:1. El nivel AAA los sube a 7:1 y 4,5:1. Las reglas también cubren los elementos interactivos y los gráficos con significado, así que el borde de un botón o un icono que transmite información tienen que cumplir un mínimo. El texto gris claro sobre fondo blanco es el fallo clásico: queda elegante en un mockup y se vuelve ilegible para una parte real de la audiencia.

El contraste no es solo una regla de accesibilidad. Es una de las herramientas principales de la jerarquía visual, la que guía la mirada hacia lo que importa primero. Los diseñadores comprueban las ratios con verificadores de contraste mientras eligen las paletas, porque un color que falla en el tamaño de texto más pequeño aún puede funcionar en un titular grande. Acertar significa que el diseño parece intencionado y sigue siendo usable para todos.

El contraste de color en Dallonses

Comprobamos el contraste mientras diseñamos, no después de que un tester lo marque. Las paletas se prueban contra las ratios WCAG antes de llegar a una pantalla, así que los colores de los que un cliente se enamora son colores que de verdad funcionan fuera. Detectar una combinación que falla en la fase de diseño es barato. Detectarla tras el lanzamiento significa rehacer un producto en producción.

El contraste es uno de los puntos donde nuestro diseño de interfaces de usuario y el diseño web accesible se solapan por completo. Tratamos los umbrales WCAG como un suelo y luego usamos el contraste de forma deliberada para construir jerarquía y foco. El resultado se lee con claridad para alguien con vista perfecta y para alguien sin ella. Un buen contraste es simplemente buen diseño que además resulta inclusivo.

¿Una paleta preciosa que nadie puede leer? Hagamos que funcione para todos.

Hablemos de UI