Boa paleta de cores, utilizável para daltônicos.


13

Estou projetando um gráfico agora, que lentamente terá mais itens adicionados a ele. Gostaria de criar uma lista / ordem de cores para os itens, que será mais útil para o daltônico diferenciar entre cada item. Alguma idéia de como / por onde começar?

Respostas:


14

Se você quiser usar a abordagem "tentativa e erro", sugiro uma ferramenta chamada Color Oracle (plataforma cruzada) que simule tipos de deuteranopia / deuteranomaly, protanopia / protanomaly e tritanopia na tela do computador.

(O Photoshop também possui configurações à prova de daltonismo disponíveis em ViewProof Setup(o CS5 possui, pelo menos). Mas o Photoshop pode ser um pouco exagerado, se você estiver prestes a criar um gráfico.)


1
1 para a prova de photoshop eu estava tentando outro dia. Sua bastante impressionante
JamesHenare

O ponto é que testar é a abordagem correta; escolher uma paleta "segura" será desnecessariamente restritivo.
22611 Charles Stewart

7

Que tipo de daltonismo você está tentando resolver? Esse link

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

deve dar uma boa idéia das várias cores a serem evitadas com base no tipo de daltonismo.

Em geral, tornar qualquer coisa dependente da escolha entre azuis e verdes pode ficar arriscado; convém ver como suas coisas são puramente monocromáticas.

Como existe uma variedade de "daltonismo", você provavelmente também quer sempre ter certeza de que os controles etc. têm redundância (por exemplo, o grande botão vermelho também deve ser rotulado como "botão de autodestruição" em uma bela cor contrastante (preto em vermelho ou branco no vermelho).


boa chamada para redundância
JamesHenare 14/02

1
@Lauren: Bem, você não pode ser muito cuidadoso ao projetar interfaces de usuário para o seu covil do mal ...
lawndartcatcher

sim, e certifique-se de contratar uma criança de cinco anos para testar seus grandes planos. :)
Lauren-Reinstate-Monica-Ipsum

5

Existem muitos tipos de daltonismo. A chave é garantir que haja contraste adequado. Melhor ainda, não confie apenas nas cores - tenha sempre as mesmas informações em forma, contraste ou ordem dos itens. Se sua imagem é fácil de entender em preto e branco, ela passa.


Embora tecnicamente existam muitos tipos, a grande maioria tem deuteranopia ou deuteranomacia mais leve. Quase todo o resto tem protanopia ou protanoma. Todos os itens acima são perda de vermelho-verde. Todos os tipos restantes juntos (azul-amarelo ou monocromático) são menos de 0,01% da população, pelo que entendi. Então, eu viso principalmente a visão normal e a deuteranopia (usando a simulação da Adobe) e depois ajusto um pouco usando a simulação da protanopia.
Jon Coombs

Se você substituir completamente o vermelho por uma cor que não seria usada (normalmente magenta ou laranja), isso ajudará. O Android fez muito disso. (Ou você pode substituir o verde.) Trocar ícones coloridos não é fácil, se você usar vermelho (ou verde) em apenas alguns dos ícones. (Para nós, nem todos os nossos ícones herdados podem ser monocromáticos.) Se você tiver o luxo de paletas trocáveis, poderá otimizar separadamente para o deut. e prot. e até adicione uma terceira opção para tritanopia / tritanomaly. Se você pode trocar, ter um modo de alto contraste (texto claro em bg escuro) é muitas substituições, mas ainda mais útil.
Jon Coombs

4

Eu sou daltônico. "Nós" gostamos de gráficos sendo discriminados usando cores tanto quanto "você" - é que há menos cores em nosso mundo do que as suas. Aqui está uma sugestão pragmática no espírito da regra 80/20.

Se seu primeiro tipo de sensor de cor (proto) não funcionar, sua visão é proto-anópica. Se eles apenas se comportarem um pouco, você é proto-anomoloso. Repita o procedimento para os outros dois tipos de sensor de cores e substitua 'deuter' ou 'trito' por 'proto'. (Eu acho que estes são gregos para 1,2,3).

A oportunidade pragmática surge do fato de que a deuteranomacia é muito mais prevalente do que os outros tipos; 5% de todos os homens. Os outros pontuam menos de 1% nos homens e ainda menos nas mulheres. Portanto, uma solução simples para nós, deuteranomalistas, percorre um longo caminho - eu pessoalmente não quero que eu mesmo configure as cores apenas para poder ver a diferença nas linhas de um gráfico. (O que acontece o tempo todo).

Eu incluí abaixo um pequeno conjunto de cores que eu posso ver a diferença entre sem esforço. Tentei, sem sucesso, colocar mais -, para que você tenha uma idéia de quão pequena a paleta precisa ser.

Nb. Não esqueça que não adianta se referir a essas cores pelo nome na experiência do usuário que você cria. Para nós, Deuts - parece que "você" inventou muitos nomes duplicados desnecessariamente para praticamente as mesmas cores :-)

rgb (255, 204, 153)

rgb (204, 204, 255)

rgb (255, 102, 102)

rgb (139, 230, 2)

vermelho

amarelo

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
O html fragmento eu copiei para mostrar as cores não mostrou-se adequadamente - então deixe-me tentar de novo:
Pete Howard

Aqui você vai jsfiddle.net/kgasj68o
santa

2

O tipo mais comum de daltonismo é o daltonismo vermelho-verde (que pode ser um defeito na detecção do vermelho ou na detecção do verde, mas raramente ambos). Portanto, evite confiar em distinções na parte verde-vermelha do espectro. (Verde claro e laranja claro tendem a parecer iguais a essas pessoas, por exemplo.)

Se você deseja ser especialmente cauteloso, pode colocar suas cores em um eixo azul-amarelo (azul muito profundo; aqua; branco; chartreuse; marrom); todos os problemas vermelho-verde ainda tornam o indivíduo capaz de dizer que o azul é diferente; o amarelo tem a vantagem de ativar os cones verde e vermelho; portanto, se houver um problema com qualquer um deles, ainda será bastante visível. Como alternativa, qualquer extensão em que o brilho aumente (por exemplo, vermelho-> amarelo-> branco) é visível para a maioria das pessoas. Não assuma que o vermelho é diferente do preto, no entanto.


2

Existem algumas ferramentas para o firefox por aí. Exemplo

Afaik, há também um certificado que tem algumas diretrizes. Eu olhei nos meus papéis, mas ainda não o encontrei. O Google certamente dirá algo sobre os diferentes certificados disponíveis para o seu país.


2

Estou ressuscitando isso porque é difícil encontrar exemplos concretos ou instruções.

Você pode usar simuladores para ajudar a atingir esse objetivo, tendo em mente que a segmentação da Deuteranopia cobre a maioria e o suporte à Protanopia também abrange quase todo mundo. (Acredito que o restante seja inferior a 0,01% da população.)

Os produtos da Adobe, como o Illustrator, têm simuladores muito úteis (abra uma nova janela e escolha Exibir> Configuração de prova> Daltonismo ...) que podem mostrar instantaneamente uma versão ao vivo lado a lado à medida que você ajusta suas cores. E também existem ferramentas independentes gratuitas, como o Color Contrast Analyzer.

A seguir, é apenas uma amostra da captura de tela do Illustrator mostrando uma paleta de seis cores (onde a sexta cor é vermelha ou magenta, não ambas) e as duas simulações. O canto inferior esquerdo é o mais crítico, estatisticamente.

Observe que, neste caso, o roxo se tornou apenas marginalmente útil (bastante desbotado e, mesmo assim, ainda tem baixo contraste com o azul e / ou magenta). Além disso, a opção "mais segura" (Magenta completa substituindo Vermelho) pode ser bastante alta. Para a maioria das pessoas com DCV, ajustar a saturação / brilho do vermelho e do verde pode fornecer um contraste reconhecível.

uma paleta esperançosamente segura de cores

(Verifique comigo antes de reutilizar esta paleta / imagem na íntegra.)

Eu recomendo usar o espaço de cores HSL. O HSB (também conhecido como HSV) também é bastante amigável, especialmente se comparado ao RGB ou CMYK. (Para sua informação, apenas os valores de Matiz serão idênticos nos dois sistemas.) Aqui, cada coluna usa um único número de matiz. Você sempre pode extrair os códigos RGB posteriormente, da Adobe ou usando as excelentes ferramentas em colorizer.org . Infelizmente, os códigos hexadecimais RGB são os mais concisos e utilizáveis ​​diretamente pelos programadores, etc., embora se você estiver trabalhando em CSS, ele suporta diretamente HSL (yay).

A saturação de Blue aqui é deliberadamente baixa para (a) ser uma cor de link / botão mais suave e (b) contrastar mais com essas magentas e roxos bem saturados. Dentro de uma coluna, a principal variação é o brilho, mas você também pode obter algumas variações de saturação.


1

Se você não está no Photoshop ou está em uma versão anterior que não possui a exibição de prova de daltonismo mencionada acima, pode verificar o contraste do brilho do seu projeto convertendo para escala de cinza. Ou, se for uma versão anterior do PS, você pode usar uma camada de matiz e saturação com a saturação voltada para baixo ou um mapa de gradiente usando preto para branco como gradiente. Coloque essa camada como a camada superior no seu documento e, sempre que quiser verificar o contraste, ligue-o. Prefiro o mapa do gradiente porque é mais preciso em termos de cores que contrastam entre si em termos de brilho (o vermelho é um pouco mais claro do que se você apenas dessaturar), mas também pode mostrar áreas problemáticas no design. Desde que sua página pareça boa nessa visualização, ela deve ser aceitável para um usuário daltônico.


0

insira a descrição da imagem aqui

Figura 1: Teste de daltonismo de Ishihara .

Acabei de responder a uma pergunta semelhante, em certa medida:

O que é uma boa fonte de paletas de cores para fornecer a um usuário daltônico?

O resultado básico é: vale a pena investigar a experiência específica de daltonismo da sua base de usuários (pois há uma variação considerável); sua paleta provavelmente evoluirá do que você pode ver através dos olhos daltônicos.

Imagens relacionadas:

Daltônico vs tricromático


Mas parece estranho que, dadas as formas comuns de daltonismo, não haja sites que listem apenas paletas convenientes. Parece reinventar a roda de cada vez.
dumbledad

0

Eu sei que já respondi isso q - mas acabei de encontrar isso:

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

... que é um simulador de daltonismo que parece particularmente adequado para a sua tarefa. Eu olhei para ela e me senti tão mal pelos daltônicos que fui obrigada a pensar em paletas que também funcionariam para eles, por compaixão. Realmente - não estou totalmente brincando; dar uma olhada.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.