C\u00f3mo usamos el color en el dise\u00f1o de un sitio web puede dar lugar a problemas de accesibilidad. Y aunque \u00e9stos parecen, en principio, f\u00e1ciles de solucionar, pueden llevar mucho trabajo si no se tuvieron en cuenta desde el principio en el dise\u00f1o.<\/p>\n\n\n\n
Hay dos aspectos que son los m\u00e1s importantes para evaluar si tenemos problemas con el color: contraste y uso del color.<\/p>\n\n\n\n
Es la m\u00e1s frecuente, y podemos encontrar sitios web en los que no existe casi ninguna p\u00e1gina sin problemas de este tipo.<\/p>\n\n\n\n
El principio es muy simple: el contraste entre el texto y el fondo debe ser de 4.5:1 como m\u00ednimo para el texto base, o 3:1 para textos grandes (en general, textos de 18pt o m\u00e1s, o de 14pt o m\u00e1s si est\u00e1n en negrita, o tama\u00f1os equivalentes para alfabetos chino, coreano y japon\u00e9s) para el nivel AA<\/span>, y de 7:1 y 4.5:1 respectivamente para el nivel AAA.<\/span><\/p>\n\n\n\n Parece que s\u00f3lo bastar\u00eda con elegir colores adecuados para el dise\u00f1o, pero eso a veces no es tan sencillo.<\/p>\n\n\n\n El problema m\u00e1s f\u00e1cil de solucionar es dejar de intentar esconder o disimular algunas partes del contenido. Por ejemplo, con textos legalmente obligatorios o confirmaciones de aceptaci\u00f3n de condiciones. Creamos todo un dise\u00f1o pensando en lo que queremos comunicar y podemos caer en la tentaci\u00f3n de poner en un color que destaque menos las partes que creemos que no encajan con el tono general de nuestro sitio.<\/p>\n\n\n\n Si hacemos eso, no estamos eliminando el contenido ni la obligaci\u00f3n de tenerlo, s\u00f3lo estamos haciendo m\u00e1s dif\u00edcil su lectura por razones est\u00e9ticas. Pero debemos ser capaces de dise\u00f1ar sitios web que sean, al mismo tiempo, visualmente atractivos y funcionales.<\/p>\n\n\n\n Otro problema que ocurre con frecuencia es que los colores corporativos o de la marca no tienen un buen contraste. Por ejemplo, cuando adaptamos colores de una marca que se dise\u00f1\u00f3 para colores impresos a pantalla, los colores no siempre son adecuados. Los colores impresos son sustractivos, con lo que mezclar colores da un resultado m\u00e1s oscuro, mientras que los colores en pantalla son aditivos, y ocurre lo contrario. Por eso intentar copiar un color exactamente en pantalla no siempre funciona, aunque lo haga en papel. Este error es f\u00e1cil de corregir a nivel t\u00e9cnico, pero requiere m\u00e1s trabajo desde el punto de vista del dise\u00f1o.<\/p>\n\n\n\n Adem\u00e1s de usar colores con buen contraste, no podemos usar el color para trasladar informaci\u00f3n o distinguir elementos.<\/p>\n\n\n\n Por ejemplo, en un formulario. Marcar en rojo un campo si hay un error est\u00e1 bien, porque se\u00f1alamos el error donde ocurre, pero no podemos usar ese rojo como \u00fanica indicaci\u00f3n del error. Debemos usar texto u otros elementos visuales para indicarlo.<\/p>\n\n\n\n O si tenemos una lista de opciones, se\u00f1alar cu\u00e1les est\u00e1n seleccionadas s\u00f3lo con un cambio en el color del fondo no es suficiente. Debemos usar elementos como iconos adicionales (por ejemplo) para poder distinguirlo aunque no podamos percibir el color.<\/p>\n\n\n\n Esta norma suele costar un poco m\u00e1s de entender porque, a veces, visualmente es muy claro y f\u00e1cil de percibir un cambio o informaci\u00f3n mediante el color, y parece obvio. Pero algunas personas no pueden percibir el color, o lo hacen de manera distinta, por lo que la interpretaci\u00f3n del uso del color no es siempre tan obvia como puede parecernos.<\/p>\n\n\n\n El uso del color afecta la accesibilidad de un sitio web tanto por las cualidades de los colores escogidos como por la intencionalidad de su uso para mostrar la informaci\u00f3n. Y solucionarlo implica, a veces, repensar qu\u00e9 colores usamos y c\u00f3mo; esto puede ser una tarea compleja. Pero al final siempre obtenemos un dise\u00f1o mejor, m\u00e1s \u00fatil y adecuado para un sector m\u00e1s amplio de nuestro p\u00fablico.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":" C\u00f3mo usamos el color en el dise\u00f1o de…<\/p>\n","protected":false},"author":5,"featured_media":5563,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"categories":[29],"tags":[],"class_list":["post-5562","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accesibilidad"],"acf":[],"yoast_head":"\nUso del color<\/h2>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n