# Paletas aptas para daltónicos y cómo probar tus diseños [Canonical HTML page](https://gradiently.design/es/guide/color-blindness-design) La mayor parte del daltonismo no consiste en ver en gris. Consiste en que ciertas parejas de colores se funden en una. Elige colores que difieran en luminosidad y lo tendrás resuelto. ## The short version - Una paleta apta para daltónicos usa colores que se diferencian claramente en luminosidad, no solo en tono, para que sigan distinguiéndose cuando algunos tonos se parecen. - La confusión entre rojo y verde es con mucho el tipo más común de daltonismo; la confusión entre azul y amarillo es mucho más rara, y no ver ningún color es más raro todavía. - La paleta de ocho colores de Okabe e Ito se diseñó para que siguiera siendo distinguible con los tipos comunes de daltonismo y su uso es libre. - Nunca dejes que el color transmita un significado por sí solo: añade también una etiqueta, un icono, un patrón o una posición. - Las herramientas para desarrolladores de Chrome y Edge simulan varios tipos de daltonismo en cualquier página, y una prueba en escala de grises detecta la mayoría de los problemas en segundos. Una **paleta apta para daltónicos** es un conjunto de colores que siguen siendo distintos para quienes confunden ciertos tonos, normalmente rojos y verdes. El truco es separar los colores por luminosidad además de por tono, y no dejar nunca que el color sea la única señal. Un azul oscuro y un naranja claro siguen siendo diferentes para casi todo el mundo; un rojo medio y un verde medio, con una luminosidad parecida, pueden verse como el mismo marrón turbio. Abajo tienes paletas para copiar, las parejas que conviene evitar y tres maneras gratuitas de probar tu trabajo. ## Tipos de daltonismo, en resumen La visión del color depende de tres tipos de conos en el ojo, sensibles más o menos a longitudes de onda largas, medias y cortas. Cuando falta un tipo o está desplazado, algunos colores que la mayoría ve distintos empiezan a parecerse. El [artículo de WebAIM sobre daltonismo](https://webaim.org/articles/visual/colorblind) explica la biología; para el diseño, lo que importa es esta tabla. | Tipo | Conos afectados | Colores que se confunden | Frecuencia | | --- | --- | --- | --- | | Deuteranomalía y deuteranopia | Verde (medio) | Rojo con verde, verde con marrón, azul con morado | La más común | | Protanomalía y protanopia | Rojo (largo) | Rojo con verde y negro, los rojos se ven más oscuros | Común | | Tritanomalía y tritanopia | Azul (corto) | Azul con verde, amarillo con rosa o gris | Rara | | Acromatopsia | Todos | Todo se ve en tonos de gris | Muy rara | Los tipos de rojo y verde se heredan en el cromosoma X, por eso son mucho más frecuentes en hombres que en mujeres. El hilo común: el tono deja de ser fiable, pero **la luminosidad sobrevive**. Una persona con deuteranopia sigue viendo con claridad que un color es más oscuro que otro. Ese único hecho explica todas las reglas que siguen. ## Una paleta apta para daltónicos que puedes copiar El conjunto seguro más conocido es la paleta que propusieron Masataka Okabe y Kei Ito para figuras científicas. Sus ocho colores se eligieron para seguir siendo distinguibles con los tipos comunes de daltonismo, y funciona igual de bien en gráficos, mapas, etiquetas y colores de estado dentro de un producto. - Negro #000000: #000000 - Naranja #e69f00: #e69f00 - Azul cielo #56b4e9: #56b4e9 - Verde azulado #009e73: #009e73 - Amarillo #f0e442: #f0e442 - Azul #0072b2: #0072b2 - Bermellón #d55e00: #d55e00 - Morado rojizo #cc79a7: #cc79a7 La paleta de Okabe e Ito. Usa tan pocos colores como necesites; cuatro o cinco son más fáciles para todos que ocho. Para trabajos de marca, ocho colores suelen ser demasiados. La pareja individual más segura es **azul y naranja**: están a lados opuestos de la línea de confusión entre rojo y verde y difieren en luminosidad, así que casi todo el mundo los lee como distintos. Azul con amarillo, y morado oscuro con verde claro, también funcionan bien. ### Degradados y escalas para datos Para mapas de calor y gráficos que muestran un rango, usa una escala cuya luminosidad cambie de forma constante de un extremo al otro. Una escala de rojo a verde falla dos veces: los extremos confunden a los lectores daltónicos y ambos extremos tienen una luminosidad parecida. De azul a naranja, o un solo tono de oscuro a claro, funciona para casi todos. - Evitar: de rojo a verde: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)` - Seguro: de azul a naranja: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)` - Seguro: de morado oscuro a amarillo: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)` La última escala sigue los colores viridis, muy utilizados: su luminosidad sube de forma uniforme, así que incluso sobrevive a una impresión en escala de grises. ## Parejas que conviene evitar y qué usar en su lugar Algunas combinaciones dan problemas una y otra vez. El rojo `#d7263d` y el verde `#2e9e44` de arriba se ven claramente distintos para la mayoría, pero su luminosidad perceptiva es casi idéntica (en torno al 57% y al 62% en [OKLCH](https://gradiently.design/es/guide/oklch-explained)), así que para alguien con deuteranopia apenas queda nada para distinguirlos. ### Evita juntos - Rojo y verde con luminosidad parecida - Verde y marrón - Azul y morado - Verde claro y amarillo - Rosa y gris, o amarillo y gris claro ### Usa en su lugar - Azul y naranja - Azul oscuro y amarillo claro - Morado oscuro y verde claro - Un solo tono en pasos de luminosidad bien distintos - Cualquier pareja más una etiqueta o un icono Si los colores de tu marca son rojo y verde, no hace falta cambiarlos. Basta con que uno sea claramente más oscuro que el otro y con no usarlos nunca como única diferencia entre, por ejemplo, una ganancia y una pérdida. Una flecha o un signo más y menos lo resuelve para todos. Cómo elegir esos colores desde el principio lo explica [cómo elegir los colores de marca](https://gradiently.design/es/guide/how-to-choose-brand-colors). ## Nunca dependas solo del color Esta es la regla más importante, y además forma parte de las Pautas de Accesibilidad para el Contenido Web. Si la leyenda de un gráfico, un error de formulario, una etiqueta de disponible o un mapa solo se distinguen por el color, algunos lectores pierden el significado. Añade una segunda señal: - **Etiquetas** directamente sobre las líneas y barras del gráfico en lugar de una leyenda de colores. - **Iconos** para los estados: una marca de verificación para el éxito, una cruz o un aviso para los errores. - **Patrones o estilos de línea**, como líneas discontinuas y continuas, en los gráficos. - **Posición y orden**, para que el primer elemento signifique siempre lo mismo. - **Contraste de texto** que cumpla por sí solo, comprobado con un [verificador de contraste](https://gradiently.design/es/guide/color-contrast-accessibility). Los gráficos para redes necesitan el mismo cuidado. Un post que dice «verde significa disponible» sobre un calendario rojo y verde perderá a algunos lectores. Las palabras lo transmiten mejor, y las propias palabras tienen que leerse sobre el fondo, sobre todo en degradados, donde el contraste cambia a lo largo del encuadre. [Texto sobre degradados](https://gradiently.design/es/guide/text-on-gradient) lo trata en detalle. Un anuncio de taller en el que el titular está sobre una zona recargada del degradado con poco contraste de luminosidad Cuando el texto y el fondo tienen una luminosidad parecida, el tono hace todo el trabajo, y eso es justo lo que algunos lectores pierden. El mismo anuncio de taller con una zona más tranquila y oscura detrás del titular para que se lea con claridad Con una zona tranquila y más profunda detrás de las palabras, el contraste está en la luminosidad, que todos los lectores pueden ver. La versión de la derecha es lo que hace un Mark de Gradiently por sí solo: desplaza su zona más tranquila y con mejor contraste detrás del texto, y la tinta automática elige texto claro u oscuro para cada línea, así que la separación viene de la luminosidad y no del tono. ## Cómo probar un diseño para daltonismo 1. **Haz la prueba en escala de grises** Exporta el diseño o haz una captura y pásalo a escala de grises. Si dos colores que significan cosas distintas se convierten en el mismo gris, cambia la luminosidad de uno de ellos. 2. **Simúlalo en el navegador** En Chrome o Edge, abre las herramientas para desarrolladores, abre el menú de comandos, escribe Rendering y usa **Emulate vision deficiencies** para ver la página en vivo con protanopia, deuteranopia, tritanopia o acromatopsia. 3. **Revisa toda la pantalla en gris** Mac y Windows incluyen un filtro de color en escala de grises en sus ajustes de accesibilidad. Actívalo para revisar apps, archivos de diseño y exportaciones, no solo páginas web. 4. **Quita el color y vuelve a leerlo** Pregúntate si cada gráfico, etiqueta y estado sigue teniendo sentido solo con etiquetas e iconos. Si es así, el color es decoración, que es donde debe estar. Las simulaciones son aproximaciones, y la visión del color varía de una persona a otra. Si la accesibilidad importa en tu producto, pide a personas daltónicas que conozcas que miren el resultado real. Para gráficos en concreto, [diseño de infografías](https://gradiently.design/es/guide/infographic-design) profundiza en etiquetado y maquetación, y [armonía de colores](https://gradiently.design/es/guide/color-harmony) te ayuda cuando necesitas una paleta segura que además se vea pensada. ## FAQ ### ¿Qué colores son mejores para personas daltónicas? Azul y naranja son la pareja más segura, seguida de azul y amarillo. Sobre todo, elige colores que se diferencien claramente en luminosidad, para que sigan siendo distintos aunque los tonos se parezcan. ### ¿Qué es la paleta Okabe Ito? Un conjunto de ocho colores (negro, naranja, azul cielo, verde azulado, amarillo, azul, bermellón y morado rojizo) diseñado para seguir siendo distinguible con los tipos comunes de daltonismo. ### ¿Qué colores debo evitar juntos? Rojo con verde, verde con marrón, azul con morado y verde claro con amarillo, sobre todo cuando tienen una luminosidad parecida. ### ¿Cómo puedo ver mi diseño como lo vería una persona daltónica? En las herramientas para desarrolladores de Chrome o Edge, abre el panel Rendering y elige una opción en Emulate vision deficiencies. Una captura rápida en escala de grises también revela los colores que dependen solo del tono. ### ¿Tengo que cambiar unos colores de marca rojo y verde? No. Haz que uno sea notablemente más oscuro que el otro y añade etiquetas o iconos allí donde los colores transmitan un significado.