Con el creciente interés por la accesibilidad web, a través de nuestros servicios de diagnóstico de accesibilidad hemos seguido desarrollando herramientas que facilitan los diagnósticos, con el lema «más sencillo y más claro».
Como primer paso, lanzamos la extensión de Chrome Area Contrast Checker.
Antecedentes del desarrollo
Los verificadores de contraste tradicionales se dividen, a grandes rasgos, en tres tipos, cada uno con sus ventajas y desventajas.
- Escaneo automático
Es eficiente, ya que extrae los datos de toda la página de forma mecánica, pero tiende a generar falsos positivos y a pasar por alto errores cuando el fondo es una imagen o un degradado. - Selector de color (cuentagotas)
Permite medir con precisión el color tal como se ve, pero su inconveniente es que, al extraerlo punto por punto de forma manual, el trabajo requiere mucho tiempo. - Selección de elementos
Es sencillo, ya que consulta directamente la información de HTML/CSS, pero no permite analizar imágenes y, en ocasiones, no obtiene correctamente el estado de renderizado real, como las superposiciones de elementos o la transparencia.
El desarrollo surgió de una pregunta planteada en el terreno: «¿No existirá un método que sea sencillo, preciso y que funcione en cualquier lugar?».
Un cuarto enfoque sin precedentes
Como respuesta a esa pregunta, nace el "análisis de área", un cuarto enfoque en Area Contrast Checker.
Seleccione la zona que desea analizar arrastrando el cursor sobre ella. La herramienta analiza los píxeles de esa área y detecta automáticamente los dos colores: el de fondo y el de primer plano. Como el análisis se basa en lo que el usuario ve realmente en pantalla, funciona sin importar superposiciones de elementos y también permite inspeccionar imágenes.
Basta con arrastrar sobre cualquier punto que le interese para comprobarlo de forma sencilla.
Funciones principales
▪️Evaluación de conformidad con WCAG 2.1 / 2.2
Según los criterios de éxito 1.4.3, 1.4.6 y 1.4.11, evalúa la relación de contraste del texto normal (AA: 4,5:1; AAA: 7:1), del texto grande (AA: 3:1; AAA: 4,5:1) y de los componentes de la interfaz (AA: 3:1).
▪️Compatibilidad con APCA, la norma de próxima generación
Incluye compatibilidad con APCA (Accessible Perceptual Contrast Algorithm), un nuevo criterio de contraste en estudio para WCAG 3.0. Muestra al instante hasta qué tamaños de fuente cumple el contraste (valor Lc).
▪️Sugerencias de color que conservan el tono
Cuando la relación de contraste no es suficiente, propone colores similares que cumplen el criterio manteniendo el tono (Hue) del color original.
▪️Funciones avanzadas para profesionales
• Compatible con los formatos de color HEX, RGB y HSL.
• Si desea ajustar el resultado de la detección automática, puede volver a seleccionar el color píxel a píxel con el cuentagotas.
• Disponible en japonés e inglés.
Descargar Area Contrast Checker aquí
En Liberogic nos proponemos que la accesibilidad sea una calidad habitual, y no un tratamiento especial.
Hemos incluido en esta herramienta las ideas que hemos ido recogiendo en el trabajo de desarrollo web y en los diagnósticos de accesibilidad. Seguiremos publicando herramientas para que la accesibilidad sea cada vez más cercana y más fácil de aplicar. ¡Esperamos que le sea de utilidad!
