Buena paleta de colores, utilizable para daltónicos.


13

Estoy diseñando un gráfico en este momento, que lentamente tendrá más elementos agregados. Me gustaría crear una lista / orden de colores para los elementos, que será más útil para que el daltónico diferencie entre cada elemento. ¿Alguna idea de cómo / dónde comenzar?

Respuestas:


14

Si desea utilizar el enfoque de "prueba y error", sugeriría una herramienta llamada Color Oracle (multiplataforma) que simula deuteranopia / deuteranomalía, protanopia / protanomalía y tritanopia -tipos de daltonismo en la pantalla de su computadora.

(También Photoshop tiene configuraciones a prueba de daltonismo disponibles en ViewProof Setup(CS5 tiene, al menos). Pero Photoshop puede ser un poco exagerado, si está a punto de diseñar un gráfico).


1
+1 para prueba de Photoshop lo estaba probando el otro día. Es bastante impresionante
JamesHenare

El punto es que la prueba es el enfoque correcto; elegir una paleta "segura" será innecesariamente restrictivo.
Charles Stewart

7

¿Qué tipo de daltonismo estás tratando de abordar? Este enlace

http://en.wikipedia.org/wiki/Color_blindness

debería darle una buena idea de los distintos colores que debe evitar según el tipo de daltonismo.

En general, hacer que todo dependa de elegir entre azules y verdes puede volverse incierto; Es posible que desee ver cómo se ven sus cosas como puramente monocromáticas.

Dado que existe un rango de "daltonismo", es probable que también desee asegurarse siempre de que los controles, etc. tengan redundancia (por ejemplo, el gran botón rojo también debe etiquetarse como "Botón de autodestrucción" en un bonito color de contraste (negro sobre rojo) o blanco sobre rojo).


buen llamado para la redundancia
JamesHenare

1
Copyright: @Lauren: Bueno, no se puede ser demasiado cuidadoso en el diseño de interfaces de usuario para su mal guarida ...
lawndartcatcher

sí, y asegúrese de contratar a un niño de cinco años para probar sus grandes planes. :)
Lauren-Clear-Monica-Ipsum

5

Hay muchos tipos de daltonismo. La clave es asegurarse de que haya un contraste adecuado. Aún mejor, no confíe solo en el color: tenga la misma información siempre cubierta en forma, contraste u orden de los elementos. Si su imagen es fácil de entender en blanco y negro, pasa.


Si bien técnicamente hay muchos tipos, la gran mayoría tiene deuteranopia o la deuteranomalía más leve. Casi todos los demás tienen protanopia o protanomalía. Todo lo anterior es una pérdida de rojo-verde. Todos los tipos restantes juntos (azul-amarillo o monocromo) son menos del 0.01% de la población, según tengo entendido. Entonces, principalmente apunto a la visión normal y la deuteranopia (usando la simulación de Adobe) y luego retoco un poco usando la simulación de protanopia.
Jon Coombs

Si reemplaza el rojo por completo con un color que de otro modo no se usaría (generalmente magenta o naranja), eso ayuda. Android ha hecho mucho de eso. (O bien, podría reemplazar el verde). Sin embargo, cambiar los iconos de colores no es fácil si usa rojo (o verde) en algunos de sus iconos. (Para nosotros, nuestros íconos heredados no pueden ser todos monocromáticos). Si tiene el lujo de paletas intercambiables, entonces podría optimizar por separado para el deut. y prot., e incluso agregan una tercera opción para tritanopia / tritanomalía. Si tiene intercambiables, tener un modo de alto contraste (texto claro en bg oscuro) es una gran cantidad de sustituciones pero aún más útil.
Jon Coombs

4

Soy daltónico. "A nosotros" nos gusta que los gráficos sean discriminados usando el color tanto como "usted": es que hay menos colores en nuestro mundo que el suyo. Aquí hay una sugerencia pragmática en el espíritu de la regla 80/20.

Si su primer tipo de sensores de color (proto) no funciona, su visión es protoanópica. Si se portan mal un poco, eres protoanomol. Repita para los otros dos tipos de sensor de color y sustituya 'deuter' o 'trito' por 'proto'. (Creo que estos son griegos para 1,2,3).

La oportunidad pragmática surge del hecho de que la deuteranomalía es mucho más frecuente que los otros tipos; 5% de todos los hombres. Los otros obtienen menos del 1% en los hombres, y aún menos en las mujeres. Entonces, una solución simple para nosotros, los deuteranomalistas, es muy útil: personalmente no quiero tener que configurar los colores solo para poder ver una diferencia en las líneas de un gráfico. (Lo que sucede TODO el tiempo).

He incluido a continuación un pequeño conjunto de colores que puedo ver la diferencia entre sin esfuerzo. He intentado sin éxito poner más, así que te da una idea de lo pequeña que debe ser la paleta.

Nótese bien. No olvides que no sirve de nada referirse a estos colores por nombre en la experiencia de usuario que creas. Para nosotros Deuts, parece que "usted" ha inventado una gran cantidad de nombres innecesariamente duplicados para los mismos colores :-)

rgb (255, 204, 153)

rgb (204, 204, 255)

rgb (255, 102, 102)

rgb (139, 230, 2)

rojo

amarillo

rgb (51, 51, 255)

rgb (153, 153, 153)

rgb (153, 0, 0)

rgb (51, 51, 51)

rgb (0, 0, 102)

rgb (120, 102, 75)


1
El fragmento de HTML que copié en para mostrar los colores no se mostró correctamente - así que vamos a tratar de nuevo:
Pete Howard


2

El tipo más común de daltonismo es el daltonismo rojo-verde (que puede ser un defecto en la detección del rojo o en la detección del verde, pero raramente ambos). Por lo tanto, evite confiar en las distinciones en la parte rojo-verde del espectro. (El verde claro y el naranja claro tenderán a ser iguales para esas personas, por ejemplo).

Si desea ser especialmente cauteloso, puede colocar sus colores en un eje azul-amarillo (azul muy profundo; aguamarina; blanco; chartreuse; marrón); todos los problemas rojo-verde aún hacen que el individuo pueda decir que el azul es diferente; el amarillo tiene la ventaja de activar los conos verde y rojo, por lo que si hay un problema con cualquiera de ellos, todavía es bastante visible. Alternativamente, cualquier estiramiento donde el brillo aumenta (por ejemplo, rojo-> amarillo-> blanco) es visible para la mayoría de las personas. Sin embargo, no asuma que el rojo es diferente al negro.


2

Hay algunas herramientas para Firefox por ahí Ejemplo

Afaik, también hay un certificado que tiene algunas pautas. Revisé mis papeles pero no los he encontrado hasta ahora. Google seguramente dirá algo sobre los diferentes certificados disponibles para su país.


2

Estoy resucitando esto porque es difícil encontrar ejemplos concretos o procedimientos.

Puede usar simuladores para ayudar a lograr este objetivo, teniendo en cuenta que atacar a Deuteranopia cubre a la mayoría y apoyar a Protanopia también cubre a casi todos los demás. (Creo que el resto es menos del 0.01% de la población).

Los productos de Adobe como Illustrator tienen simuladores muy útiles (abra una nueva ventana y elija Ver> Configuración de prueba> Ceguera de color ...) que puede mostrarle instantáneamente una reproducción en vivo de lado a lado mientras ajusta sus colores. Y también hay herramientas independientes gratuitas, como Color Contrast Analyzer.

La siguiente es solo una captura de pantalla de muestra de Illustrator que muestra una paleta de seis colores (donde el sexto color es Rojo o Magenta, no ambos) y ambas simulaciones. El de abajo a la izquierda es el más crítico, estadísticamente.

Tenga en cuenta que en este caso el púrpura se ha vuelto marginalmente útil (bastante desvaído, y aún así tiene un bajo contraste con el azul y / o el magenta). Además, la opción "más segura" (Magenta completa reemplazando Rojo) puede ser bastante ruidosa. Para la mayoría de las personas con ECV, ajustar la saturación / brillo del rojo y el verde puede proporcionar un contraste reconocible.

una paleta con colores seguros

(Consulte conmigo antes de volver a utilizar esta paleta / imagen en su totalidad).

Recomiendo usar el espacio de color HSL. HSB (también conocido como HSV) también es bastante amigable, especialmente en comparación con RGB o CMYK. (Para su información, solo los valores de tono H serán idénticos en los dos sistemas). Aquí, cada columna usa un solo número de tono. Siempre puede extraer los códigos RGB más tarde, ya sea de Adobe o utilizando las excelentes herramientas de colorizer.org . Lamentablemente, los códigos RGB hexadecimales son los más concisos y directamente utilizables por los programadores, etc., aunque si está trabajando en CSS, es directamente compatible con HSL (yay).

La saturación del azul aquí es deliberadamente baja para (a) ser un enlace / color de botón más suave y (b) para contrastar más con estas magentas y púrpuras bien saturadas. Dentro de una columna, la variación principal es el brillo, pero también puedes salirte con alguna variación de saturación.


1

Si no está en Photoshop o está en una versión anterior que no tiene la vista de prueba de daltonismo mencionada anteriormente, puede verificar el contraste de brillo de su diseño mediante la conversión a escala de grises. O, si se trata de una versión anterior de PS, puede usar una capa de matiz y saturación con la saturación hacia abajo, o un mapa de gradiente que usa negro a blanco como gradiente. Coloque esa capa como la capa superior en su documento, luego, cada vez que desee comprobar el contraste, actívelo. Prefiero el mapa de gradiente porque es más preciso en términos de qué colores contrastan entre sí en términos de brillo (el rojo se muestra un poco más claro de lo que es si solo desaturar), pero cualquiera puede mostrar áreas problemáticas en el diseño. Mientras su página se vea bien en esa vista, debería estar bien para un usuario daltónico.


0

ingrese la descripción de la imagen aquí

Figura 1: Prueba de daltonismo de Ishihara .

Acabo de responder una pregunta similar, con cierta extensión:

¿Cuál es una buena fuente de paletas de colores para proporcionar a un usuario daltónico?

El resultado básico es: vale la pena investigar la experiencia de daltónico específica de su base de usuarios (ya que existe una variación considerable); su paleta probablemente evolucionará de lo que podría ver a través de los ojos daltónicos.

Foto relacionada:

Daltónico vs tricromático


Pero parece extraño que dado lo comunes que son algunas formas de daltonismo, no hay sitios web que solo enumeren paletas convenientes. Se siente como reinventar la rueda cada vez.
Dumbledad

0

Sé que ya respondí esto q, pero acabo de encontrar esto:

http://disturbmedia.com/max/colour-blindness.html

... que es un simulador de daltonismo que parece particularmente adecuado para su tarea. Lo miré y me sentí tan mal por el daltónico que me vi obligado a pensar en paletas que también funcionarían para ellos, por compasión. Realmente, no estoy bromeando por completo; echar un vistazo.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.