Nadie ve el color de la misma manera

Cuando te dicen rojo, ¿cómo lo imaginas? ¿cómo lo hueles? ¿cómo lo sientes? seguro que el rojo que imaginas es diferente al que yo pensé. Pero si te digo rojo marlboro, tal vez tu rojo y el mío se asemejen un poco más, sin embargo cada ojo percibe los colores de forma diferente y algunos ojos de hecho no pueden percibir algunos colores.

Por eso nuestro sitio accesible debe tener un buen manejo de color, para que quienes tenemos problemas de visión podamos leer y distinguir las formas con más facilidad. hay varios elementos que debemos tener en cuenta en la creación de contenidos: 

1. El fondo con relación al texto: los colores del fondo y el texto deben generar un contraste total, por ejemplo, fondo claro y letra oscura o al revés:

FONDO CLARO LETRA OSCURA

FONDO CLARO LETRA OSCURA

FONDO CLARO LETRA OSCURA

FONDO OSCURO LETRA CLARA

FONDO OSCURO LETRA CLARA

FONDO OSCURO LETRA CLARA

En la anterior entrada de este blog había cambiado mi plantilla por una poco legible, al menos para mi porque no generaba el suficiente contraste, se trata de una imagen de fondo con puntos de varios colores y la letra es negra, dejo aquí una imagen:

Lo que voy a hacer ahora es cambiar la imagen de fondo para que pueda leer con más facilidad, de nuevo vamos a la sección de edición HTML y vamos a editar los estilos del cuerpo de la página, los estilos son los parámetros que le dan a los elementos de la página medidas, colores, tipos de letra, posición, entre otros.

El estilo principal se llama body y sus características se encierran en llaves {} veamos el código:

body {

  background:#fff url("http://www.blogblog.com/dots/bg_dots.gif") 50% 0;

  margin:0;

  padding:0 10px;

  text-align:center;

  font:x-small Verdana,Arial,Sans-serif;

  color:#333;

  font-size/* */:/**/small;

  font-size: /**/small;

  }

Primero habla del backgroud o fondo y nos dice que el color de fondo es #fff que significa blanco, luego nos dice que hay una imagen de fondo llamada bg_dots.gif, esta imagen la vamos a quitar para no tener problemas de lectura entonces borramos el fragmento que dice 

url("http://www.blogblog.com/dots/bg_dots.gif") 50% 0;

Los otros parámetros de estilo los veremos más adelante para no salirnos del tema.

Quiero que mi color de fondo no sea blanco sino beige claro, entonces busco el color hexadecimal, (estos colores los puedes buscar en internet) el beige es #FFFFCC este valor lo reemplazo por el #fff y listo he cambiado el fondo de mi plantilla y ahora se ve así:

Parece que la plantilla me guardaba una sorpresa y los contenidos también tienen punticos de fondo, entonces vamos a buscar donde más son llamadas las imágenes de puntos para eliminarlas. Ahora si le dije adiós a los punticos:

Pero todavía no terminamos la cuestión del color, algo más me molesta y es que los textos de los vínculos se ven muy claritos y pequeños entonces también vamos a modificarlos, una ves más recurrimos a los estilos del HTML.

2. Edición de hipervínculos: los hipervínculos son esas palabras u oraciones que cuando haces clic sobre ellas te direccionan a otro lugar en la web, en mi blog el menú lateral está compuesto por hipervínculos verdes que están delineados, cuando pasas el ratón sobre ellos se vuelven negros y se mantienen delineados, en ocasiones cuando se hace clic sobre un lugar visitado también cambia de color.

Resulta que los botones e hipervínculos tienen cuatro estados o posiciones: el link, cuando pasamos el ratón sobre éste, cuando lo presionamos y cuando ha sido ya visitado.

A cada posición le podemos dar las características que queramos por medio de los estilos, entonces vamos a ver como es actualmente la plantilla y reconocemos un hipervínculo en la hoja de estilos porque comienza con a seguido de : dos puntos y la posición:

a:link {

  color:#488;

  }

a:visited {

  color:#885;

  }

a:hover {

  color:#000;

  }

a:active (en esta plantilla no se encuentra)

Voy a reemplazar los colores, quiero que sea de color negro #000, cuando el ratón pase sobre el texto se vuelva azul #0e19c0 y cuando la haya visitado sea violeta #874ecd. También voy a agrandar un poco la letra y volverla bold para leer mejor:

a:link {

  color:#000;

  font-size: 14pt;

  font-weight: bold;

  }

a:visited {

  color:#874ecd;

  font-size: 12pt;

  font-weight: bold;

  }

a:hover {

  color:#0e19c0;

  font-size: 14pt;

  font-weight: bold;

  }

Ahora mi menú se lee mucho mejor:

Existen algunas aplicaciones que nos ayudan a medir los contrastes de color en las páginas y los podemos descargar de forma gratuita, por ejemplo, COLOUR CONTRAST ANALYZER CCA  o puedes visitar la página http://www.checkmycolours.com/ que aunque está en inglés sólo tenemos que escribir la url de la página que queremos analizar y ésta nos arroja un análisis completo.


Mi blog arrojó: 48 errores de contraste, 48 diferencias de brillo y 52 fallas en diferencias de color, parece que aun tendré que revisar mucho más!.