# 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). --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/acessibilidade/contraste.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.