Crear activos accesibles: Color y contraste
El color y el contraste desempeñan un papel clave en la forma en que los usuarios perciben tu contenido e interactúan con él. Para cumplir las normas de accesibilidad, es importante garantizar un contraste suficiente entre el texto y el fondo, evitar confiar únicamente en el color para transmitir el significado y elegir paletas que favorezcan la legibilidad para todos los usuarios. Este artículo te guía a través de las mejores prácticas para utilizar el color y el contraste con el fin de crear experiencias web inclusivas y accesibles.
Para asegurarte de que tu sitio web, página de destino, formulario o mensaje cumple los requisitos de accesibilidad, utiliza la lista de comprobación disponible aquí.
Requisitos
- El texto pequeño (menos de 18pt de fuente normal (24 píxeles CSS) o 14pt de fuente negrita (19 píxeles CSS)) debe tener una relación de contraste de al menos 4,5:1 con el fondo.
- El texto grande (igual o superior a 18pt o 14pt en negrita) debe tener una relación de contraste de al menos 3:1 con el fondo.
- La regla del contraste también se aplica a las imágenes de texto, aunque es mejor evitar utilizar imágenes para el texto.
- El contraste de los controles de la IU y de los elementos que no sean texto (como la palanca, la casilla de verificación, etc.) con el fondo debe ser de 3:1.
- El contraste de todos los indicadores visuales de enfoque (por ejemplo, el hover sobre un botón) respecto al fondo debe ser de 3:1.
- Los objetos gráficos como un icono independiente, un gráfico o una imagen tienen un contraste mínimo de 3:1 entre el elemento y su fondo.
- Cualquier información mostrada a través del color necesita una alternativa de texto que un programa pueda entender.
- Proporciona siempre una alternativa visible, como texto o una imagen, para cualquier información transmitida mediante color.
La mejor forma de comprobar si el diseño es independiente del color es mediante una prueba de escala de grises. Esto te permitirá comprobar si todos los elementos importantes desde el punto de vista del usuario son visibles y si requieren ajustes.
Ejemplos
 | HACER: Un contorno más oscuro marca el paso actual del usuario en el flujo. Observando la escala de grises de esta vista, una solución de este tipo permitiría a un daltónico obtener información sobre el punto del proceso en el que se encuentra. |
  | HACER: Los datos de los gráficos pueden distinguirse unos de otros añadiendo formas a las líneas. Observando la escala de grises de esta vista, dicha solución permitiría a un daltónico obtener información sobre los datos. |
  | HACER: El texto debe estar sobre un fondo con una relación de contraste de 4,5:1. NO HACER: No utilices un color de fondo para el texto por debajo de una relación de 4,5:1. |