Test de contraste de colores

in accesibilidad css published the 01 de April de 2006

Para que una página web sea accesible para personas que padecen una discapacidad visiva como los que tienen dificultades de percepción cromática, necesita, entre otras cosas, que el contraste entre colores sea elevado. El Consorcio de la World Wide Web sugiere un algoritmo para determinar si el color del primer plano y el color de fondo son accesibles. Para ello se basa en dos parámetros, la diferencia de brillo y la diferencia de color. Si los dos superan un valor límite entonces se considera que ofrecen una buena visibilidad.

Esta utilidad te puede resultar útil a la hora de determinar si los colores utilizados en una página son conformes a las recomendaciones del W3C. Para ello simplemente entra el código HTML del color de fondo y del color de letra. Como se indica, el límite para la diferencia de color es 500, mientras que para la diferencia de brillo es 125. Si el resultado del test es un semáforo en verde, es que los colores son accesibles. Si el resultado es un semáforo en amarillo, es que uno de los dos parámetros no es válido. Si el resultado es un semáforo en rojo es que ambos valores están por debajo del umbral.

#
#

Diferencia de brillo (>= 125): 255
Diferencia de color (>= 500): 765

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porttitor lorem et est. Quisque venenatis ullamcorper dui. Nulla tristique est sit amet odio. Aliquam nunc orci, mattis non, luctus ac, volutpat id, metus.

Como se puede comprobar la combinación de colores "posibles" disminuye drásticamente pero esto no significa que siempre nos tengamos que limitar a este rango de colores. Al fin y al cabo, esto siempre va a depender de los requerimientos que tengamos a la hora de diseñar la página. Lo que si que está pasando en otros paises como el Reino Unido es que muchos sitios oficiales están creando estándares de accesibilidad y toda página que se publique debe seguirlos. Sino, no se publica. Es de suponer que aquí ocurra lo mismo en poco tiempo.


2 comentarios

  • pedro

    20 de October de 2009

    este

  • Arkana

    27 de September de 2011

    Muy buena aplicación, y rápida, lástima que los comentarios hayan sido tomados por los spammers...

Thinking of hiring my services?

Read this

Some notes you might find useful:

  • I'm a web programmer and although I would love to design, it doesn't fall within my competences. To be able to develop a website I need the final graphic design. If you don' know a designer I can recommend you any I have worked with and I though their work was good.
  • I'm not a SEO specialist, although I use basic rules and common sense when structuring content which translates in a better ranking.
  • If possible, send me all the information you think I might need to give you a quote. “To program a website like this one” isn't enough, I won't be able to evaluate its cost as I won't know its functionalities. I need you to specify them.
  • Depending on the scope of the project, I might ask you your budget.
  • Tell me if you have a deadline. Depending on my availability I'll tell you if it's a job I can do or not.

To contact me you can use the contact form.