¿Qué son las paletas de colores accesibles?

¿Qué es una paleta de colores accesible?

Una paleta de colores accesible es un conjunto de colores elegido para que el texto, los iconos y los elementos de interfaz tengan contraste suficiente con su fondo y para que el color nunca sea la única forma de transmitir significado. Así, personas con baja visión, daltonismo o una pantalla poco nítida pueden leer y usar la página. Las WCAG fijan los contrastes mínimos que debe cumplir una paleta.

Las reglas de contraste de las WCAG

• Texto normal (SC 1.4.3, nivel AA): al menos 4,5:1 frente al fondo.
• Texto grande (SC 1.4.3): al menos 3:1. Grande significa 18 puntos o más, o 14 puntos en negrita o más, unos 24 px y 18,5 px en CSS.
• Componentes de interfaz y gráficos (SC 1.4.11, nivel AA): al menos 3:1 frente a los colores adyacentes, por ejemplo el borde de un botón, un anillo de foco o una línea de gráfico necesaria para entender los datos.
• Contraste mejorado (SC 1.4.6, nivel AAA): 7:1 para texto normal y 4,5:1 para texto grande.
• Uso del color (SC 1.4.1, nivel A): el color no puede ser el único medio visual para transmitir información, como un error o un estado seleccionado.

Los controles desactivados, la decoración pura y los logotipos están exentos. Los detalles están en las páginas del W3C sobre 1.4.3 y 1.4.11. Consulta las WCAG para ver el estándar completo.

Cómo se calcula la relación

La relación de contraste es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia relativa es 0,2126 R + 0,7152 G + 0,0722 B tras linealizar cada canal sRGB. Los valores van de 1:1 a 21:1. Según las WCAG, los valores calculados no se redondean: 4,499:1 no alcanza el umbral de 4,5:1.

Ejemplos calculados sobre fondo blanco

Fíjate en que pasar de #767676 a #777777 cambia el resultado. Para elementos de interfaz, #949494 da 3,03:1 sobre blanco y cumple la regla de 3:1, mientras que #959595 da 2,995:1 y no la cumple.

Errores comunes

• Texto de ayuda o marcador en gris claro que se ve bien en tu monitor pero no llega a 4,5:1.
• Comprobar el color de marca solo sobre blanco. El hover, el modo oscuro y el texto sobre imágenes son combinaciones distintas.
• Texto sobre una foto o un degradado sin capa de apoyo, de modo que el contraste cambia a lo largo del texto.
• Mostrar errores o series de un gráfico solo en rojo y verde, sin icono, etiqueta ni patrón (SC 1.4.1).
• Olvidar bordes, iconos e indicadores de foco, que dependen de 1.4.11 y no de 1.4.3.

Cómo probar una paleta

Comprueba cada pareja de texto y fondo con un verificador de contraste y revisa después la página renderizada, porque la opacidad CSS y las capas cambian los colores reales. Los análisis automáticos detectan muchos fallos de contraste, pero el texto sobre imágenes y degradados suele requerir una revisión manual. Nuestra guía de herramientas de pruebas de accesibilidad web compara opciones, y la monitorización de velocidad de página sigue la puntuación de accesibilidad de Lighthouse a lo largo del tiempo, de modo que un cambio de color que rompa el contraste se note. Lecturas relacionadas: imágenes accesibles, tecnologías de asistencia y pruebas de accesibilidad automatizadas.

Preguntas frecuentes

¿Qué relación de contraste necesito para el texto del cuerpo?

Al menos 4,5:1 para WCAG AA (criterio de éxito 1.4.3). El texto grande necesita 3:1. El nivel AAA pide 7:1 para texto normal.

¿La regla de 3:1 se aplica a botones e iconos?

Sí. El criterio 1.4.11 exige 3:1 frente a los colores adyacentes para las partes de un control necesarias para identificarlo y para sus estados, y para los gráficos necesarios para entender el contenido. El texto dentro del botón sigue la regla del texto.

¿Un logotipo está exento de las reglas de contraste?

Los logotipos y nombres de marca están exentos de 1.4.3, pero no un logotipo que actúa como control ni una versión de bajo contraste elegida por el autor en lugar de exigida por la marca.

¿Puedo usar solo el color para mostrar un error?

No. Según el SC 1.4.1 hace falta otra señal, como texto, un icono o un patrón, porque algunas personas no distinguen los colores.

¿Debo probar el modo oscuro por separado?

Sí. Cada pareja de color de primer plano y fondo que pueda aparecer en pantalla tiene su propia relación, así que un tema oscuro necesita su propia comprobación.