{"id":171,"date":"2006-03-27T18:59:41","date_gmt":"2006-03-27T17:59:41","guid":{"rendered":"http:\/\/www.webposible.com\/blog\/?p=171"},"modified":"2020-02-06T16:07:29","modified_gmt":"2020-02-06T15:07:29","slug":"graybit-otra-buena-herramienta-para-comprobar-el-contraste-de-un-sitio-web","status":"publish","type":"post","link":"http:\/\/www.webposible.com\/blog\/2006\/graybit-otra-buena-herramienta-para-comprobar-el-contraste-de-un-sitio-web\/","title":{"rendered":"GrayBit otra buena herramienta para comprobar el contraste de un sitio web"},"content":{"rendered":"

Ya conocemos que una de las Pautas de Accesibilidad al Contenido Web 1.0<\/a> (concretamente la n\u00famero 2), nos dice que no hay que basarse s\u00f3lo en el color. \u00bfPorqu\u00e9? Por que no todos tenemos los mismos dispositivos, monitores, navegadores,… y tambi\u00e9n hay personas que no distinguen bien los colores: yo entre otros, me he dado que los colores pardos no los distingo muy bien (no es ninguna excusa para ocultar el p\u00e9simo gusto que tengo para el dise\u00f1o web).
\nCitemos, literalmente, la pauta en cuesti\u00f3n:<\/p>\n

\nAseg\u00farese de que los textos y gr\u00e1ficos son comprensibles cuando se vean sin color.<\/strong>
\nSi el color por s\u00ed mismo se usa para transmitir informaci\u00f3n, las personas que no puedan diferenciar ciertos colores, y los usuarios que no tengan pantallas en color o utilicen dispositivos de salida no visuales, no recibir\u00e1n la informaci\u00f3n. Cuando los colores de primer plano y de fondo tienen un tono similar, pueden no proporcionar suficiente contraste en las pantallas monocrom\u00e1ticas, as\u00ed como a las personas con diferentes tipos de deficiencias de percepci\u00f3n de los colores.
\nPuntos de verificaci\u00f3n:<\/strong><\/p>\n

\n
2.1 Aseg\u00farese de que toda la informaci\u00f3n transmitida a trav\u00e9s de los colores tambi\u00e9n est\u00e9 disponible sin color, por ejemplo mediante el contexto o por marcadores [Prioridad 1]<\/strong><\/dt>\n
T\u00e9cnicas para el punto de verificaci\u00f3n 2.1<\/a><\/dd>\n
2.2 Aseg\u00farese de que las combinaciones de los colores de fondo y primer plano tengan suficiente contraste para que sean percibidas por personas con deficiencias de percepci\u00f3n de color o en pantallas en blanco y negro [Prioridad 2 para las im\u00e1genes. Prioridad 3 para texto]<\/strong>.<\/dt>\n
T\u00e9cnicas para el punto de verificaci\u00f3n 2.2<\/a><\/dd>\n<\/dl>\n<\/blockquote>\n

Pautas de Accesibilidad al Contenido en la Web 1.0 Pauta 2: No se base s\u00f3lo en el color.<\/a><\/cite>
\nEn la primera pauta nos indica que no hay que usar s\u00f3lo el color para transmitir informaci\u00f3n (por ejemplo \u00abpulsa el icono verde para continuar y el rojo para cancelar\u00bb Pero si tengo un monitor en blanco y negro, \u00bfqu\u00e9 bot\u00f3n pulso?), y en la segunda nos indica que hay que tener un suficiente contraste entre el texto y el fondo. Hace poco en \u00fasalo<\/a>, publicaron una interesante rese\u00f1a sobre una extensi\u00f3n de Firefox llamada Colour Contrast Analyser Firefox Extension<\/a> (de la buena gente de juicystudio<\/a>),… esto… que la rese\u00f1a, a lo que iba, llevaba por t\u00edtulo La Colour Contrast Analyser Firefox Extension nos saca los colores<\/a> (por cierto, a webposible, tambi\u00e9n nos lo saca, je je). Y la herramienta a la que hacemos menci\u00f3n hoy, tiene la misma funci\u00f3n aunque emplea otra t\u00e9cnica.
\nTach\u00e1n… hablamos de graybit, un sitio web en el que tras introducir la direcci\u00f3n de una p\u00e1gina web, nos la muestra en escala de grises. \u00bfY \u00e9so para que sirve? Muy sencillo, para ver si los colores empleados tienen suficiente contraste… para casi todos. Una de las formas de comprobar la pauta 2.2 que antes hemos mencionado, era imprimir un documento en blanco y negro, o mejor dicho, en blanco, grises y negro. \u00c9sta aplicaci\u00f3n web tiene la misma filosof\u00eda. No es una herramienta definitiva, pero ayuda bastante: es m\u00e1s que digna de estar incluida en nuestra caja de herramientas de la accesibilidad web (humm, es un buen t\u00edtulo para un laargo post, me lo anoto en mi PDA<\/acronym><\/a>, je je).
\nComo curiosidad, reto a los sufridos lectores de esta bit\u00e1cora a comprobar esta p\u00e1gina web en esta aplicaci\u00f3n (adem\u00e1s de en las suyas, por supuesto).
\nMe he enterado de esta aplicaci\u00f3n en la bit\u00e1cora de Arnau, en su art\u00edculo titulado Eines per testejar el contrast.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ya conocemos que una de las Pautas de Accesibilidad al Contenido Web 1.0 (concretamente la n\u00famero 2), nos dice que no hay que basarse s\u00f3lo en el color. \u00bfPorqu\u00e9? Por que no todos tenemos los mismos dispositivos, monitores, navegadores,… y tambi\u00e9n hay personas que no distinguen bien los colores: yo entre otros, me he dado […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-171","post","type-post","status-publish","format-standard","hentry","category-accesibilidad","category-herramientas"],"_links":{"self":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":11,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":952,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions\/952"}],"wp:attachment":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}