9 Colores para tod@s
Hay que tener en cuenta que si no existe un buen contraste entre el fondo y las letras o la información que exponemos, es posible que muchos de los navegantes de nuestra Web no vean bien el contenido. Por poner un ejemplo cuando hay un documental o un video la forma más eficiente de que se vea no es sólo con las letras de colores llamativos como el amarillo, sino que éstas letras descansen en un fondo oscuro o contrastable con ellas.
Por otro lado en la mayoría de los sitios cuando hay enlaces los señalan con colores. Tener presente qué color vamos a utilizar y qué significa cada color (que ya está visitado por ejemplo o que no se encuetra activo) Pero sobre todo, lo importante es avisar de distintas formas el enlace en cuestión, para que personas con problemas de visión a los colores no pasen desapercibidos dichos enlaces para ellos.
¿Cómo lo hacemos más fácil? pues añadimos a la plantilla base (Diseño o personalizar, editar en HTML,) y buscamos dentro de la etiqueta <body> la hoja de estilo que lo especifique en vínculo o , en el libro de Carlos Egea “Diseño Web para tod@s I. Accesibilidad al contenido en las Web.” Icaria editorial. Nos aconseja que añadamos lo siguiente (lo que está en negrita):
body {
background:#ffffff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333333;
font-size/* */:/**/small;
font-size: /**/small;
}
a {
color:#3333FF; /* el típico color azul de los vínculos, pero podemos usar cualquier otro */
text-decoration:underline; /* para que aparezca subrayado */
font-weight:bold; /* para que aparezca en negrita */
}
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}
Una vez realizado este cambio en la plantilla, nos descargamos esta herramienta http://technosite.es/descargas/cca_20_es.zip
y miramos en este enlace su manejo y utilización
http://www.maestrosdelweb.com/editorial/accesiblecolor/
ya que nos puede ayudar sobremanera para hacer una evaluación de contraste de colores. Yo en mi caso por ejemplo, despues de utilizarla he llevado a cabo los cambios en el fondo(background:#ffffff;) y en el color de la letra (color:#333333;) con la intención de conseguir un mayor contraste.
Por otro lado en la mayoría de los sitios cuando hay enlaces los señalan con colores. Tener presente qué color vamos a utilizar y qué significa cada color (que ya está visitado por ejemplo o que no se encuetra activo) Pero sobre todo, lo importante es avisar de distintas formas el enlace en cuestión, para que personas con problemas de visión a los colores no pasen desapercibidos dichos enlaces para ellos.
¿Cómo lo hacemos más fácil? pues añadimos a la plantilla base (Diseño o personalizar, editar en HTML,) y buscamos dentro de la etiqueta <body> la hoja de estilo que lo especifique en vínculo o , en el libro de Carlos Egea “Diseño Web para tod@s I. Accesibilidad al contenido en las Web.” Icaria editorial. Nos aconseja que añadamos lo siguiente (lo que está en negrita):
body {
background:#ffffff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333333;
font-size/* */:/**/small;
font-size: /**/small;
}
a {
color:#3333FF; /* el típico color azul de los vínculos, pero podemos usar cualquier otro */
text-decoration:underline; /* para que aparezca subrayado */
font-weight:bold; /* para que aparezca en negrita */
}
a:link {
color:#58a;
text-decoration:none;
}
a:visited {
color:#969;
text-decoration:none;
}
a:hover {
color:#c60;
text-decoration:underline;
}
a img {
border-width:0;
}
Una vez realizado este cambio en la plantilla, nos descargamos esta herramienta http://technosite.es/descargas/cca_20_es.zip
y miramos en este enlace su manejo y utilización
http://www.maestrosdelweb.com/editorial/accesiblecolor/
ya que nos puede ayudar sobremanera para hacer una evaluación de contraste de colores. Yo en mi caso por ejemplo, despues de utilizarla he llevado a cabo los cambios en el fondo(background:#ffffff;) y en el color de la letra (color:#333333;) con la intención de conseguir un mayor contraste.
entrada de Ana a las
14:10
0 comentarios:
Publicar un comentario
Suscribirse a Enviar comentarios [Atom]
<< Inicio