WCAG: Validar luminosidad, contraste y brillo con Firefox

Accesibilidad web

Extensión Contrast checker

Antes de nada, aquí­ está el enlace a la extensión 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).

1 2 3

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 analiza de forma automática la combinación de color de primer plano y fondo de todos los elementos que constituyen la página 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.

Además, también se pueden introducir manualmente los colores, pudiendo utilizar formato hexadecimal (en forma abreviada o no, con o sin almohadilla) o RGB. 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)

Recientemente le he añadido un par de funcionalidades adicionales. Por un lado, ahora incluye la posibilidad de detectar el color directamente sobre la página web moviendo el ratón por esta. Además, de forma indirecta pude añadirle un botón que permite descargar una captura de la página web completa.

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

13 respuestas a WCAG: Validar luminosidad, contraste y brillo con Firefox

  1. […] 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. […]

  2. Carolina dijo:

    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

  3. Rumoroso dijo:

    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

  4. Benoit dijo:

    Download error from addons.mozilla.org…

  5. Giacomo Mazzocato dijo:

    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)

  6. Pingback: Análisis de contraste de color según WCAG 2.0 | Beatriz Mateo Blog

  7. Pingback: Accessibilité : 12 outils pour évaluer un site | Web Intention

  8. Pixalion dijo:

    Great module….
    But a color picker on image will be useful for webdesigner that work on JPG…

  9. hyeongmin dijo:

    Thanks about your very useful module,
    But I think, I find little bug in Document Test mode. It warn just default select tag and option tag. I think it recognize firefox’s default selected option style.
    Sorry about my terrible english.

  10. Pingback: Links from the “Creating an Accessible Layout” Webinar | JTF Associates, Inc.

  11. Pingback: Actualización de WCAG Contrast Checker | Niquelao

  12. Dmitry dijo:

    WCAG Contrast checker 1.4.3
    element
    {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.10);
    }
    Luminosity=1 (no contrast)
    But this can be wrong, if parent element is not white, because of transparency.
    Thank you!

  13. Rumoroso dijo:

    Hi Dmitry,
    The problem is the extension evaluates the color but It does not get the opacity value from the rgba color. I will try to make a better estimate and will update the extension.
    Regards

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>