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)
Extensión WCAG Contrast checker
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/wcag_contrast_checker/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.
5 comentarios
[…] Mediante esta extensión se puede comprobar si dos colores presentan suficiente contraste entre si en base a los requerimientos de las WCAG 1 y WCAG 2. […]
Hola. Antes de nada, buen trabajo. Me parece práctica la extensión. Cuando la instalé no tenía el mismo icono que ahora se muestra. También utilizo el Color Contrast Analizer y creo que entre ambas se puede conseguir controlar bastante bien el contraste entre colores.
Una pregunta: El selector de color, cuando lo paso sobre una imagen, muestra un color de primer plano y otro de fondo, pero el primero no necesariamente coincide con el de la imagen. ¿A qué se debe?
Cal
Hola Carolina. Gracias por tus palabras.
Lo que preguntas es correcto. El color que se selecciona con la herramienta “selector de texto” es el del texto y su fondo, con lo que si se trata de una imagen, seleccionará el color de fuente que tiene asignada esta, es decir, el que hereda y que se vería aplicado al texto alternativo. El color del fondo es el del elemento que contiene al texto. Si este es transparente, recorre el árbol del documento hacia arriba buscando el ancestro con color de fondo declarado. Si finalmente no lo encuentra, le asigna el color blanco.
Por otro lado, si utilizas también la extensión Colorzilla, podrás seleccionar el color pixel a pixel, con lo que es el complemento ideal para ella. Recuerda que para seleccionar el color de primer plano o el de fondo con el colorzilla y mandarlo directamente a la extensión, deberás utilizar la combinación de teclado que menciono en el artículo.
Si tienes más consultas, no dudes en planteármela.
Un saludo y gracias
Download error from addons.mozilla.org…
Hi rumoroso,
I’m the author of an accessibility tool who just discovered your
wonderful extension. Could you please contact me by email?
(gmazzocato@gmail.com)