Los colores de su marca tienen un fuerte impacto emocional, pero ¿cómo los ven los visitantes del sitio que son deficientes visuales, daltónicos o se enfrentan a factores ambientales que dificultan la visibilidad?
Los niveles de color y contraste son fundamentales para la comunicación, y lograr que estos detalles sean perfectos es fundamental para el diseñador preocupado por la accesibilidad”.
Los trastornos de la percepción del color son más comunes de lo que piensas. Entonces, en esta publicación, hablaremos sobre cómo las personas con discapacidades como baja visión, dislexia y daltonismo interactúan con la web.
Índice del contenido
¿Cómo uso un verificador de color para mejorar la accesibilidad de mi sitio web?
Esta sección es bastante sencilla, aunque requiere algo de esfuerzo. Deberá utilizar la herramienta Contrast Checker en línea de WebAIM. WebAIM es una organización sin fines de lucro con sede en la Universidad Estatal de Utah con la misión de mejorar la accesibilidad web en todo el mundo.
Simplemente ingrese su color de primer plano (por ejemplo, el color de su texto o íconos) y el color de fondo como valores hexadecimales (también conocidos como valores hexadecimales), como se especifica en HTML o CSS, y el verificador de relación de contraste le informará si la relación es suficiente. Recuerda que la relación de contraste mínima que debes buscar es de 4.5 a 1. El texto negro sobre fondo blanco tiene una relación de contraste de 21 a 1, por lo que tienes un gran margen de maniobra.
5 herramientas para crear una paleta de colores web que todos puedan ver
1. Comprobador de contraste de color WebAIM
Ingrese los colores hexadecimales para el primer plano y el fondo. El resultado muestra el cumplimiento AA y AAA para texto normal y grande, junto con una oración de muestra. Los controles deslizantes te permiten cambiar cosas hasta que encuentres una buena combinación.
Ventajas
- Herramienta sencilla con una interfaz agradable a la vista.
- Esta es una herramienta agradable y sencilla para principiantes y no solo para diseñadores.
Debilidades
- No se pueden comparar más de dos colores, sólo dos.
- El control deslizante de luminosidad no es una muy buena forma de elegir colores. Es difícil decir qué tan atractivos son los colores en esta sencilla pantalla.
2. Comprobador de contraste para WCAG
Ingrese los colores hexadecimales para el primer plano y el fondo. Muestra el cumplimiento de AA y AAA para texto normal y grande junto a una muestra de texto de Lorem Ipsum. También podrías subir una foto. Se elige automáticamente una paleta de 9 colores. Luego, puede comparar cada color como color de primer plano o de fondo.
Ventajas
- Herramienta sencilla con una interfaz fácil de usar.
- Tener la capacidad de realizar paletas a partir de imágenes.
Debilidades
- La paleta se elige automáticamente y puedes cambiarla más con el selector de color, pero esos cambios no se guardan en la paleta. Se debe copiar y pegar la información en un nuevo documento.
3. Cubo de colores
Ingrese los colores de la paleta, cada uno en su propia línea. El resultado muestra letras de muestra con relaciones de contraste en comparación con los estándares AA para fuentes pequeñas y grandes. Tres columnas muestran el contraste con un fondo blanco, un fondo negro y un conjunto de colores de la marca que son los "más legibles entre los disponibles".
Ventajas
- Agradable a la vista La interfaz de usuario (UI) está bien organizada y el estado de aprobación/fallo/borde es fácil de ver.
Debilidades
- No cumple con los estándares establecidos por AAA.
- No hace todas las combinaciones de colores posibles y al principio no está claro que este sea el caso.
4.) Cuadrícula de contraste de ocho formas
Introduzca los colores de la paleta. Además, puedes darle un nombre a cada color. La aplicación crea una tabla con todas las combinaciones posibles de colores. Hay tres tamaños de fichas. Hay señales visuales para AA y AAA pasa/falla/borde y relación de contraste efectiva. Las columnas y filas se pueden mover en la aplicación arrastrándolas y soltándolas. Los datos tabulares se pueden guardar, exportar y compartir.
Ventajas
- Hay muchas funciones útiles que ayudan con el análisis de paletas completas.
Debilidades
- Es más difícil de aprender que otras herramientas que son más fáciles de usar.
- No es la forma correcta de comparar solo dos colores.
- No es bueno para descubrir cómo combinan los colores.
- Es un poco abrumador a la vista, pero se muestra mucha información.
5. Color seguro
Escriba el color de fondo. Elija la familia, el tamaño y el peso de la fuente. Elija AA o AAA como estándar. Muestra el color seleccionado y su código hexadecimal, así como una muestra y la relación de contraste efectiva. Las miniaturas grandes de posibles colores de primer plano con suficiente contraste son la mejor parte. Puede optar por verlos todos o solo ciertos grupos de colores (verdes, azules, morados, etc.)
Ventajas
- Con una interfaz agradable a la vista, es fácil encontrar una combinación de colores que se vea bien y funcione bien.
- Esta es una herramienta útil si aún no tienes una paleta de colores de marca o si quieres agregar una que ya tienes para la web.
Debilidades
- Sólo puedes comparar los colores de primer plano y de fondo a la vez.
- Tienes que copiar y pegar colores en un documento separado si quieres guardarlos.
- ¡Sal y haz cosas para todos!
Una vez que sepa cómo utilizar estas herramientas, es posible que necesite más de una para un proyecto. Quizás Color Cube sea la mejor manera de mostrarle a un cliente lo que ha aprendido sobre accesibilidad. Tal vez utilice la herramienta de WebAIM todo el tiempo para realizar comprobaciones rápidas al azar.
Conclusión
Con los consejos, pautas y herramientas de las que acabamos de hablar, puede darle a su sitio web colores y etiquetas de alto contraste. Esto facilitará que las personas con baja visión, dislexia y daltonismo lean su sitio web y su contenido. No se sorprenda si a su público general también le resulta más fácil utilizar su sitio web.
