Extensión WCAG Contrast checker

Accesibilidad web

Extensión WCAG Contrast checker

Actualizado el 25 de Mayo de 2008, por Rumoroso

Antes de nada, aquí­ está el enlace a la extensión WCAG Contrast Checker en Firefox Add-ons.

Mediante esta extensión se puede comprobar si la combinación de dos colores resulta 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 4.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 como caracterí­stica destacada está el que puede analizar la combinación de dos colores introducidos por el usuario o bien analizar todas las combinaciones de colores de primer plano y fondo que tiene un documento web. Al realizar el análisis reconoce el tamaño de la fuente e indicar si se alcanzan o no los niveles mí­nimos establecidos por las WCAG, tanto en su versión 1.0 como en la 2.0.

Si se introducen manualmente los colores, se puede utilizar tanto formato hexadecimal (en forma abreviada o no, y tanto con almohadilla como sin ella) como RGB (pudiendo usar diferentes separadores entre los valores, como por ejemplo la coma o los dos puntos). Por ejemplo:

• En formato 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 WCAG Contrast checker 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, WCAG Contrast checker 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 WCAG Contrast checker 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, la 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)