La accesibilidad es la capacidad de acceder a la aplicación web/sitio web por parte de una amplia gama de audiencias, incluida una variedad de discapacidades.

• Si ha estado trabajando como desarrollador de software o acaba de comenzar su carrera como desarrollador en el campo del desarrollo web, puede estar seguro de que encontrará mucho esta terminología.
• Esto puede parecer inútil al principio como principiante, pero a medida que obtenga conocimientos y experiencia como desarrollador web, descubrirá que este es uno de los factores más importantes en el desarrollo de un sitio web.

Por ahora nos concentraremos en qué es el contraste de color y cómo solucionarlo.

Una breve introducción sobre los criterios de éxito de las WCAG.

1. Bueno, hay ciertas reglas/estándares para hacer una buena aplicación empresarial llamadas reglas WCAG que puede consultar aquí en detalle.
2. La relación de contraste de color entre el contenido de fondo y de primer plano (es decir, generalmente el texto) debe ser lo suficientemente grande como para garantizar la legibilidad (el usuario debe poder leer el texto con poca o ninguna dificultad).
3. En general, se espera que un sitio web siga los 1.4.3 Criterios de contraste mínimo. pero hacer un sitio web completo requiere que sigas los criterios de contraste mejorado 1.4.6. también.

La mejor herramienta para comprobar el contraste de color de un sitio web es utilizar el Comprobador de accesibilidad de Siteimprove . La versión gratuita es más que suficiente.

1. Ejecute esta extensión haciendo clic en el ícono de la barra de extensión mientras su sitio web está abierto.

3. Ahora haga clic en el título azul → y resaltará el elemento específico donde está fallando. (Crearé otro artículo detallado sobre cómo usar siteimprove más adelante).

4. Y desde allí puede buscar qué y por qué está fallando con los valores de relación de contraste adecuados.

Cómo analizar y corregir el contraste de color

1. En primer lugar, abra la pestaña de herramientas de desarrollador (si está en Chrome) haciendo clic con el botón derecho -> inspeccionar o CTRL+MAYÚS+I. Y haga clic en este pequeño ícono de flecha en la parte superior de la pestaña de herramientas de desarrollo y desplace el cursor sobre el elemento resaltado en la página.

3. Y para solucionar esto en tiempo real, simplemente puede inspeccionar ese elemento y cambiar su código de color (que generalmente es un código HEX en su mayoría) tomando el control deslizante de color como se muestra en el siguiente GIF.

4. ¿Notas cómo cambió la relación de contraste de 1,99 a 4,2✅ y 7,01✅✅?

5. Simple ✅ indica que se cumplen los criterios mínimos y Doble ✅✅ indica que se cumplen los criterios mejorados (siempre elija la marca de verificación doble para las aplicaciones empresariales).

6. Otra cosa que puede hacer es usar sitios externos para obtener la proporción correcta en tiempo real usando un sitio web similar a este .

Allí, acaba de aprender qué es el criterio de contraste de color y cómo solucionarlo. Y al hacerlo, dio un paso más en su experiencia de desarrollador. Deja un Me Gusta si esto te resultó útil.