A equipe escolhe um verde para “aprovado” e um vermelho para “pendente”. Para cerca de 1 em cada 100 homens, que não percebe o verde, os dois viram quase o mesmo tom. O painel continua bonito e passa a mentir para essas pessoas.
A Régua das Cores mostra isso antes de publicar: o contraste de cada cor com o fundo, como a paleta aparece para cada tipo de daltonismo e a cor mais parecida que funciona. A página não tem botões de “próximo”. Os passos deste guia são as seis partes numeradas da tela, e tudo se recalcula enquanto você escreve.
Antes de começar
- Quanto tempo
- Alguns minutos para uma paleta de quatro ou cinco cores.
- O que ter em mãos
- As cores em HEX ou RGB: as da marca, as de um gráfico ou as de um sistema.
- Com quem
- Dá para fazer sem companhia. Se for a identidade visual de um órgão, chame quem cuida da marca para ver o resultado.
- Onde fica salvo
- No seu navegador, e ninguém mais tem acesso. Para levar a paleta, copie a lista ou o código no fim da página.
Passo 1 de 6
Escrever as cores e o fundo
- Cada cor. Escolha no seletor ou escreva em HEX (#2A78D6) ou RGB (rgb(42, 120, 214)). Ao lado, a Régua diz o nome aproximado da cor, o HEX e o RGB. A lixeira tira a cor.
- Cor. Acrescenta mais uma cor à paleta.
- O fundo. Onde as cores vão aparecer. Os botões Branco e Preto preenchem os dois mais comuns.
Passo 2 de 6
Conferir o contraste com o fundo
O WCAG pede 3:1 para gráficos, ícones e texto grande, e 4,5:1 para texto comum. A tabela diz, para cada cor, se passa em cada caso.
- O contraste. A razão entre a cor e o fundo, de 1:1 (igual) a 21:1 (preto no branco).
- Passa ou não passa. Escrito por extenso, com ✓ ou ×, para cada uso.
- Trocar. Quando não passa, a Régua sugere a cor mais parecida que passa: o mesmo tom, só mais claro ou mais escuro. O botão troca na paleta.
Assim
Azul #2A78D6 nas barras de um gráfico, com 4,42:1 sobre o branco.
Assim não
O mesmo azul em texto comum, que pede 4,5:1.
Passo 3 de 6
Ver como cada pessoa enxerga
- Visão típica. A paleta como você escreveu.
- Os tipos de daltonismo. Protanopia, deuteranopia, tritanopia e acromatopsia, que é também como a paleta sai numa impressão em preto e branco. Cada cor diz por escrito como aparece.
- Pares que se confundem. A Régua compara todos os pares e avisa quais ficam parecidos demais.
- Trocar. Sugere uma cor que separa o par e troca na paleta.
Passo 4 de 6
Escolher o texto de cada fundo
Esta parte serve sobretudo para a identidade visual: diz que cor de texto pode ir sobre cada cor da paleta.
- Como ler. Cada linha é a cor do texto; cada coluna, a cor do fundo.
- O resultado. AA serve para texto comum (4,5:1). AAA, para quem precisa de mais contraste (7:1). “Só grande” serve apenas para títulos e texto grande (3:1).
Passo 5 de 6
Ou partir de uma paleta pronta
Se você ainda não tem cores, comece por uma destas. Foram conferidas com as mesmas contas da página.
- Okabe-Ito. A paleta mais usada para daltonismo em artigos científicos. O cartão avisa quais cores ficam abaixo de 3:1 sobre o branco.
- Testar com 3, 4 ou 5. Põe as primeiras cores da paleta nas partes de cima da página. Ela substitui as cores atuais, e a Régua pergunta antes.
- Contraste 3:1. Todas as cores têm pelo menos 3:1 sobre o branco. Boa para quando não dá para escrever o valor em cada peça do gráfico.
Mais abaixo há também escalas de cinza de 3, 4 e 5 tons, para impressão, e o alto contraste em preto e branco com texturas, o mesmo esquema “preto e branco” da Régua dos Gráficos.
Passo 6 de 6
Levar a paleta
- A lista. Nome, HEX e RGB de cada cor, para mandar a quem desenha ou documentar no manual da marca.
- Variáveis CSS. Para quem desenvolve colar no código do site.
- Cores para LaTeX. Para usar as mesmas cores em gráficos e textos de um artigo.
E depois da paleta?
- Escrever os valores nos gráficos. Mesmo com boas cores, a cor não deve ser o único jeito de ler um gráfico. A Régua dos Gráficos já escreve cada valor.
- Conferir a norma. Para aplicativos, a Bússola da NBR 17060 diz o que a norma pede sobre cor e contraste.
Erros comuns
- Testar a cor sem o fundo. Uma cor boa no branco pode falhar no cinza claro do cartão. Ponha o fundo de verdade.
- Usar uma cor de 3:1 em texto comum. Para texto comum, o mínimo é 4,5:1.
- Separar só pela cor. Verde e vermelho para “certo” e “errado” somem para quem é daltônico. Junte uma palavra ou um ícone.
- Esquecer a impressão. A linha da acromatopsia mostra como a paleta sai em preto e branco.
Quando o trabalho é em equipe
A Régua das Cores não está na área logada e não tem arquivo para baixar. Hoje, o trabalho em equipe é passar a paleta: copie a lista de cores ou as variáveis CSS e mande para quem desenha ou desenvolve. Quem recebe pode colar os HEX na própria Régua e conferir de novo.
Perguntas frequentes
A simulação de daltonismo é confiável?
Ela usa as matrizes de Machado, Oliveira e Fernandes (2009), um método muito usado em pesquisa. É uma aproximação: cada pessoa enxerga de um jeito, mas os pares que ela aponta como parecidos costumam ser mesmo difíceis de separar.
Por que o nome da cor às vezes estranha?
O nome é aproximado e serve para conversar sobre a paleta. O que vale é o HEX.
As cores da marca do órgão não passam. E agora?
Use a sugestão da Régua, que mantém o tom e muda só a claridade, para texto e ícones. A cor original pode seguir onde não carrega informação, como um fundo decorativo.
Ninguém escolhe ser daltônico, nem ler o celular no sol do meio-dia. Uma paleta testada é um cuidado pequeno com quem a equipe não está vendo.
Teste a sua paleta
Escreva as cores da marca ou de um gráfico e veja quais combinações funcionam.