Usar un analizador de contraste de color es fundamental si quieres que tu sitio web sea accesible para la mayoría de los visitantes.
Hacer que los sitios web sean accesibles es una parte fundamental del trabajo de un diseñador. Y un aspecto de la accesibilidad es garantizar que los colores del texto y del fondo tengan suficientes relaciones de contraste para que las palabras sean visibles y legibles.
Por qué deberías usar un analizador de contraste de color
Que tú puedas leer el texto no significa que la mayoría de la gente pueda hacerlo. Tu relación de contraste de color debe hacer que el texto sea legible para visitantes con baja visión, discapacidades visuales y diferentes tipos de daltonismo.
Las Pautas de Accesibilidad para el Contenido Web (WCAG) especifican una forma de calcular el contraste entre el color del texto y el color del fondo. Las pautas designan criterios de éxito para diferentes niveles de WCAG: AA (mínimo), nivel AAA (mejorado) y calificaciones de fallo.
Desafortunadamente, no puedes comprobar la relación simplemente mirando los colores; necesitarás una herramienta de análisis de contraste de color que proporcione niveles de contraste para texto normal, texto grande, objetos gráficos y componentes de interfaz de usuario. Herramientas como WebAIM te permiten introducir códigos hexadecimales para los colores de primer plano y de fondo para asegurar que tus diseños cumplan con los requisitos de contraste de color de las WCAG.
Por supuesto, buscar códigos de color hexadecimales o RGB cada vez que eliges un color puede resultar tedioso. Por eso hemos integrado la funcionalidad de comprobación de contraste de color directamente en Webflow.
Cómo y por qué creamos el analizador de contraste de color de Webflow
Se han creado muchas herramientas para poner esta información de contraste de color en primer plano durante el diseño, pero ninguna estaba fácilmente disponible para los diseñadores de Webflow. Existían como páginas web independientes, complementos e inspectores de páginas de navegador.
El ex diseñador de producto de Webflow, Darin Dimitroff, se inspiró en el comprobador de contraste de color de las herramientas para desarrolladores de Chrome. Decidió usar su "tiempo del diez por ciento" —las cuatro horas semanales asignadas a los empleados de Webflow para trabajar en proyectos soñados— para diseñar una herramienta de contraste de color directamente en Webflow.
Una vez que Darin tuvo un diseño básico, presentó una propuesta al ingeniero senior de frontend, Nick Gard. Los diseños de Darin, combinados con el conocimiento de Nick sobre el área del código que debía cambiarse, permitieron al equipo llevar esta idea a la fase de construcción.
Tomando la inspiración de Darin de la función de las herramientas para desarrolladores de Chrome, Nick profundizó en el código que impulsa esa implementación y aprendió de ahí lo que habría llevado semanas de prueba y error y refactorización de código.
Ninguno de los dos quería que el analizador de contraste de color se quedara solo como un producto mínimo viable (MVP). Así que, usando su tiempo del diez por ciento durante las semanas siguientes, escribieron pruebas, revisaron los diseños de la iconografía, animaron a sus colegas a probarlo y revisarlo, y finalmente lo llevaron al punto en que pudo ser lanzado.
Cómo usar el analizador de contraste de color en Webflow
Puedes calcular la relación de contraste de color de tu texto directamente desde el selector de color en Webflow.
Para comprobar la relación de contraste de tu texto:
- Selecciona el elemento de texto que quieres comprobar
- Abre el panel de Estilo > Tipografía
- Haz clic en la muestra de color del elemento de texto para abrir el selector de color
En el selector de color, verás una relación de contraste de nivel AA, nivel AAA o error. También puedes arrastrar el cursor por el cuadro de color para ver qué áreas cumplen con los criterios de éxito y cuáles no.
Empieza a usar el analizador de contraste de color para crear sitios web más accesibles
Para obtener más información sobre las relaciones de contraste de color, consulta la lección sobre contraste de color de Webflow University.
Si quieres saber más sobre cómo hacer que tu sitio web sea más accesible, echa un vistazo a nuestra lista de verificación de accesibilidad. Y si te apasiona mejorar la forma en que construimos para la web, considera unirte a nuestro equipo.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
