O contraste torna visíveis as diferenças. Pode ser contraste de tamanho, cor, peso, forma ou espaçamento. Um título grande ao lado de um texto pequeno cria contraste. O mesmo acontece com um botão vermelho brilhante num formulário cinzento. Sem contraste, o design fica plano. Tudo compete de igual forma e nada se destaca. Com contraste em excesso, a página fica visualmente poluída e o olhar não encontra descanso.

O contraste não é apenas estético. Afeta a legibilidade. Os textos com baixo contraste em relação ao fundo são difíceis de ler, especialmente para pessoas com baixa visão. As Diretrizes de Acessibilidade para Conteúdos Web (WCAG) exigem uma relação de contraste de, pelo menos, 4,5:1 para textos corridos. Os designers verificam isto com ferramentas que calculam as diferenças de luminância. O alto contraste ajuda em ambientes com muita luz solar e em ecrãs de baixa qualidade. O baixo contraste pode criar uma atmosfera, mas deve ser uma escolha, não um acidente.

Formas de criar contraste

• Tamanho: grande versus pequeno.
• Cor: complementar ou quente versus fria.
• Peso: negrito versus ligeiro.
• Espaço: lotado versus isolado.

O contraste funciona melhor quando é intencional. Um contraste forte por ecrã é geralmente mais eficaz do que cinco contrastes concorrentes.