Niquelao » Extensie 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 dependas únicamente del color.

2.2 Asegúrate de que las combinaciones de colores de primer plano y fondo proporcionen un contraste suficiente cuando las vea alguien con deficiencias en la percepción del color o cuando se visualicen en una pantalla en blanco y negro. [Prioridad 2 para imágenes, Prioridad 3 para texto]. WCAG 2. Directriz 1.4 Distinguible: Facilita que los usuarios puedan ver y oír el 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 de gran tamaño: 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 dentro de 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 de gran tamaño: 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 dentro de 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) mediante 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 del fondo inmediatamente adyacentes a la letra usando la misma fórmula.

Calcula la relación de contraste mediante 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, con o sin almohadilla), como en RGB (pudiendo usar diferentes separadores entre los valores, como la coma o los dos puntos).

Ej.: En hexadecimal podrías poner: #FC5 ó FC5 ó FFCC55 En formato RGB podrías poner: 231,28,197 ó 231:28:197 ó rgb(231,28,197) El uso de la extensión colorChecker puede combinarse con la extensión ColorZilla , ya que esta permite seleccionar directamente desde el documento web (y copiar al portapapeles) el color que se desea comprobar. Si tienes dicha extensión instalada, colorChecker reconocerá su presencia. En ese caso, al pulsar Shift + Z ó Shift + X se activará el cuentagotas de ColorZilla y enviará automáticamente, 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 de 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 puedes 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.