Saltar al contenido principal

Color

Resumen para el uso de colores accesibles:

  • Consigue el suficiente contraste entre el contenido y su fondo.
  • Evita colores muy brillantes o demasiado claros.
  • No debemos basarnos solo en el color para transmitir información.

Los colores opuestos o complementarios son aquellos colores que se encuentran en una posición oponible dentro del círculo cromático.

Contraste​

  • Nivel A - min ratio 3:1
  • Nivel AA - min ratio 4.5:1 texto normal / min ratio 3:1 texto grande
  • Nivel AAA - min ratio 7:1 texto normal / min ratio 4.5:1 texto grande
Nota

Se considera texto grande a partir de 24px o 18px si es negrita

En la sección de recursos tienes herramientas para medir el contraste. 🌈

Estas normas de contraste también incluyen:

  • Placeholders.
  • Estados focus / hover.
  • Degradados, en este caso testamos el área de contraste más bajo.

Quedan exentos:

  • Campos deshabilitados.
  • Logotipos.
  • Banderas.
  • Elementos ocultos.
  • Imágenes puramente decorativas o fotografías.
Nota

No se recomienda usar negro puro #000000 sobre blanco puro #FFFFFF y viceversa, debido a que aumenta la fatiga visual ↗️

Color en gráficas​

  • Contrasta los colores entre los objetos de las gráficas.
  • Incluye líneas con suficiente contraste entre colores adyacentes.
  • Incluye etiquetas y valores con el gráfico.

Las personas con algún impedimento para distinguir colores, como por ejemplo un usuario daltónico, tendrá dificultades para interpretar una gráfica que diferencia sus datos solo por el color.

Como solución, podemos añadir sobre estos colores, etiquetas de texto o texturas que diferencian mejor los datos.

Si usamos mapas o gráficos circulares, mejoraremos el contraste añadiendo un contorno o líneas divisorias:

Validación de campos​

Al igual que las gráficas, no debemos usar solo el color para comunicar errores o transmitir información en formularios.

Por ejemplo, si para resaltar campos erróneos usamos un borde rojo, un usuario con protanopia ↗️ (carencia de sensibilidad al color rojo), no podría identificarlos correctamente.

Mejoramos la accesibilidad del formulario añadiendo iconos y mensajes informativos en los campos erróneos.

Utilidades​

Hay múltiples aplicaciones, herramientas online o extensiones de navegador que permiten analizar el contraste o nos ofrecen paletas adecuadas para nuestro sitio.

https://webaim.org/resources/contrastchecker/

https://contrast-checker.glitch.me/

En la sección de recursos también puedes encontrar aplicaciones útiles.