Test de contraste de colores

en accesibilidad css publicado el 01 de abril 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 octubre de 2009

    este

  • Arkana

    27 de septiembre de 2011

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

¿Pensando en contratar mis servicios?

Lee esto

Algunos apuntes que te pueden resultar útiles:

  • Soy programador web y aunque me encantaría diseñar, no entra dentro de mis competencias. Para poder desarrollar una página web necesito el diseño gráfico final. Si no conoces a ningún diseñador te puedo recomendar alguno con el que haya colaborado y su trabajo me haya parecido bueno.
  • No soy especialista SEO, aunque uso reglas básicas y sentido común a la hora de estructurar el contenido lo que se traduce en una mejora en el posicionamiento.
  • Si es posible envíame toda la información que creas que necesite para presentarte un presupuesto. "Programar una web como esta" no es suficiente, no podré evaluar el coste porque no sabré que funcionalidades tiene. Necesito que me las especifiques.
  • Si el proyecto es de gran envergadura, seguramente que te pida cuál es tu presupuesto. La razón es que si se aleja mucho de lo que a primera vista considero puede costar, te contestaré enseguida que no es un trabajo que pueda hacer.
  • Si existe una fecha de entrega del proyecto, comunícamela. En función de mi disponibilidad te contestaré si es un trabajo que pueda hacer o no.

Para contactarme puedes usar el formulario de contacto.