Cores que todo mundo distingue

Teste o contraste de uma paleta, veja como ela aparece para cada tipo de daltonismo e receba a cor mais parecida que funciona. Serve para gráficos e para a identidade visual de um órgão.

Régua das Cores · em teste

1. As cores

Escolha no seletor ou escreva em HEX (#2A78D6) ou RGB (rgb(42, 120, 214)). Para a identidade visual de um órgão, coloque as cores da marca e veja, no passo 4, quais combinações servem para texto.

azul#2A78D6 · rgb(42, 120, 214)

laranja#EB6834 · rgb(235, 104, 52)

verde#1BAF7A · rgb(27, 175, 122)

amarelo#EDA100 · rgb(237, 161, 0)

Fundo onde as cores vão aparecer

branco#FFFFFF · rgb(255, 255, 255)

2. Contraste com o fundo

O WCAG pede 3:1 para gráficos, ícones e texto grande (a partir de 24px, ou 19px em negrito) e 4,5:1 para texto comum. Quando não passa, a régua sugere a cor mais parecida que passa: o mesmo tom, só mais claro ou mais escuro.

Contraste de cada cor com o fundo branco (#FFFFFF)
Cor	Contraste	Gráficos e ícones (3:1)	Texto grande (3:1)	Texto (4,5:1)	Sugestão
azul#2A78D6 · rgb(42, 120, 214)	4,42:1	Passa para gráficos: azul (#2A78D6)	Passa para texto grande: azul (#2A78D6)	Não passa para texto: azul (#2A78D6)	Para texto: #2876D4
laranja#EB6834 · rgb(235, 104, 52)	3,20:1	Passa para gráficos: laranja (#EB6834)	Passa para texto grande: laranja (#EB6834)	Não passa para texto: laranja (#EB6834)	Para texto: #CD4D0F
verde#1BAF7A · rgb(27, 175, 122)	2,82:1	Não passa para gráficos: verde (#1BAF7A)	Não passa para texto grande: verde (#1BAF7A)	Não passa para texto: verde (#1BAF7A)	Para gráficos: #08A974 Para texto: #11865C
amarelo#EDA100 · rgb(237, 161, 0)	2,17:1	Não passa para gráficos: amarelo (#EDA100)	Não passa para texto grande: amarelo (#EDA100)	Não passa para texto: amarelo (#EDA100)	Para gráficos: #C88805 Para texto: #9E6C0E

3. Como cada pessoa vê

A simulação usa as matrizes de Machado, Oliveira e Fernandes (2009). Duas cores precisam de uma diferença de pelo menos 8 com daltonismo, e de 15 com visão típica, para não se confundirem (diferença em OKLab).

Visão típica

Sem daltonismo

1. azul aparece como azul, #2A78D6
2. laranja aparece como laranja, #EB6834
3. verde aparece como verde, #1BAF7A
4. amarelo aparece como amarelo, #EDA100

Protanopia

Não percebe o vermelho; cerca de 1 em cada 100 homens

1. azul aparece como azul, #4780DA
2. laranja aparece como oliva, #8D7E2D
3. verde aparece como amarelo, #ACA177
4. amarelo aparece como amarelo, #BCA500

Deuteranopia

Não percebe o verde; o tipo mais comum, cerca de 1 em cada 100 homens

1. azul aparece como azul, #2371D4
2. laranja aparece como mostarda, #AD9B30
3. verde aparece como cinza, #9B957D
4. amarelo aparece como amarelo, #CEB810

Tritanopia

Não percebe o azul; rara

1. azul aparece como azul-celeste, #008E9C
2. laranja aparece como vermelho, #FF4A5D
3. verde aparece como verde-azulado, #00AFA1
4. amarelo aparece como vermelho, #FF8D89

Acromatopsia

Não percebe cores, só claro e escuro; muito rara, e é como sai numa impressão em preto e branco

1. azul aparece como cinza, #787878
2. laranja aparece como cinza, #909090
3. verde aparece como cinza, #9A9A9A
4. amarelo aparece como cinza-claro, #B0B0B0

Pares que se confundem

laranja e amarelo ficam parecidos até com visão típica (diferença de 13,7; o mínimo é 15). Trocar amarelo por #F4A717 (amarelo) separa os dois.

4. Que cor de texto vai em cada fundo

Cada linha é a cor do texto; cada coluna, a cor do fundo. 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).

Contraste entre texto e fundo
Texto em ↓ · fundo em →	azul #2A78D6	laranja #EB6834	verde #1BAF7A	amarelo #EDA100	branco #FFFFFF	preto #000000
azul #2A78D6	mesma cor	1,38:1 · não	1,57:1 · não	2,04:1 · não	4,42:1 · só grande	4,76:1 · AA
laranja #EB6834	1,38:1 · não	mesma cor	1,14:1 · não	1,48:1 · não	3,20:1 · só grande	6,56:1 · AA
verde #1BAF7A	1,57:1 · não	1,14:1 · não	mesma cor	1,30:1 · não	2,82:1 · não	7,46:1 · AAA
amarelo #EDA100	2,04:1 · não	1,48:1 · não	1,30:1 · não	mesma cor	2,17:1 · não	9,70:1 · AAA
branco #FFFFFF	4,42:1 · só grande	3,20:1 · só grande	2,82:1 · não	2,17:1 · não	mesma cor	21,00:1 · AAA
preto #000000	4,76:1 · AA	6,56:1 · AA	7,46:1 · AAA	9,70:1 · AAA	21,00:1 · AAA	mesma cor

5. Paletas que já funcionam

Conferidas com as mesmas contas desta página, em todos os pares de cores. Estão em ordem: para 3 cores, use as 3 primeiras; para 4, as 4 primeiras.

Okabe-Ito

Okabe e Ito (2008), Color Universal Design

1azul#0072B2 · rgb(0, 114, 178)
2laranja#E69F00 · rgb(230, 159, 0)
3verde-azulado#009E73 · rgb(0, 158, 115)
4azul-celeste#56B4E9 · rgb(86, 180, 233)
5vermelhão#D55E00 · rgb(213, 94, 0)

A paleta mais usada para daltonismo em artigos científicos. O laranja e o azul-celeste ficam abaixo de 3:1 sobre o branco: escreva os valores ou use contorno.

Contraste 3:1

Calculada pelo Ramplifica

1vermelho-tijolo#9E2418 · rgb(158, 36, 24)
2ocre#C17938 · rgb(193, 121, 56)
3azul-celeste#3A95CD · rgb(58, 149, 205)
4azul-anil#2E37DA · rgb(46, 55, 218)
5roxo-vinho#670463 · rgb(103, 4, 99)

Todas as cores têm pelo menos 3:1 de contraste com o branco, o que o WCAG pede para gráficos e ícones (critério 1.4.11), e se separam bem nos três tipos de daltonismo. Boa para quem não pode escrever o valor em cada peça.

Paul Tol, brilhante

Paul Tol (2021), Colour Schemes, SRON

1azul#4477AA · rgb(68, 119, 170)
2vermelho-claro#EE6677 · rgb(238, 102, 119)
3verde#228833 · rgb(34, 136, 51)
4amarelo#CCBB44 · rgb(204, 187, 68)
5ciano#66CCEE · rgb(102, 204, 238)

Cores vivas que se separam bem para protanopia e deuteranopia. Para tritanopia, que é rara, azul e ciano ficam parecidos; e o amarelo e o ciano ficam abaixo de 3:1 sobre o branco.

Escala de cinza

Para impressão em preto e branco. Os tons claros ficam abaixo de 3:1 sobre o branco: dê contorno às peças e, a partir de 4 tons, use textura também.

3 tons

preto#000000 · rgb(0, 0, 0)
cinza#6B6B6B · rgb(107, 107, 107)
cinza-claro#C7C7C7 · rgb(199, 199, 199)

4 tons

preto#000000 · rgb(0, 0, 0)
cinza-escuro#4D4D4D · rgb(77, 77, 77)
cinza#8C8C8C · rgb(140, 140, 140)
cinza-claro#CCCCCC · rgb(204, 204, 204)

5 tons

preto#000000 · rgb(0, 0, 0)
cinza-escuro#404040 · rgb(64, 64, 64)
cinza#737373 · rgb(115, 115, 115)
cinza-médio claro#A6A6A6 · rgb(166, 166, 166)
cinza-claro#D9D9D9 · rgb(217, 217, 217)

Alto contraste em preto e branco

Não é uma paleta de cores: o preto liso e o branco com texturas bem diferentes, sempre com contorno preto. Use os 3, 4 ou 5 primeiros. É o esquema “preto e branco” da Régua dos Gráficos.

1Preto liso
2Branco com linhas diagonais
3Branco com pontos
4Branco com linhas horizontais
5Branco com xadrez

6. Levar a paleta

Lista com nome, HEX e RGB

azul: #2A78D6 · rgb(42, 120, 214)
laranja: #EB6834 · rgb(235, 104, 52)
verde: #1BAF7A · rgb(27, 175, 122)
amarelo: #EDA100 · rgb(237, 161, 0)

Variáveis CSS

:root {
  --cor-1: #2A78D6; /* azul, rgb(42, 120, 214) */
  --cor-2: #EB6834; /* laranja, rgb(235, 104, 52) */
  --cor-3: #1BAF7A; /* verde, rgb(27, 175, 122) */
  --cor-4: #EDA100; /* amarelo, rgb(237, 161, 0) */
}

Cores para LaTeX

% \usepackage{xcolor}
\definecolor{corA}{HTML}{2A78D6} % azul, rgb(42, 120, 214)
\definecolor{corB}{HTML}{EB6834} % laranja, rgb(235, 104, 52)
\definecolor{corC}{HTML}{1BAF7A} % verde, rgb(27, 175, 122)
\definecolor{corD}{HTML}{EDA100} % amarelo, rgb(237, 161, 0)

Vai usar num artigo ou trabalho acadêmico?

As cores são suas, e não precisa pedir licença. Se o Ramplifica ajudou, fale da gente nos agradecimentos: assim mais pessoas chegam a ferramentas de inclusão. Uma sugestão de texto:

As cores foram conferidas com a Régua das Cores, do Ramplifica (https://ramplifica.com.br/regua/cores).

O que faltou nesta ferramenta?

Ela está em teste. Uma ideia, uma dúvida ou algo que deu errado ajudam a melhorá-la. Enviar uma sugestão