Contraste de cor

A diferença de luminância entre texto e fundo, que precisa ser alta o bastante para o texto ser legível por todos.

Hard

O que é

Contraste de cor é a diferença de luminância entre um elemento, em geral o texto, e o fundo onde ele está. Quanto maior a diferença, mais fácil de ler. O WCAG define razões mínimas, como quatro e meio para um para texto comum, que dão um critério concreto e testável, não uma opinião sobre ficar bonito.

Isso importa porque contraste baixo exclui muita gente: pessoas com baixa visão, daltonismo, e qualquer um lendo no celular sob sol forte. Aquele cinza claro elegante sobre branco pode ser invisível para uma parte real do público. Acessibilidade aqui também é legibilidade para todo mundo, em condições reais de uso.

Na prática de produto, contraste cruza direto com a régua de tokens de cor. Quando os tokens já nascem testados quanto a contraste, a equipe para de descobrir o problema tarde, na auditoria. A cor deixa de ser só escolha estética e passa a carregar, no próprio sistema, a garantia de que dá para ler.

Em uma frase

Esse cinza não passa no contraste, vamos escurecer pra ficar legível no sol e pra quem tem baixa visão.

A pergunta que ele responde

Esse texto claro sobre o fundo está legível para todo mundo ou só para quem enxerga bem?

Quando usar

Em toda combinação de texto e fundo, e em elementos de interface que precisam ser distinguidos.

Como não usar

Escolher cor só pela estética e deixar o contraste para a auditoria. O que parece elegante pode ser ilegível para muita gente.

Na prática

O cinza claro do texto secundário reprova no contraste. O time troca por um tom mais escuro que mantém o ar leve e passa no critério.

Não confunda com

Contraste de cor não é o mesmo que paleta da marca: a paleta define a identidade, o contraste garante que as combinações usadas sejam legíveis, e nem toda combinação bonita passa.

D

Em inglês

Color Contrast (ratio)

Pronúncia

n/a

Também chamado de

contraste de cor, contrast ratio, razão de contraste

Origem

W3C (WCAG).

Fonte

Saiba mais

WebAIM, ferramenta e guia sobre contraste de cor