Niquelao » Farvekalibreringstilføjelse

» 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 suficiente contraste 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 de gran tamaño y las imágenes de texto de gran tamaño 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 de gran tamaño: El texto de gran tamaño y las imágenes de texto de gran tamaño 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 se considera más preciso el incluido en las WCAG 2, este es el resultado que se muestra inicialmente por defecto. Mide la luminancia relativa de cada letra (a menos que todas sean uniformes) utilizando 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 utilizando 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 se puede introducir 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 , ya que esta permite seleccionar directamente desde el documento web (y copiar al portapapeles) el color que se quiera comprobar. Si tienes dicha extensión instalada, colorChecker reconocerá su presencia. En este caso, pulsando Shift + Z o 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 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.