Usando cor num projeto

Cerca de 8 por cento dos homens têm deficiência de visão de cores vermelho-verde, então um formulário que marca erros só em vermelho deixa muitos deles no escuro.

Nunca deixe só a cor carregar a mensagem

O critério de sucesso 1.4.1 da WCAG 2.2, Uso de Cores, está no nível A, o mais básico. Ele diz que a cor não pode ser o único meio visual de transmitir informação, indicar uma ação, pedir uma resposta ou distinguir um elemento visual. Uma borda vermelha num campo de formulário com erro está bem, desde que haja também um ícone ou uma linha de texto dizendo o que está errado. Um gráfico de linhas com cinco linhas coloridas também precisa de rótulos, estilos de linha diferentes ou marcadores. Links dentro de um parágrafo precisam de sublinhado ou de outra pista além da cor.

Parte do motivo é a visão de cores. O texto de neurociência da OpenStax explica que algumas pessoas têm uma variação genética que lhes dá dois tipos de cone em vez de três, ou um pigmento de cone que funciona de outro jeito. Elas não são cegas para uma cor, mas algumas cores que a maioria das pessoas distingue parecem iguais para elas. As formas vermelho-verde são as mais comuns e afetam cerca de 8% dos homens. Outros motivos também contam: um celular sob sol forte, um projetor barato, uma impressão em preto e branco. Um projeto que ainda funciona em tons de cinza funciona em todos esses casos.

A luminosidade faz o trabalho pesado

Por isso, designers experientes planejam uma paleta em duas passadas. Primeiro decidem os degraus de luminosidade: um fundo bem claro, um tom médio para bordas, um tom escuro para o texto. Depois escolhem os matizes. Conferir cada par de texto e fundo com a razão de contraste da unidade 6 é o jeito mais rápido de saber se os degraus estão distantes o bastante. Matizes complementares não garantem contraste. No modelo, o laranja da marca e seu complementar azul têm a mesma saturação e a mesma luminosidade HSL, e a razão entre eles é de apenas 1.06:1. Duas cores podem estar o mais longe possível em matiz e ainda assim ser difíceis de ler uma sobre a outra.

Um método de trabalho simples junta as unidades deste curso. Comece com um matiz que combine com o assunto. Use uma harmonia da unidade 4 para escolher um ou dois matizes de apoio. Dê à cor dominante a maior parte da área, cerca de 60%, à secundária 30% e ao destaque 10%, a regra prática do guia da Universidade de Delaware. Escolha a luminosidade de cada combinação de cor do texto e do fundo até que todas cheguem a pelo menos 4.5:1, ou 3:1 para títulos grandes e ícones. Por fim, confira se nada depende só da cor: erros têm palavras, links têm sublinhado, gráficos têm rótulos.

Os gráficos merecem cuidado próprio, porque muitas vezes precisam de várias cores ao mesmo tempo. O guia da Universidade de Delaware indica o ColorBrewer, uma ferramenta feita para paletas de mapas e gráficos. Para valores que vão de baixos a altos, uma paleta sequencial de um só matiz, do claro ao escuro, continua funcionando em tons de cinza. Para categorias, use o menor número de cores possível, ponha um rótulo ao lado da linha ou da barra em vez de só numa legenda e mantenha os degraus de luminosidade diferentes o bastante para que dois vizinhos nunca pareçam iguais.