{"id":8,"date":"2005-05-17T14:52:22","date_gmt":"2005-05-17T12:52:22","guid":{"rendered":"http:\/\/www.webposible.com\/blog\/?p=8"},"modified":"2020-02-06T16:06:41","modified_gmt":"2020-02-06T15:06:41","slug":"la-accesibilidad-de-los-colores-brillo-y-contraste","status":"publish","type":"post","link":"http:\/\/www.webposible.com\/blog\/2005\/la-accesibilidad-de-los-colores-brillo-y-contraste\/","title":{"rendered":"La accesibilidad de los colores: brillo y contraste."},"content":{"rendered":"<p>Gracias a un mensaje publicado en la <a href=\"https:\/\/es.groups.yahoo.com\/neo\/groups\/accesoweb\/info\" title=\"Lista de correo sobre accesibilidad web en castellano alojada en yahoogroups\">lista de correo sobre accesibilidad en castellano<\/a>, tacho de mi imaginaria lista de temas pendientes por tratar en este blog, un interesante asunto sobre accesibilidad web, los colores, o para ser m\u00e1s exacto: el <strong>\u00f3ptimo contraste entre colores<\/strong>.<\/p>\n<p>El Consorcio de la Web, en uno de sus documentos sobre accesibilidad (<a href=\"http:\/\/www.w3.org\/TR\/AERT\/\" hreflang=\"en\" lang=\"en\">Techniques For Accessibility Evaluation And Repair Tools<\/a>), menciona dos <a href=\"http:\/\/www.w3.org\/TR\/AERT\/#color-contrast\" hreflang=\"en\" lang=\"en\">algoritmos para medir el brillo de un color, y el contraste entre dos colores combinados<\/a>, el de fondo y primer plano.<\/p>\n<dl>\n<dt><strong>Brillo de un color<\/strong><\/dt>\n<dd>((valor de Rojo X 299) + (valor de Verde X 587) + (valor de Azul X 114)) \/ 1000<\/dd>\n<dt><strong>Contraste entre dos colores<\/strong>:<\/dt>\n<dd>(m\u00e1ximo (valor Rojo 1, valor Verde 2) &#8211; m\u00ednimo (valor Rojo 1, valor Rojo 2)) + (m\u00e1ximo (valor Verde 1, valor Verde 2) &#8211; m\u00ednimo (valor Verde 1, valor Verde 2)) + (m\u00e1ximo (valor Azul 1, valor Azul 2) &#8211; m\u00ednimo (valor Azul 1, valor Azul 2))<\/dd>\n<\/dl>\n<p>Seg\u00fan la f\u00f3rmula del <strong>brillo<\/strong>, un valor <strong>mayor que 125<\/strong> ser\u00eda <strong>adecuado<\/strong>.<\/p>\n<p>Seg\u00fan la f\u00f3rmula del <strong>contraste<\/strong>, un valor <strong>mayor que 500<\/strong>, ofrecer\u00eda un contraste <strong>\u00f3ptimo<\/strong> entre el color de fondo y el del primer plano.<\/p>\n<p><strong>Observaci\u00f3n<\/strong>: los valores para Rojo, Verde y Azul se corresponden al valor decimal del c\u00f3digo hexadecimal <acronym title=\"Red Green Blue\" lang=\"en\" xml:lang=\"en\">RGB<\/acronym> de cada color. Por ejemplo, el color expresado en hexadecimal <code>#0000FF<\/code>, descompuesto en cada uno de sus colores primarios (Rojo, Verde y Azul), ser\u00eda:<\/p>\n<ul>\n<li><code>00<\/code> para el rojo (los dos primeros d\u00edgitos hexadecimales). Este n\u00famero pasado al c\u00f3digo decimal ser\u00eda &quot;0&quot;.<\/li>\n<li><code>00<\/code> para el verde (tercer y cuarto d\u00edgitos hexadecimales). Al igual que antes, en c\u00f3digo decimal ser\u00eda &quot;0&quot;.<\/li>\n<li><code>FF<\/code> para el azul (dos \u00faltimos d\u00edgitos hexadecimales). Pasado a c\u00f3digo decimal, ser\u00eda &quot;255&quot;<\/li>\n<\/ul>\n<p>Despu\u00e9s de toda esta formulaci\u00f3n matem\u00e1tica, usaremos un par de <strong>ejemplos<\/strong> que nos ayudar\u00e1n un poquito m\u00e1s, je je:<\/p>\n<dl>\n<dt>Ejemplo de <strong>buen contraste<\/strong> entre el texto y el color de fondo (texto de color blanco, fondo de color azul):<\/dt>\n<dd><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.webposible.com\/imagenes\/buen_contraste_color.png\" width=\"100\" height=\"60\" title=\"Ejemplo de buen contraste de color entre el texto y el fondo.\" alt=\"buen contraste\"\/><\/dd>\n<dt>Ejemplo de <strong>insuficiente<\/strong> contraste entre el texto y el color de fondo (texto de color gris, fondo de color verde):<\/dt>\n<dd><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.webposible.com\/imagenes\/poco_contraste_color.png\" width=\"100\" height=\"60\" title=\"Ejemplo de poco contraste de color entre el texto y el fondo.\" alt=\"poco contraste\"\/><\/dd>\n<\/dl>\n<p>Exceptuando aquellas personas que tienen una discapacidad visual cercana a la ceguera, la mayor\u00eda de las personas pueden distinguir perfectamente el texto del fondo en el primer ejemplo (texto de color blanco, fondo de color azul). De hecho, es uno de las combinaciones de colores m\u00e1s accesibles.<\/p>\n<p>No podemos decir lo mismo del segundo caso (texto de color gris, fondo de color verde), ya que se trata de colores pr\u00f3ximos y no tiene suficiente contraste.<\/p>\n<p>Bas\u00e1ndose en las f\u00f3rmulas anteriores, existen un pu\u00f1ado de buenas <strong>herramientas que nos ayudar\u00e1n a comprobar<\/strong> si <strong>el contraste de los colores<\/strong> que usamos es bueno, o puede provocar problemas a ciertos usuarios. Son las siguientes:<\/p>\n<dl>\n<dt>Analizador del Contraste de Color<\/dt>\n<dd>\n<blockquote cite=\"http:\/\/www.nils.org.au\/ais\/web\/resources\/contrast_analyser\/versions\/es\/\"><p>Es una herramienta para comprobar las combinaciones de color de primer plano y color de fondo con el fin de determinar si proveen buena visibilidad del color.<\/p><\/blockquote>\n<\/dd>\n<dt><a href=\"http:\/\/www.sidar.org\/que\/g1\/calcula.htm\">Calculador de contraste del color<\/a><\/dt>\n<dd>\n<blockquote cite=\"http:\/\/www.nils.org.au\/ais\/web\/resources\/contrast_analyser\/versions\/es\/\"><p>Se trata de un &quot;<span lang=\"en\">favelet<\/span>&quot;, creado por <span lang=\"fr\" xml:lang=\"fr\">Vincent Tabard<\/span>, o <span lang=\"en\" xml:lang=\"en\">script<\/span> que puede ejecutarse como &quot;<span lang=\"en\" xml:lang=\"en\">bookmark<\/span>&quot; o enlace a favoritos desde el navegador.<\/p><\/blockquote>\n<\/dd>\n<dt><a href=\"https:\/\/snook.ca\/technical\/colour_contrast\/colour.html\" lang=\"en\" hreflang=\"en\">Colour Contrast Check<\/a><\/dt>\n<dd>\n<blockquote cite=\"http:\/\/www.snook.ca\/technical\/colour_contrast\/colour.html\" xml:lang=\"en\" lang=\"en\"><p>The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast \u00abwhen viewed by someone having color deficits or when viewed on a black and white screen\u00bb[<a href=\"http:\/\/www.w3.org\/TR\/AERT\/#color-contrast\" lang=\"en\" hreflang=\"en\">W3C<\/a>].<\/p><\/blockquote>\n<\/dd>\n<\/dl>\n<p><strong>Si alguna vez, como usuarios, nos encontramos con este problema<\/strong> (poco contraste entre el color del texto y el fondo, o el color de texto y una imagen), siempre podemos configurar nuestro navegador para que nuestras preferencias sobre los colores, se impongan sobre las del dise\u00f1ador de la p\u00e1gina en cuesti\u00f3n. Por ejemplo, usando nuestra propia hoja de estilos, forzando a que el texto y el fondo sea de los colores que nosotros queramos, e incluso desactivar los estilos. Si la p\u00e1gina est\u00e1 bien hecha (o al menos, no demasiado mal), por lo menos podremos acceder al contenido. Que es lo importante.<\/p>\n<p>Otro d\u00eda, hablaremos de las discapacidades visuales relacionadas con la ceguera de colores.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gracias a un mensaje publicado en la lista de correo sobre accesibilidad en castellano, tacho de mi imaginaria lista de temas pendientes por tratar en este blog, un interesante asunto sobre accesibilidad web, los colores, o para ser m\u00e1s exacto: el \u00f3ptimo contraste entre colores. El Consorcio de la Web, en uno de sus documentos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-8","post","type-post","status-publish","format-standard","hentry","category-accesibilidad"],"_links":{"self":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/8","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=8"}],"version-history":[{"count":6,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":791,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions\/791"}],"wp:attachment":[{"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webposible.com\/blog\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}