¿Como saber si los colores que empleo en mi web o blog son accesibles?.
Las combinaciones de los colores de fondo y primer
plano han de tener suficiente contraste para ser percibidas por personas
con deficiencias de percepción de color o sobre pantallas en blanco y
negro. Dos colores ofrecerán una buena visibilidad si la diferencia en
brillo y en color entre ambos es mayor que cierto umbral establecido.
Según W3C las formulas a emplear en cada caso son:
Fórmula de Brillo de Color((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 debe ser mayor que 125.
Fórmula de Diferencia de Color(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 debe ser mayor que 500.
| Fondo | Texto | Diferencia brillo (>125) |
Diferencia color (>500) |
||
|---|---|---|---|---|---|
| #021791 | #ffffff | 224 | OK | 595 | OK |
| #021791 | #ffff66 | 206 | OK | 528 | OK |
| #021791 | #66ff33 | 155 | OK | 426 | NO |
Esto que a simple vista nos parece muy técnico, lo podemos simular a traves de un servicio on-line como JUICYSTUDIO (http://juicystudio.com/services/colourcontrast-es.php#contrast), que nos realiza los calculos necesarios para dedicir si se cumple o no la norma de accesibilidad.
Código HTML del color
Para poder utilizar el servicio anterior, necesitamos saber el codigo html del color que estamos empleando. Esto lo podemos saber de dos formas, mediante:
- tablas como las que puedes encontrar en esta web: http://www.coloreshtml.com/
- un servicio on-line que a través de un selector te muestre el código que le corresponde: http://html-color-codes.info/codigos-de-colores-hexadecimales/.
Simplemente basta con desplazar la barra de desplazamiento vertical para elegir el color y después hacer clic en el cuadro de colores a la izquierda para conseguir el Código de color HTML (no olvidar por # junto con el código de color, la notación correcta es: #D72828.
Otro servicio on-line, muy sencillo es W3SCHOOLS: http://www.w3schools.com/tags/ref_colorpicker.asp
Formato de los códigos HTML:
Cada código HTML comprende el símbolo «#» y 6 letras o números. Estos
números se expresan en el sistema de numeración hexadecimal. Van en pares de dos y representan la intensidad de los componentes rojo, verde y azul: 00 es el menos intenso y FF es el más intenso.
- Los dos primeros símbolos del código de color HTML representan la intensidad del color rojo. (#FF0000)
- El tercer y el cuarto número representan la intensidad del verde (#00FF00)
- El quinto y el sexto representan la intensidad del azul. (#0000FF)
Muchas gracias no sabia la mitad de las cosas comentadas y eso que tengo un blog desde hace años. Gracias chicos
ResponderEliminarBlog de trucos