> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/acessibilidade/contraste.md).

# Contraste

![](/files/Ywwy5WVlich5ILDF60L9)

### 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](/files/hJ5F7tkDCvNwDvCwXZv7)

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).