¿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:

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)

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 pu

Fin del proyecto "En la nube TIC"

Llegó el día del “hasta siempre”… Nunca pensé en este momento, en cómo despedir un proyecto que ha estado tan presente en la última década de nuestras vida. 10 años es mucho tiempo para cualquier proyecto educativo colaborativo, y llega un momento en el que distintas circunstancias nos hacen pensar que es el momento de cerrar una etapa, de decir adiós. Y este momento ya está aquí. “En la nube TIC” llega a su fin. Solo se me ocurre dar las gracias a todos aquellos que nos siguieron artículo a artículo, a los que nos animaron y a los que pusieron su cariño en celebrarlo una y otra vez. Pero sobre todo quiero dar las gracias a esos maravillosos docentes que, sin pedir nada a cambio, lo dieron todo para ayudar a muchos de sus compañeros, les conocieran o no. Han derrochado esa generosidad de la que se nutrió la web 2.0 y la revolución tecnológica en la educación en sus inicios, y que tanto echamos de menos últimamente. Quiero dar las gracias y mostrar mi admiración y respeto a todos los

Meograph: crear historias multimedia

Meograph es una herramienta que nos permite crear una historia, combinando diferentes momentos organizados en una línea de tiempo, en los que podemos introducir mapas, narraciones escritas o en audio, vídeos de Youtube, imágenes y enlaces. Su manejo es muy sencillo. Primero debemos registrarnos, a través de Facebook o con nuestra cuenta de correo. Una vez dentro, clicamos en el botón “Create a Meograph” para ir añadiendo los distintos "momentos" a nuestro montaje. Antes de comenzar nuestra historia podemos elegir, desde nuestro ordenador, una imagen que acompañe al título elegido (podemos hacerlo también después, pues nos permite editarlo cuando queramos) Comenzamos a crear pulsando "+Add a moment". De manera opcional podemos incluir una introducción y una conclusión, que acompañen a la historia y que tendrán que ser únicamente una narración en audio (no da opción para texto) Esto se efectuará pulsando en la palabra “Narration” que aparece bajo