Niquelao

¿Cómo dices que te ha quedado?

Accesibilidad web

Extensión colorChecker

Actualizado el 25 de Mayo de 2008, por Rumoroso

Antes de nada, aquí está el enlace a la extensión Extensión colorChecker y también en Firefox Add-ons.

Mediante esta extensión se puede comprobar si la combinación de dos colores es adecuada para su percepción visual en base a los requerimientos de las WCAG 1 y WCAG 2, empleando para ello el algoritmo que estas proponen.

WCAG 1. Guideline 2. Don’t rely on color alone.

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].

WCAG 2. Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 5:1, except for the following: (Level AA)

• Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are incidental text in an image, or that are not visible to anyone, have no minimum contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

• Large Print: Large-scale text and images of large-scale text have a contrast ratio of at least 5:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are incidental text in an image, or that are not visible to anyone, have no minimum contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Características de la extensión

La extensión se muestra en un panel lateral, y ofrece los resultados tanto para condiciones normales de visión, como para las situaciones de dificultad en la percepción del color (Protanopia, Deuteranopia y Tritanopia). Dado que se considera más preciso el incluido en las WCAG 2, este es el resultado que inicialmente se muestra por defecto.

1. Measure the relative luminance of each letter (unless they are all uniform) using the formula:

   L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

   • if R_sRGB <= 0.03928 then R = R_sRGB/12.92 else R = ((R_sRGB+0.055)/1.055) ^ 2.4
   • if G_sRGB <= 0.03928 then G = G_sRGB/12.92 else G = ((G_sRGB+0.055)/1.055) ^ 2.4
   • if B_sRGB <= 0.03928 then B = B_sRGB/12.92 else B = ((B_sRGB+0.055)/1.055) ^ 2.4

   and R_sRGB, G_sRGB, and B_sRGB are defined as:

   • R_sRGB = R_8bit/255
   • G_sRGB = G_8bit/255
   • B_sRGB = B_8bit/255

   The “^” character is the exponentiation operator.

   Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.

2. Measure the relative luminance of the background pixels immediately next to the letter using same formula.
3. Calculate the contrast ratio using the following formula.

   (L1 + 0.05) / (L2 + 0.05), where

   • L1 is the relative luminance of the lighter of the foreground or background colors, and
   • L2 is the relative luminance of the darker of the foreground or background colors.
4. Check that the contrast ratio is equal to or greater than 7:1

El código de código de color se puede introducir tanto en formato hexadecimal (en forma abreviada o no, 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 eyedropper del ColorZilla y enviará de forma automática, bien el color de primer plano, bien el de fondo, al colorChecker para su análisis.

El panel lateral se despliega desde el menú herramientas del navegador, o bien pulsando en el icóno 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í está 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 percepción de color, el algoritmo empleado se basa en el algoritmo 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 y 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.

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.