Cómo usar bien el contraste en tu marca
El contraste es la diferencia de luminosidad entre el texto y lo que tiene detrás. Cuando es bajo, el texto cuesta leerlo: en una pantalla con sol, en un celular con el brillo al mínimo o para cualquier persona con baja visión. Por eso las pautas de accesibilidad WCAG fijan un mínimo medible.
Qué significan AA y AAA
- AA, texto normal: 4,5 a 1. Es el mínimo recomendado para párrafos, menús, botones y formularios.
- AA, texto grande: 3 a 1. Vale para títulos de 24 px o más, o de 18,66 px o más en negrita.
- AAA: 7 a 1 y 4,5 a 1. Es el nivel más exigente. Conviene buscarlo en textos largos.
- Íconos y bordes de campos: 3 a 1. Los elementos gráficos que hacen falta para entender o usar algo también necesitan contraste.
Contraste y colores de marca
Muchas marcas tienen un color principal que funciona muy bien de fondo y muy mal como texto, como los amarillos y los celestes claros. La solución no es cambiar la marca: es definir en el manual qué combinaciones se usan para texto y cuáles solo para fondos, formas o detalles. Con dos o tres variantes más oscuras o más claras del mismo color suele alcanzar.
Lo que el número no mide
La relación de contraste no tiene en cuenta el grosor de la letra, el tamaño real en pantalla ni el daltonismo. Una tipografía muy fina necesita más contraste del mínimo. Y nunca uses solo el color para transmitir algo, como un error en un formulario: acompáñalo de un texto o un ícono.
Preguntas frecuentes
¿Cómo se calcula la relación de contraste?
Se compara la luminancia relativa de los dos colores con la fórmula de WCAG: (la más clara + 0,05) dividido (la más oscura + 0,05). El resultado va de 1 a 1 (mismo color) a 21 a 1 (negro sobre blanco).
¿Qué nivel tengo que cumplir?
Para la mayoría de los sitios, el nivel AA: 4,5 a 1 en texto normal y 3 a 1 en texto grande. Es el que piden las leyes y normas de accesibilidad de muchos países.
¿Funciona con colores con transparencia?
No. Usa el color final que se ve en pantalla, con la transparencia ya aplicada sobre el fondo. Puedes tomarlo con el cuentagotas de tu navegador o de tu programa de diseño.
¿Guardan los colores que pruebo?
No. El cálculo se hace en tu navegador y no se envía nada.
Respuestas del equipo de AiDo Creative