Saltar al contenido principal

Color

img

  • Consigue el suficiente contraste entre el contenido y su fondo.
  • Evita colores muy brillantes o demasiado claros.
  • No debemos basarnos s贸lo 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

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.
  • Banderas.
  • Elementos ocultos.
  • Im谩genes puramente decorativas o fotograf铆as.
tip

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 s贸lo 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.