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

Quizlet Live, tarjetas de aprendizaje o flash-cards.. ¡en equipo!

En el 2016, nuestra compañera Isabel Etayo ya nos habló sobre Quizlet, una fantástica plataforma que permite al usuario crear tarjetas de aprendizaje , o flash cards , con el fin de practicar como si de tarjetas físicas se tratase: por un lado escribes un término y por el otro la definición; o una operación y por el otro el resultado... Por aquel entonces la plataforma era bastante limitada, pero en los últimos años han dado una vuelta de tuerca y ahora tiene un potencial increíble. Las tarjetas, que en principio solo contenían palabras y definiciones (y en algunos casos, imágenes), permiten ahora colocar partes de un mapa, dibujos, etc. Además, puede practicarse con ellas mediante distintos juegos interactivos que harán del estudio un rato entretenido. Pero hoy no vengo aquí a hablaros de Quizlet , sino de su versión de equipo: Quizlet Live , una opción que desatará la adrenalina de nuestro alumnado, ¡garantizado! Para jugar a Quizlet Live en primer lugar debemos crear las tarj...

descarga vídeos de cualquier web con #StreamTransport

Meses atrás os mostré un truco para descargar vídeos desde #Chrome fuera cual fuese la web. Sin embargo, el método podía resultar un tanto farragoso, además del hecho de que para algunas webs, como la de EITB (TV autonómica vasca) no funciona. Pero hace unos días Iñaki (no diré apellido) del Berritzegune de Irún me enseñó una manera de poder descargar vídeos de cualquier web sin tener que recurrir al "método largo" que os citaba en el post de hace unos meses, mediante un software gratuito: Stream Transport . Lo que hace Stream Transport es lo que os enseñé a hacer anteriormente de forma manual, pero de una forma rápida y sencilla: coge la extensión de vídeo oculto en el código de la página web y nos descarga el archivo de vídeo. Vídeo-tutorial vídeotutorial realizado por obiwan2208 Características Descarga vídeos de webs bajo protocolos HTTP, RTMP, RTMPT, RTMPE, RTMPTE, lo que lo hace compatible casi con la totalidad de pági...