Contraste de valor, matiz e saturação

Contraste de cor é a diferença que o olho percebe entre duas cores. Ela pode vir de três lugares: do valor (claro contra escuro), do matiz (uma família de cor contra outra) e da saturação (viva contra apagada). O que decide se um texto é legível é quase sempre o valor. Matiz e saturação servem para dar vida e hierarquia, mas sozinhos não garantem leitura.

Os três contrastes que você mais usa

Contraste de valor

Valor é o quanto uma cor é clara ou escura. O contraste de valor é a distância entre as duas. Preto sobre branco tem o máximo. Cinza-claro sobre branco tem pouco.

É o contraste que mais importa para ler. Um jeito de enxergá-lo sem número nenhum: tire uma foto da sua peça e coloque em preto e branco. Se o texto continua nítido, o valor está funcionando. Se desaparece, o problema é de valor, mesmo que as cores originais pareçam bem diferentes.

Para medir de forma objetiva, existe a razão de contraste das diretrizes de acessibilidade web (WCAG). O W3C pede pelo menos 4,5 para 1 em texto normal e 3 para 1 em texto grande (a WCAG 2.2, de outubro de 2023, manteve esses valores). Como exemplo, o texto azul-noite #14213D sobre branco dá uma razão de cerca de 16,0 para 1, muito acima do mínimo. O turquesa #2EC4B6 sobre branco chega a cerca de 2,2 para 1, e falha até em texto grande.

Contraste de matiz

É a diferença entre famílias de cor: vermelho contra azul, verde contra laranja. O olho percebe a diferença de imediato, e por isso funciona bem para separar áreas, gráficos e ícones.

O problema é que matiz diferente não significa valor diferente. Um vermelho puro #FF0000 sobre um verde puro #00FF00 são cores muito diferentes, mas a razão de contraste entre elas é de cerca de 2,9 para 1, abaixo do mínimo para texto. Resultado: a cor se separa, mas a leitura cansa. Quem tem certos tipos de daltonismo também pode ter dificuldade para separar vermelho e verde, outro motivo para não depender só do matiz. O artigo daltonismo: tipos e efeito nas cores trata disso.

Contraste de saturação

É a diferença entre uma cor viva e uma apagada. Um azul forte sobre um cinza azulado se destaca porque tem mais intensidade que o fundo, mesmo que os dois tenham matiz parecido. Esse contraste ajuda muito em hierarquia: o que precisa ser visto ganha cor viva, o resto fica contido. Mas ele não resolve a leitura de textos pequenos, porque saturação não é claro nem escuro.

Os sete contrastes de Itten

O pintor suíço Johannes Itten, que lecionou na Bauhaus, é lembrado por ter sistematizado sete tipos de contraste de cor em The Art of Color. Na nomenclatura mais usada, são:

1. Contraste de matiz (a cor em si)
2. Contraste de valor (claro e escuro)
3. Contraste de temperatura (quente e frio)
4. Contraste de complementares
5. Contraste simultâneo
6. Contraste de qualidade, que é o de saturação
7. Contraste de quantidade, ligado ao tamanho da área de cada cor

Você não precisa decorar. Dois deles têm artigos próprios aqui: cores quentes e frias e cores complementares. O de quantidade aparece na proporção das cores, como na regra 60-30-10.

Cuidado com o valor que o computador calcula

Os seletores de cor dão números de luminosidade (o L do hsl(), que vai de 0% a 100%), mas eles nem sempre batem com o que os olhos veem. Na prática: o amarelo puro #FFFF00 e o azul puro #0000FF têm o mesmo L, 50%, e sobre branco dão razões de cerca de 1,07 para 1 e 8,59 para 1. Por isso, o teste em preto e branco e a razão de contraste valem mais do que a luminosidade de um controle deslizante.

Passo a passo: corrigir o título de uma etiqueta de geleia

Você faz geleias artesanais e a etiqueta tem título em turquesa sobre fundo branco. Quase não se lê.

1. Diagnostique. Converta a imagem em preto e branco. O título some? Então o problema é de valor.
2. Descubra a razão. Use um verificador de contraste com os dois códigos. Turquesa #2EC4B6 sobre branco #FFFFFF: cerca de 2,2 para 1. Não passa.
3. Escureça a cor, mantendo a família. Troque para #0B7A70, um verde-azulado mais escuro. Sobre branco, a razão sobe para cerca de 5,2 para 1, acima do mínimo de 4,5.
4. Guarde o turquesa claro para detalhes, como um filete ou um desenho, em que a leitura de texto não depende dele.
5. Mude o texto da descrição para o cinza #5F6368. Sobre branco ele dá cerca de 6,1 para 1, suficiente para texto normal. Para a informação mais importante, prefira o #14213D.
6. Olhe de novo em preto e branco. O título agora aparece e a hierarquia fica clara: título forte, descrição cinza, detalhes claros.

A cor continua na mesma família, só mudou o valor.

Enganos ao confiar só no contraste de matiz

Escolher as cores só pelo gosto e esquecer de testar. Cores bonitas lado a lado podem ser cinzas parecidos em preto e branco.

Achar que contraste de matiz basta. Texto vermelho sobre fundo verde ou azul sobre roxo costuma cansar. Se precisar de cor, ajuste o valor.

Usar cinza claro para texto “elegante”. É a causa mais frequente de texto difícil de ler. Meça a razão.

Exagerar nos três contrastes ao mesmo tempo. Matiz forte, saturação máxima e valor oposto numa mesma área dão peso demais. Escolha qual contraste quer enfatizar em cada elemento.

Esquecer que o contraste muda com o tamanho. Letra grande exige menos contraste do que letra pequena, como mostra o 3 para 1 contra 4,5 para 1. Mesmo assim, não use o mínimo como meta: quanto mais folga, melhor para quem lê no sol ou em telas ruins.

Um uso para cada contraste

Pense assim: o valor garante a leitura, o matiz organiza as áreas e a saturação define o que se vê primeiro. Para a base, comece pelo matiz, saturação e luminosidade, e, antes de publicar, converta a peça para preto e branco e meça o texto principal.