Color

img

No debemos basarnos sólo en el color para transmitir información, piensa que usuarios ciegos o con daltonismo no podrán interpretar el contenido correctamente.

  • Consigue el suficiente contraste entre el contenido y su fondo.
  • Evita colores muy brillantes o demasiado claros.
  • No uses el color como único medio visual para transmitir información, por ejemplo, un daltónico no apreciará bien el borde rojo de un input erróneo, una solución sería añadir un icono de error.

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

Uso del color

Gráficas

Si el usuario no es capaz de distinguir colores, no podrá interpretar correctamente esta gráfica:

Añadiendo texto informativo a los porcentajes solucionamos este problema.

Validación de campos

Avisos

Otro ejemplo es un listado de preguntas y respuestas.

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 *
  • Se considera texto grande a partir de 24px o 18px si es negrita

Estas normas de contraste también incluyen:

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

Quedan exentos:

  • Campos deshabilitados.
  • Logotipos.
  • Elementos ocultos.
  • Imágenes puramente decorativas.

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/