<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	>

<channel>
	<title>Maestros del Web &#187; Visi&oacute;n Australia</title>
	<atom:link href="http://www.maestrosdelweb.com/author/vision-australia/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.maestrosdelweb.com</link>
	<description>Un espacio para los entusiastas del web</description>
	<pubDate>Fri, 03 Oct 2008 15:03:43 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5.1</generator>
	<language>en</language>
			<item>
		<title>Haciendo una Web Accesible: el uso adecuado de los colores</title>
		<link>http://www.maestrosdelweb.com/editorial/accesiblecolor/</link>
		<comments>http://www.maestrosdelweb.com/editorial/accesiblecolor/#comments</comments>
		<pubDate>Tue, 26 Sep 2006 00:00:00 +0000</pubDate>
		<dc:creator>Visi&#243;n Australia</dc:creator>
		
		<category><![CDATA[Accesibilidad]]></category>

		<category><![CDATA[Diseño]]></category>

		<category><![CDATA[Editorial]]></category>

		<guid isPermaLink="false"></guid>
		<description><![CDATA[El color juega un papel importante en cualquier diseño que realicemos, el uso adecuado de los colores permitirá que nuestra web sea accesible. En el siguiente artículo aprenderemos a utilizar adecuadamente los colores.
&#191;Qu&#233; es el Analizador de Contraste de Color?
Es una herramienta para comprobar las combinaciones de color de primer plano y color de fondo [...]]]></description>
			<content:encoded><![CDATA[<p><span class="intro">El color juega un papel importante en cualquier diseño que realicemos, el uso adecuado de los colores permitirá que nuestra web sea accesible. En el siguiente artículo aprenderemos a utilizar adecuadamente los colores.</span><span id="more-350"></span></p>
<h3>&iquest;Qu&eacute; es el Analizador de Contraste de Color?</h3>
<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. El proceso para definir el nivel de &quot;visibilidad del color&quot; se basa en los algoritmos que sugiere el Consorcio de la World Wide Web <a href="http://www.w3.org/">(W3C)</a>:</p>
<p>&quot;Se considera que dos colores ofrecen buena visibilidad de color si la diferencia en brillo y la diferencia en color entre ambos es mayor que un intervalo dado.&quot; El intervalo que sugiere el W3C es &gt; 125 para el brillo de color y &gt; 500 para la diferencia de color.</p>
<p>Nota: Hewlett Packard (HP) distribuye una herramienta de verificaci&oacute;n de contraste de color que utiliza los algoritmos del W3C, pero establece el umbral de Diferencia de Color en &gt; 400, lo que supone un l&iacute;mite mayor para las combinaciones de color de primer plano y de fondo consideradas como aceptables.</p>
<h3>F&oacute;rmula de Brillo de Color</h3>
<p>El brillo de color se determina por medio de la siguiente f&oacute;rmula: ((valor de Rojo X 299) + (valor de Verde X 587) + (valor de Azul X 114)) / 1000.</p>
<p>La diferencia entre el brillo de fondo, y el brillo de primer plano deber&iacute;a ser mayor a 125. Nota: Este algoritmo procede de la f&oacute;rmula para convertir valores RGB a valores YIQ. Este valor de brillo ofrece la percepci&oacute;n del brillo del color.</p>
<h3>F&oacute;rmula de Diferencia de Color</h3>
<p>la diferencia de color se determina por medio de la siguiente f&oacute;rmula: (m&aacute;ximo (valor Rojo 1, valor Verde 2) - m&iacute;nimo (valor Rojo 1, valor Rojo 2)) + (m&aacute;ximo (valor Verde 1, valor Verde 2) - m&iacute;nimo (valor Verde 1, valor Verde 2)) + (m&aacute;ximo (valor Azul 1, valor Azul 2) - m&iacute;nimo (valor Azul 1, valor Azul 2)). La diferencia entre el color de fondo y el color de primer plano deber&iacute;a ser mayor que 500.</p>
<h3>Utilidad</h3>
<p>El Analizador de Contraste de Color (ACC) resulta &uacute;til para servir de ayuda a la hora de determinar, en concreto, la legibilidad de un texto en una <a href="http://www.maestrosdelweb.com/editorial/estandar/">p&aacute;gina web</a> y la legibilidad de representaciones de texto por medio de im&aacute;genes.<br />
Estableciendo conformidad con el Punto de Verificaci&oacute;n 2.2 de las Pautas de Accesibilidad al Contenido en la Web 1.0</p>
<p>El Punto de Verificaci&oacute;n 2.2 de las WCAG 1.0 requiere que las combinaciones de color de fondo y de primer plano ofrezcan suficiente contraste para ser visualizadas por personas con discapacidad visual , o para visualizarlas con pantallas en blanco y negro. Utiliza el ACC para probar combinaciones de color sobre el algoritmo que sugiere el W3C y determinar as&iacute; un &quot;contraste suficiente&quot;.</p>
<h3>Manejo del ACC</h3>
<p>La interfaz de usuario tiene cuatro secciones:</p>
<ul>
<li> Selecci&oacute;n de Color</li>
<li>Resultados</li>
<li> Resultados de Ceguera Crom&aacute;tica</li>
<li> Men&uacute;s de Opciones y Ayuda</li>
</ul>
<h3> Selecci&oacute;n de Color</h3>
<p>Los controles de Selecci&oacute;n de Color se dividen en dos secciones (primer plano y fondo) y cada una posee tres formas para seleccionar un color con el que probar. </p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima1.gif" width="362" height="110" /></p>
<p>A la(s) paleta(s) de colores se accede por medio de una lista desplegable. &Uacute;sala como ayuda para probar y seleccionar combinaciones de color adecuadas.</p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima2.gif" width="177" height="231" /></p>
<p>La paleta de color inferior (m&aacute;s peque&ntilde;a) se compone de 10 matices de tonalidad del color base actualmente seleccionado, visible en la esquina superior izquierda, con diferentes grados de opacidad. La fila superior emula opacidad sobre un fondo blanco, la inferior sobre negro. Los valores de opacidad de la fila superior son 100% opaco, 75%, 50%, 25% y 10%. La fila inferior comienza en 85% en lugar de en 100% pero contin&uacute;a como la superior.</p>
<p>Esta paleta resulta &uacute;til para probar tonalidades del color base m&aacute;s claras o m&aacute;s oscuras, con el fin de mejorar la visibilidad de la combinaci&oacute;n de color objeto de la prueba. Nota: Esta caracter&iacute;stica se ha inspirado en Color Palette Creator.</p>
<p>  Introduce el valor para un color (en formato Hexadecimal) en la caja de texto. Resulta &uacute;til si tienes acceso a los valores Hex de los colores que quieres comprobar.</p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima3.gif" width="112" height="30" /></p>
<p>La prueba del color de una p&aacute;gina web (o cualquier otra cosa en la pantalla) se lleva a cabo usando un selector de colores ampliador.<img src="http://www.maestrosdelweb.com/images/editorial/colorima4.gif" width="27" height="27" /></p>
<p>&Uacute;til para pruebas r&aacute;pidas, comprobaci&oacute;n y obtenci&oacute;n de los valores hexadecimales de los colores. Una vez que se ha seleccionado el bot&oacute;n del selector de color un &aacute;rea ampliada aparecer&aacute; alrededor del cursor. El color del contenido bajo la flecha del cursor aparecer&aacute; en la lista desplegable de la paleta de color.</p>
<p>Una vez elegido un color con el selector de colores (clicando con el bot&oacute;n izquierdo del rat&oacute;n o pulsando la tecla &#8216;intro&#8217;) su valor hexadecimal aparecer&aacute; en en la caja de texto &#8216;hex value&#8217; y la secci&oacute;n de resultados se actualizar&aacute; para reflejar las diferencias en brillo y color para la combinaci&oacute;n de color seleccionada en ese momento.</p>
<p>Nota: Para un control m&aacute;s preciso del cursor utiliza las teclas de las flechas.</p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima5.gif" width="450" height="192" /></p>
<h3>Resultados</h3>
<p>La secci&oacute;n de resultados se divide en resultados resumidos y resultados &iacute;ntegros. Los &#8216;Resultados Resumidos&#8217; indican un valor tanto para la diferencia en brillo como en color.</p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima6.gif" width="342" height="30" /></p>
<p>Si ambos cumplen la verificaci&oacute;n se indica con un signo verde de marcado. Si uno de los dos lo incumple se indica mediante un aspa roja.</p>
<p>Los &#8216;Resultados Integrales&#8217; muestran los valores de cada una de las comprobaciones realizadas describiendo cu&aacute;les han sido los criterios de aceptaci&oacute;n o rechazo e indicando si el contraste ha sido suficiente o insuficiente. Nota: Es posible seleccionar y copiar el texto de los resultados resumidos e integrales.</p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima7.gif" width="359" height="222" /></p>
<h4> Resultados de Ceguera Crom&aacute;tica</h4>
<p>Seleccionando la casilla de verificaci&oacute;n &#8216;mostrar tambi&eacute;n resultados de contraste para ceguera crom&aacute;tica&#8217; se mostrar&aacute;n resultados resumidos para &#8216;visi&oacute;n normal&#8217; y tres tipos de ceguera crom&aacute;tica (Protanopia, Deuteranopia, Tritanopia).</p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima8.gif" width="361" height="244" /></p>
<p>Nota: El m&eacute;todo para determinar las transformaciones en el valor del color para los tres tipos de discapacidad crom&aacute;tica proviene del algoritmo descrito por Hans Brettel, Francoise Vienot y John Mollon en un bolet&iacute;n de Journal of the Optical Society of America V14, #10 pp2647.</p>
<p>Agradecimientos a la agradable gente de Vischeck que nos permiti&oacute; acceder al c&oacute;digo fuente de su implementaci&oacute;n del algoritmo de Brettel.</p>
<h4>Men&uacute;s de Opciones y Ayuda</h4>
<p>Seleccionando la casilla de verificaci&oacute;n &#8217;siempre en primer plano&#8217; la ventana del ACC se mantendr&aacute; siempre visible sobre el resto de ventanas que se encuentren abiertas. Seleccionar el bot&oacute;n &#8216;fuente&#8217; te permite modificar la fuente usada en las etiquetas de texto y contenido del ACC.</p>
<p>Nota: la selecci&oacute;n de ciertos tipos de fuente o tama&ntilde;os puede provocar recortes en la visualizaci&oacute;n del texto.</p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima9.gif" width="192" height="55" /></p>
<p>Si activas el bot&oacute;n &#8216;ayuda&#8217; Men&uacute; de ayuda se abrir&aacute; la p&aacute;gina web de la documentaci&oacute;n del ACC en una ventana de navegador. Nota: ser&aacute; necesario que est&eacute;s conectado a internet para acceder a dicha documentaci&oacute;n.</p>
<p><img src="http://www.maestrosdelweb.com/images/editorial/colorima10.gif" width="138" height="54" /> </p>
<p>El Analizador de Contraste de Color es Freeware. Para obtener m&aacute;s informaci&oacute;n sobre el software debes leer acerca de las  <a href="http://www.visionaustralia.org.au/info.aspx?page=959">t&eacute;rminos y condiciones de uso</a>. </p>
<p>Este art&iacute;culo fue publicado originalmente en <a href="http://www.visionaustralia.org.au/info.aspx?page=959">visionaustralia.org.au</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.maestrosdelweb.com/editorial/accesiblecolor/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
