Niquelao » Tillägg för colorChecker

» Extensión colorChecker Niquelao ¿Qué tal te ha quedado? 25 de mayo de 2008 por Rumoroso —> Accesibilidad web Extensión colorChecker Actualizado el 25 de mayo de 2008, por Rumoroso Antes de nada, aquí tienes el enlace a la extensión Extensión colorChecker y también en Firefox Add-ons .

Mediante esta extensión puedes comprobar si la combinación de dos colores es adecuada para su percepción visual según los requisitos de las WCAG 1 y WCAG 2 , empleando para ello el algoritmo que estas proponen. WCAG 1. Directriz 2. No confiar únicamente en el color.

2.2 Asegurarse de que las combinaciones de colores de primer plano y fondo ofrecen un contraste suficiente cuando las ve una persona con deficiencia de visión del color o cuando se visualizan en una pantalla en blanco y negro. [Prioridad 2 para imágenes, Prioridad 3 para texto]. WCAG 2. Directriz 1.4 Distinguible: Facilitar a los usuarios la visión y audición del contenido, incluyendo la separación entre primer plano y fondo.

1.4.3 Contraste (mínimo): La presentación visual del texto y de las imágenes de texto debe tener una relación de contraste de al menos 5:1, excepto en los siguientes casos: (Nivel AA) Texto grande: El texto a gran escala y las imágenes de texto a gran escala deben tener una relación de contraste de al menos 3:1; Incidental: El texto o las imágenes de texto que formen parte de un componente de interfaz de usuario inactivo, que sean puramente decorativos, que constituyan texto incidental en una imagen o que no sean visibles para nadie, no tienen ningún requisito mínimo de contraste.

Logotipos: El texto que forme parte de un logotipo o nombre de marca no tiene ningún requisito mínimo de contraste. 1.4.6 Contraste (mejorado): La presentación visual del texto y de las imágenes de texto debe tener una relación de contraste de al menos 7:1, excepto en los siguientes casos: (Nivel AAA) Texto grande: El texto a gran escala y las imágenes de texto a gran escala deben tener una relación de contraste de al menos 5:1; Incidental: El texto o las imágenes de texto que formen parte de un componente de interfaz de usuario inactivo, que sean puramente decorativos, que constituyan texto incidental en una imagen o que no sean visibles para nadie, no tienen ningún requisito mínimo de contraste.

Logotipos: El texto que forme parte de un logotipo o nombre de marca no tiene ningún requisito mínimo de contraste. Características de la extensión La extensión se muestra en un panel lateral y ofrece resultados tanto para condiciones normales de visión como para situaciones de dificultad en la percepción del color (protanopía, deuteranopía y tritanopía). Dado que el método incluido en las WCAG 2 se considera más preciso, este es el resultado que se muestra inicialmente por defecto. Mide la luminancia relativa de cada letra (a menos que todas sean uniformes) usando la fórmula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B donde R , G y B se definen como: si R sRGB <= 0.03928 entonces R = R sRGB /12.92 si no R = ((R sRGB +0.055)/1.055) ^ 2.4 si G sRGB <= 0.03928 entonces G = G sRGB /12.92 si no G = ((G sRGB +0.055)/1.055) ^ 2.4 si B sRGB <= 0.03928 entonces B = B sRGB /12.92 si no B = ((B sRGB +0.055)/1.055) ^ 2.4 y R sRGB , G sRGB y B sRGB se definen como: R sRGB = R 8bit /255 G sRGB = G 8bit /255 B sRGB = B 8bit /255 El carácter ”^” es el operador de exponenciación.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Nota: Para letras con aliasing, utiliza el valor de luminancia relativa encontrado a dos píxeles desde el borde de la letra. Mide la luminancia relativa de los píxeles de fondo inmediatamente adyacentes a la letra usando la misma fórmula.

Calcula la relación de contraste usando la siguiente fórmula. (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro del primer plano o del fondo, y L2 es la luminancia relativa del color más oscuro del primer plano o del fondo. Comprueba que la relación de contraste sea igual o superior a 7:1 El código de color puede introducirse tanto en formato hexadecimal (en forma abreviada o completa, y tanto con almohadilla como sin ella), como en RGB (pudiendo usar diferentes separadores entre los valores, como por ejemplo la coma o los dos puntos).

Ej: En hexadecimal se podría poner: #FC5 ó FC5 ó FFCC55 En formato RGB se podría poner: 231,28,197 ó 231:28:197 ó rgb(231,28,197) El uso de la extensión colorChecker se puede combinar con la extensión ColorZilla , pues esta permite seleccionar directamente desde el documento web (y copiar al portapapeles) el color que se quiera comprobar. Si se tiene dicha extensión instalada, colorchecker reconocerá su presencia. En este caso, pulsando Shift + Z ó Shift + X se activará el cuentagotas de ColorZilla y enviará de forma automática, bien el color de primer plano, bien el de fondo, a colorChecker para su análisis.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

El panel lateral se despliega desde el menú herramientas del navegador, o bien pulsando en el icono que se muestra en la barra de estado, e incluso, con la combinación de teclado alt + c . Si después de leer esto ya estás convencido de querer probar la extensión, aquí tienes nuevamente el enlace a la extensión colorChecker , que también podrás instalar desde Firefox Add-ons En la simulación para obtener los valores correspondientes a problemas en la percepción del color, el algoritmo empleado se basa en el descrito por Hans Brettel, Francoise Vienot y John Mollon en su artículo publicado en Journal of the Optical Society of America V14, #10 pp2647, y en la adaptación incluida en el módulo correspondiente del Gimp cuyos créditos corresponden a: Michael Natterer (mitch@gimp.org) Sven Neumann (sven@gimp.org) Robert Dougherty (bob@vischeck.com) Alex Wade (alex@vischeck.com) Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0 .

También podrías dejar un comentario , o enviar un trackback con la dirección http://www.niquelao.net/extension-colorchecker/trackback/ desde tu sitio. 1 comentario Firefox Add-ons (25 de mayo de 2008) […] Mediante esta extensión se puede comprobar si dos colores presentan suficiente contraste entre sí según los requisitos de las WCAG 1 y WCAG 2. […] Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0 .

También podrías dejar un comentario, o enviar un trackback desde tu sitio. Esta obra está bajo una licencia de Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.