Colores accesibles: el contraste WCAG explicado

Por qué importa el contraste

Millones de personas tienen baja visión, daltonismo o simplemente leen el móvil a pleno sol. Un texto gris claro sobre blanco puede parecer elegante en el monitor del diseñador y ser ilegible para buena parte de los usuarios. Las pautas WCAG definen un mínimo medible para que eso no ocurra.

Qué significa 4,5:1

La relación de contraste compara la luminancia relativa de dos colores y va de 1:1 (el mismo color) a 21:1 (negro sobre blanco). Las pautas WCAG 2.x establecen:

• AA, texto normal: al menos 4,5:1.
• AA, texto grande (unos 24 px, o 19 px en negrita): al menos 3:1.
• AAA, texto normal: al menos 7:1.
• Componentes de interfaz y gráficos (bordes de campos, iconos): al menos 3:1 frente a lo que los rodea.

Errores frecuentes

• Texto sobre colores medios: un violeta o un azul de saturación media tiene poco contraste tanto con blanco como con negro.
• Placeholders grises usados como única etiqueta: suelen estar por debajo de 4,5:1 y además desaparecen al escribir.
• Transmitir información solo con color, como un campo en rojo sin mensaje: quien no distingue el rojo no se entera. Añade siempre texto o un icono.
• Comprobar solo el tema claro: el tema oscuro necesita sus propios colores, no los mismos invertidos.

Cómo construir una paleta accesible

Parte de tu color de marca y genera variaciones de luminosidad: los tonos muy claros sirven de fondo y los muy oscuros de texto. Reserva los colores medios para elementos grandes o decorativos. Antes de dar por buena una combinación, comprueba su relación de contraste con una herramienta en lugar de fiarte del ojo.

Nuestro generador de paletas indica, para cada color, si se lee mejor con texto blanco o negro y si cumple AA, y el comprobador te deja validar cualquier pareja de texto y fondo.