1. Design & Illustration
  2. Theory
  3. Color Theory

Creando un Diseño Gráfico e Ilustración para Personas  Cegadas al Color (Daltonicos)

Scroll to top
Read Time: 17 min

() translation by (you can also view the original English article)

El daltonismo es una deficiencia de la visión que afecta a un gran número de personas en todo el mundo. Ya sea que lo sepamos o no, nosotros como diseñadores tenemos un gran impacto en sus vidas diarias a través del trabajo que creamos y desarrollamos a nuestro alrededor. Siendo ese el caso, creo que deberíamos tomarnos un momento y explorar algunas soluciones simples pero eficaces que podrían ayudar a mejorar su situación y, por lo tanto, la calidad de sus vidas.

1. ¿Qué Es El Color? Una Breve Definición

Antes de que podamos entender completamente qué es el daltonismo, primero debemos tomar un par de momentos y hablar sobre el color, lo que es y cómo se comporta.

Según Google, el nombre del color se define como:

 "La propiedad que posee un objeto de producir sensaciones diferentes en el ojo como resultado de la forma en que refleja o emite luz".

Ahora, la luz por si misma está hecha de múltiples colores que tienen diferentes longitudes de onda, donde el rojo es el más largo que los humanos pueden ver, mientras que el violeta es el más corto.

Lo sabemos desde que en 1666 Sir Isaac Newton armó un pequeño experimento en el que tomó un haz de luz blanca y lo pasó a través de un prisma de vidrio. Lo que observó debe haber sido increíble en ese momento dado que el prisma dividió el rayo en una banda de siete colores compuestos que llamó el "espectro". El orden de estos colores desde el extremo inferior del espectro es violeta (V), índigo (I), azul (B), verde (G), amarillo (Y), naranja (O) y rojo (R), que ahora llamamos ROYGBIV.

light dispersion examplelight dispersion examplelight dispersion example

Consejo rápido: puede ver el experimento prismático de Newton en acción yendo al canal YouTube de MITK12Videos donde le dan una explicación detallada de la causa del fenómeno de dispersión de la luz.

2. ¿Cómo Nuestros Ojos "Ven" El Color?

Dependiendo de sus propiedades físicas (absorción de la luz, espectros de emisión, etc.), un objeto puede individualmente reflejar o absorber estos siete colores más o menos, otorgándole la propiedad que llamamos color.

Entonces, cuando decimos que vemos un color específico, realmente vemos la cantidad de color reflejada por la superficie de un objeto cuando es golpeado por una fuente de luz. Cuando un objeto refleja todas las longitudes de onda, lo vemos como blanco; cuando los absorbe a todos, es negro.

Podemos visualizar estas propiedades debido a los millones de células sensibles a la luz que se encuentran dentro de nuestras retinas, que procesan la luz en impulsos nerviosos y luego pasan a la corteza del cerebro a través del nervio óptico.

Estas células vienen en dos formas diferentes: varillas y conos. Las varillas están altamente concentradas alrededor del borde de la retina (en algún lugar alrededor de 90 millones de células para los humanos) y transmiten principalmente información en blanco y negro debido al hecho de que contienen un solo fotopigmento, siendo las que nos ayudan a ajustarnos a un ambiente más oscuro .

Los conos, por otro lado, se concentran en el centro de la retina (4,5-6 millones de células) y pueden capturar tres longitudes de onda diferentes: S (corta), M (media) y L (larga).

Los conos cortos suelen denominarse "azules" debido a que proporcionan información de color para esa longitud de onda de luz específica. Los conos medianos se conocen como "verdes", mientras que los largos se conocen como "rojos".

La visión de color normal utiliza los tres tipos de conos de luz (rojo, verde y azul) y se conoce como tricromacia.

De hecho, el espacio de color RGB con el que trabajamos e interactuamos a diario se crea alrededor de nuestra visión tricromática determinada por estos tres tipos de conos, donde toda y cada imagen se construye utilizando una combinación de solo tres colores.

3. ¿Qué Es La Ceguera al Color?

Ahora tenemos una idea básica de qué es el color, pero ¿qué es el daltonismo?

Bueno, mucha gente piensa que ser daltónico significa que ves el mundo en blanco y negro, pero eso no es cierto en realidad.

Como señala la versión en línea del Medical Dictionary, el daltonismo es:

"Una condición anormal caracterizada por la incapacidad de distinguir claramente diferentes colores del espectro".

Una persona que es daltónica generalmente nace con esta condición, que está determinada por un gen defectuoso que se encuentra dentro del cromosoma X. Según la Academia Estadounidense de Oftalmología, "el daltonismo puede ocurrir cuando una o más de las células del cono de color están ausentes, no funcionan o detectan un color diferente del normal".

Color Blind Awareness afirma que la condición afecta aproximadamente a 1 de cada 12 hombres (8%) y 1 de cada 200 mujeres en todo el mundo.

4. ¿Cuáles Son los Diferentes Tipos de Daltonismo?

Como aprendimos hace unos momentos, nuestros ojos tienen tres tipos de células de cono. Dependiendo de cuál de ellos se vea afectado, una persona puede sufrir de una de estas tres condiciones:

4.1. Daltonismo Rojo-Verde

Según el National Eye Institute (NEI), el tipo más común de daltonismo se debe a "la pérdida o función limitada del cono rojo (conocido como protan) o del cono verde (deutran) fotopigmentos " que dependiendo de su gravedad puede conducir a:

  • Protanomalía: cuando el fotopigmento del cono rojo de la persona es anormal, lo que hace que los colores rojo, naranja y amarillo parezcan más verdes.
example for protanomalyexample for protanomalyexample for protanomaly
  • Protanopia: cuando no hay células de cono rojo que funcionen, el rojo aparece como negro y ciertos tonos de naranja, amarillo y verde aparecen de color amarillo.
example for protanopiaexample for protanopiaexample for protanopia
  • Deuteranomalía: cuando el fotopigmento del cono verde de la persona es anormal, lo que hace que el amarillo y el verde aparezcan más rojos, lo que dificulta distinguir el violeta del azul.
example for deuteranomalyexample for deuteranomalyexample for deuteranomaly
  • Deuteranopia: cuando no hay células de conos verdes en funcionamiento, los rojos aparecen de color marrón amarillento y los verdes como beige.
example for deuteranopiaexample for deuteranopiaexample for deuteranopia

4.2. Daltonismo Azul-Amarillo

En comparación con el daltonismo rojo-verde, el daltonismo azul-amarillo es más raro, y aparece cuando los fotopigmentos del cono azul faltan o tienen una función limitada.

Dependiendo del caso, podemos tener:

  • Tritanomalía: cuando las células del cono azul de la persona tienen una función limitada, lo que hace que el azul parezca más verde y dificulta distinguir el amarillo y el rojo del rosa.
example for tritanomalyexample for tritanomalyexample for tritanomaly
  • Tritanopia: cuando faltan las células del cono azul de la persona, lo que hace que el azul parezca verde y amarillo violeta o gris claro.
example for tritanopiaexample for tritanopiaexample for tritanopia

4.3. Daltonismo Completo

Para aquellos que no experimentan ningún color en absoluto, sufren de lo que se llama monocromía, que es cuando ven el mundo en tonos de gris que van del negro al blanco

example of monochromacyexample of monochromacyexample of monochromacy

5. ¿Cómo Sabes Si Eres Daltónico?

Si quiere asegurarse de que sus ojos funcionan correctamente, siempre debe visitar a un optometrista, que aplicará una prueba de percepción del color simple llamada "prueba de color Ishihara". El nombre proviene de su creador, el Dr. Shinobu Ishihara, quien en 1917 publicó un método simple pero ingenioso para determinar si una persona es daltónica o no usa placas de colores (placas de ishihara). Cada placa contiene múltiples puntos que varían en color y tamaño y se muestran dentro de un patrón circular, formando un número en el centro.

ishihara plate exampleishihara plate exampleishihara plate example

Si puede distinguir correctamente el número, significa que tiene una visión de color normal. Si tiene problemas para ver la forma de los números, es posible que sufra uno de los tipos de daltonismo de los que hablamos hace unos momentos.

Si todavía no desea ir a un oculista, puede realizar el examen en línea usando cualquiera de los siguientes sitios:

6. ¿Cómo Puedes Ver lo Que Ve una Persona Daltonica?

Como diseñador y creativo visual, debe comprender que su trabajo deberá ser visible no solo para las personas con visión normal, sino también para aquellas que sufren de un tipo de daltonismo.

El primer paso para encontrar una solución al problema es comprender cómo se manifiesta, tratando de ver qué vería una persona daltónica.

Afortunadamente, hay un par de soluciones que le permiten tomar una imagen normal y aplicarles filtros para tener una idea de cómo se vería con una visión deficiente.

6.1 Simuladores de Daltonismo en Línea

Si se trata de imágenes normales, estos simuladores de daltonismo pueden generar rápidamente una imagen de lo que vería una persona que padece una afección específica:

  • Coblis de Colorblindness.com es probablemente la solución más exhaustiva, ya que genera imágenes para todos los tipos de daltonismo.
example of coblis color simulatorexample of coblis color simulatorexample of coblis color simulator
  • Vischeck es un generador más simple que le da la capacidad de previsualizar una imagen lado a lado de la deficiencia de visión de color tanto original como simulada.
example of vischeck color simulatorexample of vischeck color simulatorexample of vischeck color simulator

Si eres un diseñador web y quieres ver cómo se vería tu proyecto para una persona que sufre de daltonismo, Toptal ha creado un pequeño y elegante Filtro para Daltonicos que toma cualquier sitio web y lo convierte usando uno de los cuatro filtros disponibles.

example of toptal color blind filterexample of toptal color blind filterexample of toptal color blind filter

6.2. Simuladores Locales para Daltonicos

Desde cargar su proyecto a la web y luego comparar las imágenes hacia adelante y hacia atrás puede llevar un poco de tiempo, hay un par de soluciones de software que pueden ayudarlo a lograr el mismo resultado más rápido.

  • Adobe Illustrator: si no lo sabía, Illustrator viene con dos pruebas de color (Protanopia y Deuteranopia) en su menú Ver (Ver > Configuración de Prueba), que lo ayudan a ver rápidamente cómo se vería su proyecto cuando lo vea una persona daltónica.
example of color blindness filter within adobe illustratorexample of color blindness filter within adobe illustratorexample of color blindness filter within adobe illustrator
  • Adobe Photoshop: las mismas pruebas de color están incluidas en Photoshop (Ver > Configuración de Prueba), lo que le ayuda a identificar y corregir el resultado final.
example of color blindness filter within adobe photoshopexample of color blindness filter within adobe photoshopexample of color blindness filter within adobe photoshop
  • Stark es un complemento gratuito creado para Sketch que le ayuda a seleccionar entre ocho perfiles de color y obtener una vista previa de su diseño como daltónico.
  • Color Oracle es otro simulador gratuito de daltonismo desarrollado por Bernie Jenny que puede instalarse y usarse en Windows, Mac y Linux y fue creado para funcionar independientemente del software creativo que está utilizando.

7. ¿Cómo Afecta el Daltonismo la Calidad de la Propia Vida?

Aunque para las personas daltónicas el mundo a su alrededor parece "normal", ya que la mayoría de las veces es la única forma en que lo han experimentado, la realidad es que generalmente enfrentan dificultades en lo que consideramos tareas simples y cotidianas. Desde cocinar comida hasta conducir un automóvil o elegir qué ropa usar, lo que ven afecta sus reacciones y comportamiento, influyendo directamente en su vida.

Imagine que le gustaría conducir un automóvil, pero nunca puede decir si los semáforos son verdes o rojos sin conocer la posición de cada uno de los tres estados. O tal vez le gustaría cocinar una buena pieza de carne que compró en el mercado local, pero no puede decir si es rara o está bien hecha.

Además, piense en todos los trabajos creativos que le gustaría hacer, pero que nunca podría solicitar, ya que no puede ver realmente lo que todos los demás están viendo.

Estas son solo algunas de las situaciones con las que una persona daltónica tiene que lidiar a diario, así que ¿por qué no intentas aprender cómo podemos ayudarlos aunque sea un poco siguiendo algunas de las soluciones simples que se presentan a continuación?

8. ¿Cómo Puede Ajustar Sus Diseños e Ilustraciones para el Daltonico?

Entonces, en este punto, sabemos qué es el daltonismo y tenemos una idea básica de cómo se ve, lo que significa que ahora podemos hablar sobre encontrar e implementar soluciones para ajustar nuestros proyectos a las personas afectadas por estas deficiencias de visión.

8.1. ¿Qué Colores Funcionan Mejor?

Lo primero que debemos preguntarnos cuando trabajamos en un proyecto (ya sea uno nuevo o uno existente) es qué combinaciones de colores funcionan mejor. Y la respuesta es que realmente no tenemos una lista generalizada, ya que todo depende de los niveles de Saturación y Brillo utilizados para cada color.

Lo que sí sabemos es que hay un conjunto de combinaciones de colores que deben evitarse, ya que puede ser difícil para una persona daltónica diferenciarlos:

  • rojo y verde
  • rojo y marrón
  • rojo y naranja
  • rojo y violeta
  • rojo y negro
  • verde y marrón
  • verde y naranja
  • verde claro y amarillo
  • azul y verde
  • azul y morado
  • azul y amarillo

Por lo general, el problema surge cuando un diseño se basa en colores que tienen niveles cercanos de matiz, saturación o brillo, lo que los hace parecer tonos del mismo color.

example of color combinations to avoidexample of color combinations to avoidexample of color combinations to avoid

Entonces, nuestro objetivo no es crear un esquema de color que sea claramente identificable por una persona que padece daltonismo, sino hacer posible que distingan un color de otro, aunque no estén seguros de qué color es ese.

8.2. ¿Cómo Usted Puede Arreglar Malas Combinaciones de Colores?

El primer paso para arreglar una mala combinación de colores es notarlo. Aquí es donde las herramientas de simulación de color son útiles, ya que puede observar rápidamente si tiene secciones superpuestas indistinguibles o elementos que son idénticos o simplemente no visibles, pasando por los diferentes filtros disponibles.

Dependiendo del tipo de proyecto creativo en el que esté trabajando, ya sea una ilustración, una aplicación móvil o un tipo de representación de datos gráficos (gráfico de barras, gráfico de líneas o gráfico de pastel), puede usar las siguientes sugerencias para ajustar el resultado final para aquellos que sufren de esta condición.

Use un Tono Diferente

Si echas un vistazo a esta ilustración de un Game Boy clásico, es posible que notes que cuando utilizas un filtro Deuteranopia, la sección superior del dispositivo parece tener un corte, ya que el tono del fondo y el de la pantalla son realmente cercanos en términos de saturación (57,83% para el tono rojo y 42.96% para el verde).

example of bad color combination within an illustrationexample of bad color combination within an illustrationexample of bad color combination within an illustration

Podríamos ajustar la saturación de la sección de la pantalla para aumentar la intensidad del tono, pero como puede ver, en esta situación particular eso no ayudará tanto como nos gustaría.

example of increasing the saturation with no resultexample of increasing the saturation with no resultexample of increasing the saturation with no result

Lo que queremos hacer es ajustar el tono del fondo de rojo a púrpura, que como puede ver creará una clara separación entre las dos secciones.Objetivo de alto contraste

adjusting an illustration using a different hue valueadjusting an illustration using a different hue valueadjusting an illustration using a different hue value

Objetivo de Alto Contraste

Hemos solucionado el problema de fondo, pero como puede ver, algunas secciones de la consola (como el frontal y el lateral) son realmente difíciles de distinguir, ya que usan el mismo valor de tono (0%) y niveles de brillo similares. (92.94% para el frente y 86.67% para el lado). Lo mismo puede decirse del botón d-pad, donde la sección transversal usa un nivel de brillo de 45.88%, mientras que el punto central usa un valor similar de 40.78%.

Cuando esto sucede, puede abordar rápidamente la situación seleccionando las formas respectivas y ajustando sus niveles de saturación y / o brillo hasta que comiencen a destacarse.

adjusting a bad color combination using high contrastadjusting a bad color combination using high contrastadjusting a bad color combination using high contrast

La regla general sería usar el menor número de tintes y sombras posible, y hacer que la obra de arte se destaque, usando alto contraste siempre que sea posible.

Como en la vida real la carcasa de la consola está hecha de plástico blanco, parece justo usar algunos tonos y matices si queremos representarlo con mayor precisión, pero si el proyecto lo permite, siempre puede lograr un mayor contraste mediante el uso de diferentes tonos.

Separa Tus Formas Usando Contornos

Si probó algunas de las soluciones anteriores pero no pudo obtener el resultado deseado, a veces puede aislar las diferentes secciones de una composición mal coloreada utilizando contornos gruesos y oscuros. En el caso de nuestro Game Boy, podríamos convertir algunas de sus formas en contornos y agregar nuevas a aquellos que los respaldan, lo que nos da un resultado más definido.

adjusting bad color combinations using outlinesadjusting bad color combinations using outlinesadjusting bad color combinations using outlines

Agregar o Quitar Colores

Agregar o quitar colores puede hacer o deshacer un diseño, especialmente uno visto por una persona que no puede distinguirlos a todos. Si echamos un vistazo a la versión resumida de nuestra consola, es posible que haya notado que los botones circulares se están combinando con sus contornos.

Podemos solucionarlo fácilmente presentando dos nuevos tonos (amarillo claro y azul) siempre que sepamos qué colores puede ver una persona que padece una deficiencia específica de visión (en nuestro caso, Deuteranopia).

adjusting bad color combinations by adding colorsadjusting bad color combinations by adding colorsadjusting bad color combinations by adding colors

En otras situaciones, es posible que la eliminación de colores mejore el diseño general, ya que a veces es más simple.

Adherirse a un Esquema de Color Monocromático

A veces los colores pueden ser tu mayor enemigo, especialmente cuando se trata de una deficiencia de visión como Deuteranopia, por lo que puede ser una buena idea reducir tu paleta a un esquema de color monocromático.

A menudo, las personas confunden un esquema de color monocromático con uno en escala de grises que consta únicamente de negros, grises y blancos, pero en realidad son dos cosas completamente diferentes.

Según Wikipedia, un esquema de color monocromático se deriva de "un único tono base y se extiende con sus matices, tonos y tintes".

Como puede ver a continuación, al adherirse a un esquema monocromático, puede eliminar todo el riguroso proceso de correspondencia de colores y centrarse en un solo tono desde el que puede crear sombras y tintes utilizando diferentes niveles de saturación y brillo.

adjusting bad color combinations using monochromatic schemesadjusting bad color combinations using monochromatic schemesadjusting bad color combinations using monochromatic schemes

Ir en Escala de Grises

Otra solución para evitar el color por completo es ir completamente en escala de grises. Al hacerlo, eliminas casi todos los pasos anteriores, lo que significa que puedes enfocarte en la obra de arte en sí misma.

adjusting a bad color combination using a grayscale schemeadjusting a bad color combination using a grayscale schemeadjusting a bad color combination using a grayscale scheme

Agregar Textura

Un último método para asegurarse de que su diseño sea claramente comprensible para quienes padecen deficiencia visual es el de agregar textura. Ya sea grano, líneas horizontales o cualquier otro tipo, la textura puede separar y resaltar fácilmente una sección específica de una imagen, ayudándole a romper cualquier límite de color.

adjusting a bad color combination using textureadjusting a bad color combination using textureadjusting a bad color combination using texture

Conclusión

Ya sea que nos demos cuenta o no, el daltonismo es una condición que afecta a un gran número de personas, haciendo su vida diaria más difícil al limitar las cosas que pueden ver y entender a través del filtro de color.

Afortunadamente, como hemos visto, hay varias cosas que nosotros, como diseñadores, podemos hacer para mejorar la calidad de sus vidas, facilitando un poco las cosas paso a la vez.

Realmente espero que este artículo te haya abierto los ojos a un área de diseño que a menudo se pasa por alto, y haya logrado enseñarte algunas nociones clave que puedes implementar en futuros proyectos.

Una vez dicho esto, puede ampliar aún más su conocimiento sobre el color revisando estos artículos increíbles:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads