Con el creciente interés en la accesibilidad web, hemos estado desarrollando herramientas que apoyan diagnósticos «más fácil y más claramente» a través de nuestros servicios de diagnóstico de accesibilidad.
Como primer paso, se lanzó la extensión de Chrome «Area Contrast Checker».
Antecedentes del desarrollo
Los verificadores de contraste tradicionales se dividen en tres tipos principales, cada uno con sus ventajas y desventajas.
- Tipo de escaneo automático
: Extrae mecánicamente de toda la página, lo que es eficiente, pero tiene la desventaja de que es propenso a falsos positivos y omisiones cuando el fondo es una imagen o gradiente. - Tipo de selector (cuentagotas)
: Puede medir con precisión los colores tal como se ven, pero requiere extracción manual de un punto a la vez, lo que aumenta el esfuerzo laboral. - Tipo de especificación de elementos
: Es fácil porque hace referencia directamente a la información de HTML/CSS, pero no puede inspeccionar imágenes y puede no capturar correctamente el estado de renderizado real, como superposición de elementos o transparencia.
El desarrollo comenzó con la pregunta surgida en el campo: «¿No habría una forma que sea fácil, precisa y pueda detectar en cualquier lugar?»
Un cuarto enfoque sin precedentes
La respuesta que tomó forma fue el «análisis de áreas», un cuarto enfoque en Area Contrast Checker.
Seleccione el área que desea analizar arrastrando el ratón. La herramienta analiza los píxeles dentro de esa región y detecta automáticamente dos colores: el color de fondo y el color de primer plano. Como se analiza la visualización real que ve el usuario, es posible inspeccionar imágenes sin que importe la superposición de elementos.
Simplemente arrastra sobre el área que te interesa para obtener los resultados al instante.
Características principales
▪️Evaluación de conformidad WCAG 2.1 / 2.2
Evalúa la relación de contraste basándose en los criterios de éxito 1.4.3, 1.4.6 y 1.4.11: textos normales (AA: 4.5:1, AAA: 7:1), textos grandes (AA: 3:1, AAA: 4.5:1) y componentes UI (AA: 3:1).
▪️Compatible con el estándar de próxima generación APCA
Soporta «APCA (Accessible Perceptual Contrast Algorithm)», el nuevo criterio de contraste en revisión en el borrador de WCAG 3.0. Muestra instantáneamente hasta qué tamaño de fuente es compatible (valor Lc).
▪️Sugerencias de color que mantienen el matiz
Cuando la relación de contraste es insuficiente, la herramienta propone colores aproximados que cumplen con los estándares manteniendo el matiz (Hue) del color original.
▪️Funciones avanzadas para profesionales
・Compatible con formatos de color HEX, RGB y HSL.
・Posibilidad de reseleccionar píxeles individuales con el selector de color si deseas ajustar los resultados de detección automática.
・Compatible con dos idiomas: japonés e inglés.
Descargar Area Contrast Checker aquí
En Liberogic, nuestro objetivo es que la accesibilidad no sea una "medida especial", sino parte de la "calidad estándar".
Hemos incorporado en esta herramienta todas esas ideas que surgieron en nuestro trabajo en desarrollo web y diagnósticos de accesibilidad: «sería genial si tuviera esto». Continuaremos lanzando herramientas para acercar la accesibilidad web y hacerla más fluida. Esperamos tu interés.
