Herramienta de verificación de contraste

Herramienta de verificación de contraste de color Colour Contrast Analyser (CCA) es posiblemenente una de las mejores herramientas.

Revisor automático de Windows

El analizador de contraste de color es una característica de Accessibility Insights para Windows que ayuda a los desarrolladores a investigar las relaciones de contraste.
Garantizar un contraste adecuado hace que sea más fácil para todos leer el contenido del texto, interpretar elementos gráficos, identificar componentes de la interfaz de usuario y notar cuándo esos componentes cambian de estado. Las personas con baja visión a menudo tienen dificultades para leer textos, identificar botones que no contrastan con su fondo o determinar el estado de los componentes de la interfaz de usuario. Los problemas pueden exacerbarse si la persona tiene una deficiencia en la visión del color que reduce aún más el contraste percibido.

Whocanuse.com

whocanuse.com es una herramienta que llama la atención y la comprensión sobre cómo el contraste de color el cual puede afectar a diferentes personas con discapacidad visual.

Los mitos de accesibilidad de contraste

Un articulo muy interesante que muchos maquetadores web tendrián que leer https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/

Color y la accesibilidad web

Diseño en escala de grises primero

Comenzar el diseño con color es un error bastante común entre los diseñadores. Si bien puede ser tentador completar el diseño con color, es mejor evitar esa tentación.

Combina los colores con la marca

Los colores de marca deben jugar un papel clave en la creación de una paleta de colores. Intenta usar los colores de tu marca en los diseños que diseñas.

Recientemente muchas marcas comenzaron a usar colores brillantes para su diseño. Los colores brillantes dan energía y una sensación de inmediatez.

La regla 60–30–10

El 60–30–10 es una regla muy simple para crear paletas de colores bien equilibradas. La idea es simple: cuando elige una nueva paleta de colores, el 60% de la paleta debe estar dedicada a un color (generalmente, es un color neutro), otro color (complementario) constituye el 30% de la paleta y un tercero El color (acento) se utiliza para el 10% restante del diseño.

La regla de maxima de 3 colores

“No uses más de tres colores en un atuendo, de lo contrario te verás como un payaso o un loro”.  Este es un consejo común que los estilistas personales dan a sus clientes. A menos que sea un experto en combinar colores, es mejor limitar la cantidad total de colores que utiliza en su diseño.
Si crees que tu diseño necesita más colores, intente utilizar variaciones más oscuras y claras de los colores ya seleccionados.

Utilizar generadores de paletas de color

Los generadores de paletas de colores simplifican la tarea de encontrar esquemas de color bien equilibrados. Aquí está una lista de generadores de paletas de color

Nunca use color solo para transmitir el significado

Aproximadamente el 8% de los hombres y el 0.5% de las mujeres se ven afectados por algún tipo de ceguera al color. Deuteranopia (ceguera de color rojo-verde) es la forma más común de ceguera de color. Dichos usuarios tienen dificultades para interactuar con la IU que usa solo el color para transmitir el significado (por ejemplo, usa el color rojo para entregar el estado de error).

Herramientas gratuitas para elegir los colores de tu web

Adobe Color CC

La gente lo llama Adobe Kuler, hace unos años se renombró como Adobe Color CC. Es una de las herramientas gratuitas de Adobe donde cualquiera puede generar esquemas de color desde cero. Podemos elegir entre muchas paletas de color diferentes, donde seguro encontraremos la que mejor se adapte a nuestras necesidades. También podemos guardar los diferentes códigos hexadecimales y RGB, o crear una rueda basada en una imagen previamente elegida.

Paletton

Paletton es un clásico que todos los diseñadores web deberían conocer. Ha existido durante años y sigue siendo un sitio de referencia. Simplemente hay que añadir un color base y dejar que la aplicación haga el resto. Podemos escoger entre diferentes relaciones de color y cómo deberían aparecer en el diseño. Y para cada elección de color, encontrará ligeras variaciones con contraste variable. De esta manera, podemos completar una paleta con colores similares.

Canva

Cuando añadimos un color, la web nos ofrece una detallada descripción del mismo. A lo que hay que añadir una completa paleta con diferentes tonalidades. Además de diversas combinaciones de color que podemos usar. Canva es instructivo a la vez que útil.

Coolors

Coolors es un gran generador de paletas de colores. El verdadero valor de está en la aplicación web es que genera automáticamente esquemas de color de manera prácticamente automática. Podemos mezclar y combinar colores, cambiar configuraciones, hacer ajustes para el daltonismo, o aleatorizar nuestros propios esquemas de acuerdo con ciertos criterios. También está disponible como extensión para Chrome, o incluso como app para iOS.

¿De qué nos sirve que nuestra web tenga los colores perfectos, si el texto apenas puede leerse?

Color Safe

Color Safe es una herramienta que permite a los diseñadores aprovechar las paletas de colores accesibles según las pautas de las WCAG. Para usarlo, solo hay que seleccionar el color de fondo, la tipografía, el tamaño de fuente, su peso y el estándar WCAG. A continuación, elegimos un color para el texto. Podemos previsualizar el color del texto en la barra de herramientas superior haciendo clic en un cuadro y seleccionar el valor HEX o RGB en la barra de herramientas para copiarlo al portapapeles.

Accessible Colors

Accessible Colors funciona de una forma muy parecida a Color Safe, aunque con una interfaz más simple. Algunos agradecerán esto. En una linea, insertaremos los datos necesarios: color, tamaño y la tipografía. En otra el color de fondo. Y eso es todo. La web nos devolverá los resultados según queremos que sea AA o AAA, siguiendo las directrices de la WCAG.

¡Qué difícil es ser discapacitado en rebajas! ¿a que si Cortefiel, H&M y Zara?

Han comenzado las rebajas de enero de 2019 y he dado un paseo solo por tres tiendas on-line porque el ir en silla de ruedas agota, he empezado por Cortefiel, más que nada porque tengo cerca de mi domicilio una de sus tiendas.

Me he sentido con la curiosidad de saber cómo lo afrontarían las personas con problemas al identificar los colores, en Cortefien han puesto lo más genérico, chaqueta de terciopelo y luego cuando te llegue veras que era azul no negra.

Uno de mis favoritos es la tienda de H&M, me hace gracia porque si les preguntas por accesibilidad o diseño UX los diseñadores de la web te pueden decir ¿y eso existe?, la verdad visualmente es genial, pero te muestran la prenda con una modelo y si quieres ver la prenda sola tienes que pulsa con el ratón para poder observarla, ideal para las personas que solo usan el teclado para navegar.

Pero voy a pasar a mi “amor platónico” ZARA, sobre todo porque tendría que ser el ejemplo, porque si una empresa fuerte lo aplican crea la política del “culo veo, culo quiero”.

Según de la presentación de una prenda es ABRIGO BOLSILLOS CAPUCHA, que es marrón y de talla única te enteras cuando te llegue, no aparece en la captura de pantalla que he realizado te viene un aviso en letras pequeñas, juntas y en un rojo suave la frase siguiente. La opción “Ver disponibilidad en tienda” estará desactivada durante el período de rebajas, ideal para los que tenemos problemas de color.

Lo que deseo aparte de sacarle los colores es decirles que están perdiendo dinero y todo por no pensar en los clientes, lo peor es ZARA con todo el poder y hacen esto, si pagarán un 5% de perdidas en bolsa por cada día que no cumplen con la accesibilidad espabilarían.

Metro de Madrid y su inaccesibilidad al color

¿Alguna vez has creido que el mapa del metro de Madrid parece confuso? Pues imagine intentar usarlo, pero no podría distinguir fácilmente los colores de cada línea.

Al año vienen a Madrid cerca de 12 millones de visitantes más los pasajeros de la región hacen un buen numero de y usuarios del Metro de Madrid  pero alguno sufré discapacidad visual al color, exactamente 8% de los hombres y 0,5% de las mujeres según estudios , supongo que la estudiosa Cristina Cifuentes y su consejero de transportes lo tendrán presente, hoy no,mañana

Ministerio de indutria inaccesible según lo mires

Destaco esté error pues personalmente no soy partidiarió del degradado eso hace muy atractiva la web pero en temás de accesibilidad no es nada aconsejable. La barra de navegación esta diseñada con un degradado azul.

Si tu esta barra la analizas con el azul de la parte superior del texto de los enlaces, te dá error de verificación.

Pero si la analizas con el azul inferior el resultado es diferente es  valido legalmente.

Es mi opinión pero usar un degradado no es muy aconsejable, asumo que es más atractivo visualmente pero las personas con problemas de visión sufrirán.

Según la pagina referenté al tema de la accesibilidad la última revisión el 28/01/2016. Estamos en Marzo del 2018 y no se revisó, esperó que para la proxima vez se tenga presente que todas las discapacidades no son de personas con visión 100% nula.

Chromatic Vision Simulator app de problemas de color

Chromatic Vision Simulator . Estos son excelente app para que las personas experimenten lo que es tener déficit de color, lo que aumenta la conciencia y permite a los diseñadores comprobar que sus diseños estarán disponibles de forma inmediata.

Iberia express,la accesibilidad se quedó en tierra

Los que deseamos viajar aún módico precio miramos todas las opciones, compañias...En esa búsqueda he caído en la web de Iberia Express  es una aerolínea española propiedad de Iberia. Se trata de una aerolínea de bajo coste que tiene como objetivo la operación de vuelos de corto y medio radio, es de tan bajo coste que han dicho la accesibilidad, la suprimimos, total somos de bajo coste.Yo padezco una discapacidad visual a los colores y hay secciones de la web que no me ayudan para nada.

Han tenido el detalle de crear una pagina solo para pasajeros con necesidades especiales.

Pero se han olvido de crear una web para usuarios con necesidades especiales.
.

La idea de ellos ha sido crear un menú principal en el que si tienes una dificultad al color no sabes si son enlaces o texto, para diferenciarlos se añade con CSS que esos enlaces contengan abajo de el un subrayado. Esto también ocurre en las denominadas "migas de pan" donde se señala la ruta para llegar a la pagina pasajeros con necesidades especiales. Es curioso que en  esa parte de la pagina no se tenga  presente pero si al señalar los hipervínculos a menores acompañados...

Como he reiterado en algún momento mi intención es levantar la voz todo lo que se pueda para que se tenga presenté la  accesibilidad web.

Air Europa, si eres discapacitado no entres en nuestra web

Cómo parte de los ciudadanos de este país usará los días de Semana Santa para desconectar un poco, para eso he entrado en la web de Air Europa y me he quedado perplejo.

Por mi suerte o desgracia ciertos colores me afectan a la visión y crear un botón de buscar con fondo gris y texto en blanco no me ayuda.

Y eso solo en el buscador no habló de descripción de su sedé social o de sus redes sociales. Pero no me he quedado allí he activado el lector de pantalla y ¿Donde esta el idioma principal del documento?.

Seamos sinceros han creado un CMS con una portada muy atractiva pero ¿y la accesibilidad?, supongo que han dicho ¿para que? que ¿la ley me 56/2007 me obliga? me la saltó, que va ha ser esto ¿mis aviones con discapacitados? pierdo status..Es lamentable que nos discriminen tanto somos personas no un objeto que se abandona porque es sordo, ciego o va en silla de ruedas.

El Corte Ingles y sus compras inaccesibles

Seguro de una de las preocupaciones de El Corte Inglés es saber porque no venden tanto como otras tiendas on-line y no solo es por los precios también porque se están cerrando al 20% de mercado de la discapacidad, como he mostrado en la imagen principal cómo tengas un problema de color te quedas sin comprar no es posible identificar si la prenda es azul, verde o amarilla. Supongo que en el desarrollo han dicho ¿para que?, pensado así ellos solos se estan discriminando, es cierto que las mujeres tienen un indice inferior a los problemas relacionados con el color pero un poco de aquí otro de allí son muchos puñados.
Es frustrante y cabrea que participen cómo sponsors o cómo expertos en soluciones en materia de accesibilidad y descuidar  el diseño de su tienda on-line es su peor marca. Supongo cómo la mayoría de estas empresas tendrán una tienda on-line adaptada a la legislación de ese pais y si esta es más sancionadora y estricta se preocuparán más. Es una pena es un gasto de recursos y medios incomprensible.

Blog "Versión Accesible" de Ilunion

Hoy leyendo el Twitter me he encontrado con la noticia.
Os presentamos el nuevo proyecto de @ILUNION Salud y Aristia: 'Versión Accesible', un blog con información de eventos culturales y de ocio accesibles, como películas, teatro, ópera o museos.

Alguno que lea esta entrada podra decir-bua¡ esta resentido- me dá igual esa teoría no me conoce para opinar eso, yo solo digo lo que veo. Al entrar en el blog algo me extraño,¿realizado con WordPress? me extraño que yo sepa usan Drupal pero lo que ya me mató es mirar los botones de seguir y Facebook en fondo morado con letras en negro.Mirando el contexto de la web entendí que lo visual importa poco pues son películas con audio transcripción.

Supongo que tendrán presente que en el mundo de la discapacidad no solo están los ciegos totales y que las pautas WCAG 2.0 no solo dicen en la pauta 1.4.3 La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 4.5:1, excepto en los siguientes casos: (Nivel AA)

Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 3:1.

Incidental: Los textos o imágenes de texto que forman parte de un componente inactivo de la interfaz de usuario, que son simple decoración, que no resultan visibles para nadie o forman parte de una imagen que contiene otros elementos visuales significativos, no tienen requisitos de contraste.

Logotipos: El texto que forma parte de un logo o nombre de marca no tiene requisitos de contraste mínimo.

Para referirsé a ellos. Tendrian que tener más cuidado en lo que se publica.

CIS, el gráfico de la situación politica no importa

Ya sé que es mucho trabajo y es difícil cobrar un sueldo por hacer graficas de excel pero si estás allí ¿que importa hacer tu trabajo bien?, ¿es mucho pedir?.
Una persona sin problemas de  visión podrá entender el gráfico, cada linea marca un sentido pero cómo sufras acromatopsia te quedas sin entender el gráfico (gráfico primero o gráfico en blanco y negro), supongo que las cabezas pensantes del CIS dirán-bua¡, son 3 gatos-, si pero esos tres gatos están pagando tu sueldo, tu hipoteca y porque no, el colegio privado de tus hijos. La verdad no me  extraña esta falta de consideración hacia las personas con diversidad funcional, ya que la web usa el nivel A de las WCAG 1.0¡ anda que no esta desfasada desde 1999 no han tenido tiempo de pensar en cómo hacer que los gráficos lo puedan entender los discapacitados visuales.

Personalmente una institución del gobierno, que esta fuera de la ley en lo que se refiere a accesibilidad web poco me puede dar de seguridad referido a sus datos, lo principal son sus clientes, en este caso la población y no les tiene ningún  respeto, solo el dia de cobro.

Asepeyo atropella la accesibilidad web

Hace años cuando me decián Asepeyo me venia al recuerdo la curva de Mostoles que erá conocida por los futuros conductores. Ahora por no cumplir la ley 56/2007 o que es lo mismo la ley sobre accesibibilidad web, lo que me a llamado la atención es sus encabezados,<h1>,<h2>.... Fracias que sabemos que hemos idó a la web de Asepeyo porque el <h1> dice ¿quieres mejorar la salud de tu empresa?, no te dicé donde estas, eso aúnque no afecta a la accesibilidad si al posicionamiento SEO.

Lo que si incumple la accesibilidad es la sección opinan (entre otras).

Supongo que no opinara sobre el poco contraste entre las palabras  y el fondo, porque no es valido para las personas con problemas de visión.

Formularios, el error de los colores

Una práctica común al diseñar formularios es marcar un campo de entrada obligatorio en un color diferente

Es importante mostrar un símbolo de error como en este caso o tener una etiqueta que dé indicaciones indicando el error.

Recuerde la pauta 1.4.1 que dicé: El color no se usa como único medio visual para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.

El color si que importa

Cuando diseñamos una web, no pensamos que hay gente que no percibe los colores cómo nosotros, uno ejemplo son los diagramas.

Verde y rojo son los colores más comunes que son difíciles de distinguir

Otro gran problema son los gráficos circulares.









Si realmente desea utilizar un gráfico circular, ponga sus etiquetas en el gráfico.

Los selectores de color sin etiquetas crean una barrera para las personas con ceguera de color.

En su lugar, etiquete los colores. Esto ayudará a todos los usuarios, ya que puede ser difícil ver la diferencia entre ciertos colores

Un error muy tipico es que mucha gente se basa en el color para monstrar si una casilla esta activada o no
Una solución simple es simplemente es usar casillas de verificación 

Formularios accesibles respetando el color

Dicen que la belleza está en el ojo del espectador. Como diseñador, debes recordar que lo mismo sucede con el color y con todas las habilidades visuales. Se calcula que el 4,5% de la población mundial padece daltonismo (1 de cada 12 hombres y 1 de cada 200 mujeres), 4% sufren de visión baja (1 de cada 30 personas) y 0,6% de ceguera (1 de cada 188 personas). Es fácil olvidar que estamos diseñando también para este grupo de usuarios ya que la mayoría de los diseñadores no experimentamos tales problemas.
Los productos de hoy deben ser accesibles para todos, independientemente de las habilidades de una persona.
La creación de diseños accesible parece una tarea difícil. Afortunadamente, a dia de hoy no es necesario convertirse en un experto en problemas de discapacidad visual; Puede asegurarse de que su diseño sea bueno para estos usuarios, teniendo en cuenta algunas prácticas.

No use el color solo para transmitir significado

Hay muchos tipos de ceguera al color , siendo las más comunes tres tipos, la protanomalía, o reducción de la sensibilidad a la luz roja, deuteranomalía, o reducción de la sensibilidad a la luz verde, y tritanomalía, o reducción de la sensibilidad a la luz azul. Todo se reduce a no ver el color claramente o no ser capaz de diferenciar entre ciertos colores.

Alertas en formularios

Los mensajes de éxito y de error suelen ser de color verde y rojo, respectivamente. Pero el rojo y el verde son los colores más afectados por la deficiencia de la visión del color. Estos colores pueden ser difíciles de distinguir para las personas con deuteranopia o protanopía.
Como se señala en las directrices del W3C , el color no debe utilizarse como el único medio visual para transmitir información, indicando una acción, solicitando una respuesta o distinguiendo un elemento visual. Los diseñadores tenemos que usar el color para resaltar o complementar lo que ya es visible.

En el formulario que hemos visto anteriormente, un diseñador debe dar mensajes de error más específicos como, "La dirección de correo electrónico que introdujo no es válida" o al menos proporcionar un icono cerca del campo que requiere la atención del usuario.

Imagenes sacadas de: http://www.uxbooth.com/articles/accessibility-visual-design/

Infojobs, el cambio a botones inaccesibles

Somos muchos los usuarios de esté portal para buscar empleo, hace ya unos meses cambiaron el diseño de sus botones buscar, acceder.... Los pusieron con color rojo-naranja nada accesible. La verdad me sorprendió hasta les escribí un twitt preguntando el motivo.

Según ellos lo arreglarían y que para ellos era fundamental la accesibilidad, esa contestación fué el 5 de Mayo del 2017, a día 26 de Junio no se realizo ningún cambio.

Es cierto que esta web no tiene obligación jurídica para tener que tener su web accesible pero si creo que ética..