Accesibilidad: colores y contrastes en la web

Leyendo EstadoBeta acabo de descubrir el muy interesante y muy útil Colour Contrast Analyser (en versión española) de Juicy Studio.

Como su nombre lo indica, trata del tema de la elección de los colores en la web, tanto de los textos como de los fondos. Permite calcular según unas formulas proporcionadas por el W3C dos factores, o índices: el Brillo de Color y la Diferencia de color.

El tema de la elección de los colores en las páginas web es un importante aspecto de la accesibilidad y es un criterio a veces demasiado descuidado por parte de los webmasters y diseñadores.

Para el primer índice, el de Brillo de Color, la formula que sugiere el W3C es:
( (valor de Rojo X 299) + (valor de Verde X 587) + (valor de Azul X 114) ) / 1000

La diferencia entre el brillo del fondo, y el brillo del primer plano debería ser mayor que 125.

Para la Diferencia de Color, la fórmula es:
(máximo (valor Rojo 1, valor Rojo 2) – mínimo (valor Rojo 1, valor Rojo 2) ) + (máximo (valor Verde 1, valor Verde 2) – mínimo (valor Verde 1, valor Verde 2) ) + (máximo (valor Azul 1, valor Azul 2) – mínimo (valor Azul 1, valor Azul 2) )

La diferencia entre el color de fondo y el color de primer plano debería ser mayor que 500.

Esta entrada fue publicada en Reciclado. Guarda el enlace permanente. Publica un comentario o deja un trackback: URL del Trackback.

Un Comentario

  1. Publicado: 13 de mayo de 2006 a las 20:48 | Permalink

    La verdad es que es un tema muy interesante, y como bien dices, muy descuidado en muchas ocasiones. Yo escribí al respecto hace ya bastante tiempo:

    armonia.spiral-static.org…

    Otra herramienta disponible para realizar los cálculos es:

    http://www.snook.ca/technical/co...

    Un saludo.

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

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