Contraste

A diferença de cor, tamanho, peso ou espaço que guia a atenção e marca hierarquia na tela.

Hard

O que é

Contraste cria distinção entre os elementos pra que o que importa mais sobressaia e o que importa menos recue. Ele vale pra cor, tamanho, forma, tipografia e até pro tempo, quando o assunto é movimento. Contraste alto faz a pessoa notar rápido o que ela precisa ver, enquanto contraste baixo acaba escondendo informação crítica.

Na tipografia, o contraste é o que separa o título do corpo de texto. Um peso e um tamanho maiores no título deixam a hierarquia óbvia, e isso é usabilidade, não só estética, porque a pessoa escaneia e processa a tela bem mais rápido.

Quando o assunto é cor, o contraste entra direto na acessibilidade. Padrões como o WCAG definem proporções mínimas entre texto e fundo justamente pra garantir leitura, inclusive pra quem enxerga pouco.

Em uma frase

Vamos dar mais contraste ao botão principal pra ninguém errar onde clicar.

A pergunta que ele responde

Como faço o que importa saltar na tela e o resto recuar?

Quando usar

Use ao construir hierarquia, melhorar legibilidade e diferenciar ações dentro de uma interface.

Como não usar

O cuidado é não achar que contraste é gritar com cor. Quando vários elementos berram ao mesmo tempo, eles se anulam e a hierarquia se perde.

Na prática

Pense num botão de ação principal que vira retangular e cheio, enquanto os secundários ficam só contornados. Com esse contraste, a pessoa praticamente nunca erra onde clicar.

Não confunda com

Vale separar contraste de cor sozinha. O contraste também vem de tamanho, peso e espaço, ou seja, dá pra criar uma hierarquia forte mesmo trabalhando dentro de uma paleta sóbria. A cor é só um dos caminhos pra gerar contraste, não o único.

D

Em inglês

Contrast

Pronúncia

n/a

Também chamado de

contraste visual

Origem

n/a

Fonte

Saiba mais

W3C, diretrizes WCAG sobre contraste de cor.