# Contraste

![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FR6sqa4QcqznAHgxxw2zO%2Fimage.png?alt=media\&token=1c5e3481-0bb5-40d3-915f-215de134a72e)

### O Significado

O dicionário define contraste como *grau marcante de diferença ou oposição entre coisas da mesma natureza, suscetíveis de comparação*. Ou seja, o contraste nada mais é que a diferença entre duas coisas de mesma origem.

Tomando essa definição como base, o contraste aplicado a web é a diferença entre a cor de fundo e a cor da fonte utilizada em determinado elemento.

### O problema

Muitas pessoas com algum problema de visão apresentam baixa percepção ao contraste, ou seja, não conseguem, diferenciar a **cor de fundo** da **cor da letra**, por exemplo. Apenas para efeito de curiosidade, 1 em cada 12 pessoas não consegue ver a média do espectro completo de cores (aproximadamente 10% dos homens e 0,5% das mulheres). 

Tudo tende a parecer com o mesmo brilho, o que torna difícil distinguir contornos, bordas, arestas e detalhes. Uma pessoa com baixa visão ou daltonismo não consegue distinguir texto contra um fundo sem contraste suficiente.

Logo, possuir uma boa taxa de contraste é extremamente importante para o sucesso do seu site.

### Recomendações

Use ferramentas para verificar a taxa de contraste de acordo com o que foi definido pela W3C nas [Diretrizes de acessibilidade](https://www.w3.org/TR/WCAG21/).

Os navegadores mais modernos já possuem uma ferramenta que ajudam analisar a taxa de contraste aplicada a um elemento. Veja abaixo como é exibido no Google Chrome.

![A esquerda cor do texto em um fundo claro #f5f7f9
A direita cor do texto em um fundo escuro #333d55](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FFDdDoRCCqdHJdAYKFGDV%2Fcompare.png?alt=media\&token=3524fe4d-ff8b-41c6-8f06-0ddaed1ea9c5)

Assim como definido nas Diretrizes de acessibilidade da W3C, o contraste mínimo para textos normais ser de pelo meno 4.5:1, enquanto para [texto grandes](https://www.w3.org/TR/WCAG21/#dfn-large-scale) uma taxa mínima de 3:1. 

Reparem que as ferramentas podem indicar uma nota acompanhada de duas ou três letras A. Isso especifica o nível dos requerimentos que a taxa é válida. Uma nota pode ser válida para o nível AA, mas não para o nível AAA.

Você pode saber mais sobre os valores para cada nível clicando [aqui](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#contrast-minimum) e [aqui](https://www.w3c.br/traducoes/wcag/wcag21-pt-BR/#contrast-enhanced).