Cor que todo mundo consegue ler

Cerca de uma pessoa em doze com biologia masculina e uma em duzentas com biologia feminina enxerga cores de outro jeito, e todo mundo enxerga mal sob o sol. Cor acessível é, sobretudo, não depender só do matiz.

  • #1f2937

  • #ffffff

  • #5576ff

  • #facc15

  • #b91c1c

Contraste, medido

A relação de contraste compara o brilho de duas cores, de 1:1 (invisível) a 21:1 (preto sobre branco). As WCAG pedem 4.5:1 para texto normal, 3:1 para texto grande e 3:1 para partes da interface, como bordas e ícones. Não são opiniões: dá para medir, e quase toda discussão do tipo "a nossa cor de marca está de boa" acaba quando o número aparece na tela.

Nunca só o matiz

Se a única diferença entre dois estados é vermelho contra verde, parte dos seus usuários vê um estado só. Acrescente um segundo sinal: um ícone, um rótulo, uma textura, uma posição. Vale também para gráficos, em que duas séries vizinhas devem diferir em luminosidade além do matiz, e para a validação de formulários, em que a mensagem importa mais que a cor da borda.

Os dois hábitos

Primeiro, escolha as cores de texto medindo e não no olho; leva segundos e encerra a discussão. Segundo, veja o seu projeto em escala de cinza antes de publicar. Se ainda funciona — se dá para distinguir o botão do fundo e uma linha do gráfico da outra — vai funcionar com daltonismo, numa tela barata e sob sol direto.

O que guardar

Meça o contraste e garanta que nada de importante dependa só do matiz.

Teste uma combinação no verificador de contraste

Mais da biblioteca