Ir al contenido principal

¿Como saber si los colores que empleo en mi web o blog son accesibles?

¿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.
Ejemplos de fondo-texto
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:

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)

Comentarios

  1. Muchas gracias no sabia la mitad de las cosas comentadas y eso que tengo un blog desde hace años. Gracias chicos
    Blog de trucos

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Fluky.io: Tu "ruleta de la fortuna" personalizada

¡Hoooola a todos!
Hacía mucho que no escribía una entrada en la nube TIC, y ya tenía ganas. Hemos hablado de tantas herramientas, que ya casi no quedan sin repetir…
En esta ocasión voy a presentaros una web suuuuuúper sencilla y en mi opinión muy práctica: Fluky.io.


Son muchas las ocasiones en las que queremos hacer una elección aleatoria en clase (otras muchas nos interesa que la elección parezca aleatoria, pero no lo sea, jeje). Varios de los programas o apps que utilizamos en el aula tienen alguna opción que nos permite hacerlo: el software de la pizarra digital (Notebook, Active Inspire…), webs como ClassDojo, o la app que utilizamos como "cuaderno del profesor” (Additio, iDoceo, CuadernoProfesor…) por ejemplo. Pero esta que os presento hoy hace sencilla, exclusiva y perfectamente eso: elecciones aleatorias. Sin registros ni cosas raras.
Cuando entras en fluky.io, solo tienes que pulsar el botón “START” y aparecerá una barra a la izquierda en la que puedes añadir los nombres…

Asociar un código QR a un mapa de Google

Los códigos QR, ligados a los smartphones, se han puesto de moda. Cada vez es más frecuente su presencia en etiquetas de productos, anuncios, etc. En general, facilitan el acceso con el móvil a alguna página web, a datos personales o a algún mensaje. En ocasiones no aportan mucho valor añadido. Sin embargo, creo que pueden ser muy útiles para el mundo educativo si los usamos adecuadamente. 
El presente artículo es un ejemplo de un posible uso para trazar itinerarios que tengamos que organizar fuera de nuestro centro, rutas literarias, salidas culturales, itinerarios, etc. También podría servir para informar a las familias.


1. En primer lugar crearemos un mapa y lo guardaremos. 




A éste efecto podéis consultar el post Mapas tuneados con Google Maps que publicó el Sr. Ruiz el día 15 de marzo. Tened en cuenta que, con el programa, según la situación geográfica, la ruta puede programarse a pie, en bicicleta, en coche o en transporte público. Los mapas pueden crearse de forma colaborativa, lo …

5 Características Interesantes de Google Slides

Google Slides es una de las herramientas preferidas hoy en día para crear presentaciones online. La plataforma basada en la nube, accesible online y de forma gratuita, hacen que sea una de las herramientas preferidas por educadores.

Aquí te presentamos algunas características de Google Slides que en muchos casos pasan desapercibidas pero que pueden ser muy útiles a la hora de editar o crear presentaciones.
1. URL de atajo para crear presentaciones Se pueden crear presentaciones de muchas maneras, accediendo a slides.google.com y dándole click a nueva presentación, o bien por medio de Google Slides. Otra forma interesante de crear presentaciones es con una URL directa.

https://slides.google.com/create

Esto es muy útil si queremos agregar un bookmark en nuestro navegador para que al dar click podamos abrir una presentación en blaco y comenzar a editarla.
2. Insertar Videos de YouTube Una característica particular de Google Slides es la de permitir insertar videos en las presentaciones. S…