Blog de Beatriz Mateo Mendaza

Análisis de contraste de color según WCAG 2.0

Recientemente he descubierto una extensión de firefox llamada WCAG Contrast Checker, la cual permite comprobar el contraste existente entre los colores de fondo y primer plano siguiendo las especificaciones WCAG 2.0 y 1.0.

Como comenta el autor en su web, la herramienta realiza un análisis tanto para una visión normal como para distintos problemas de visión:

  • protanopia (carencia de sensibilidad al color rojo)
  • deuteranopia (carencia de sensibilidad al color rojo)
  • tritanopia (carencia de sensibilidad al color azul)

Además es posible utilizarlo junto con la extensión ColorZilla de Firefox, para poder seleccionar los colores del sitio web mediante el uso de la herramienta de cuentagotas.

Tal y como se explica en las pautas WCAG 2.0 hemos de basarnos en los siguientes criterios a la hora de asignar colores a la web:

Pauta 1.4 Distinguible: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.

  • 1.4.1 Uso del color: El color no se usa como único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. (Nivel A)
  • 1.4.3 Contraste (mínimo): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos: (Nivel AA)
    • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.
    • Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.
    • Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.
  • 1.4.6 Contraste (mejorado): La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos. (Nivel AAA)
    • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 4.5:1.
    • Incidental: Los textos o imágenes de texto que forman parte de un componente de la interfaz de usuario inactivo, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.
    • Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.
{lang: 'es'}

Escribir un Comentario

Tu email no será desvelado. Los campos obligatorios están marcados con un *

*
*
[CSS Válido]

Switch to our mobile site