--- title: Relação de Contraste description: Aprenda o que é relação de contraste e sua importância para a acessibilidade web (WCAG). Melhore a legibilidade e a experiência do usuário em seu site. --- [Pular para o conteúdo](https://conhecimento.pertodigital.com.br/central/relação-de-contraste#main-content) Português - Brasil Mostrar submenu para traduções ![O homem vitruviano dentro de um circulo verde. Com a escrita Perto Digital ao lado.](https://conhecimento.pertodigital.com.br/hubfs/Logo-4.svg) Abrir navegação principal Fechar navegação principal - Português - Brasil Mostrar submenu para traduções - [Ir para pertodigital.com.br](https://www.pertodigital.com.br/) [Ir para pertodigital.com.br](https://www.pertodigital.com.br/) Olá! Como podemos ajudar? - Não há sugestões porque o campo de pesquisa está em branco. 1. [Central de Conhecimento](https://conhecimento.pertodigital.com.br/central?hsLang=pt-br) 2. [Glossário](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br) 3. [R](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#r) # Relação de Contraste ## Medida que quantifica a diferença de luminosidade entre um elemento em primeiro plano (como um texto ou ícone) e sua cor de fundo em uma tela digital. Expressa numericamente, como 1:1 (contraste nulo) a 21:1 (contraste máximo, como preto sobre branco), essa proporção é um pilar fundamental para garantir que o conteúdo digital seja legível e visualmente acessível para todos os usuários. **Por que a Relação de Contraste é tão importante?** Um baixo contraste, como um texto cinza claro sobre um fundo branco, cria barreiras de usabilidade que vão muito além do desconforto visual. Conteúdos com contraste inadequado são difíceis ou impossíveis de ler para: - **Pessoas com baixa visão:** Que necessitam de uma clara distinção entre os elementos. - **Pessoas daltônicas:** Que não percebem certas cores e dependem da diferença de brilho. - **Idosos:** Cujo desempenho visual pode diminuir com a idade. - **Qualquer usuário:** Em condições adversas de iluminação (como sob a luz do sol) ou que sofre de cansaço visual após longos períodos de leitura. Ignorar a relação de contraste não afeta apenas a acessibilidade, mas prejudica a **experiência do usuário (UX)** como um todo. Um design com bom contraste é percebido como mais profissional, claro e agradável de usar. **Padrões e Boas Práticas (WCAG)** As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) estabelecem os padrões mínimos para um site ser considerado acessível. Para a relação de contraste, os níveis principais são: - **Nível AA (Mínimo):** Relação de `4.5:1` para textos de tamanho normal e `3:1` para textos grandes. - **Nível AAA (Avançado):** Relação de `7:1` para textos de tamanho normal e `4.5:1` para textos grandes. Garantir que seu design atenda pelo menos ao nível AA é um passo crucial para criar uma experiência digital verdadeiramente inclusiva. - [Introdução](https://conhecimento.pertodigital.com.br/central/introdu%C3%A7%C3%A3o?hsLang=pt-br#main-content) - [Sobre a Perto](https://conhecimento.pertodigital.com.br/central/introdu%C3%A7%C3%A3o?hsLang=pt-br#sobre-a-perto) - [Importância da Acessibilidade](https://conhecimento.pertodigital.com.br/central/introdu%C3%A7%C3%A3o?hsLang=pt-br#import%C3%A2ncia-da-acessibilidade) - [Guia de Início](https://conhecimento.pertodigital.com.br/central/introdu%C3%A7%C3%A3o?hsLang=pt-br#guia-de-in%C3%ADcio) - [Perguntas frequentes](https://conhecimento.pertodigital.com.br/central/perguntas-frequentes?hsLang=pt-br#main-content) - [Requisitos Técnicos](https://conhecimento.pertodigital.com.br/central/perguntas-frequentes?hsLang=pt-br#requisitos-t%C3%A9cnicos) - [Planos e Preços](https://conhecimento.pertodigital.com.br/central/perguntas-frequentes?hsLang=pt-br#planos-e-pre%C3%A7os) - [Suporte e Atendimento](https://conhecimento.pertodigital.com.br/central/perguntas-frequentes?hsLang=pt-br#suporte-e-atendimento) - [Implementação](https://conhecimento.pertodigital.com.br/central/perguntas-frequentes?hsLang=pt-br#implementa%C3%A7%C3%A3o) - [Glossário](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#main-content) - [A](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#a) - [B](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#b) - [C](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#c) - [D](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#d) - [I](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#i) - [J](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#j) - [L](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#l) - [M](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#m) - [N](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#n) - [T](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#t) - [R](https://conhecimento.pertodigital.com.br/central/gloss%C3%A1rio?hsLang=pt-br#r) - [Geral](https://conhecimento.pertodigital.com.br/central/geral?hsLang=pt-br#main-content) - [Plugin - Funcionalidades](https://conhecimento.pertodigital.com.br/central/geral?hsLang=pt-br#plugin-funcionalidades) - [Plugin - Perfil de Acessibilidade](https://conhecimento.pertodigital.com.br/central/geral?hsLang=pt-br#plugin-perfil-de-acessibilidade) - [Ferramentas de Comunicação](https://conhecimento.pertodigital.com.br/central/geral?hsLang=pt-br#ferramentas-de-comunica%C3%A7%C3%A3o) - [Libras - Funcionalidades](https://conhecimento.pertodigital.com.br/central/geral?hsLang=pt-br#libras-funcionalidades) - [Análise](https://conhecimento.pertodigital.com.br/central/geral?hsLang=pt-br#an%C3%A1lise) - [Suporte](https://conhecimento.pertodigital.com.br/central/suporte?hsLang=pt-br) [![Logotipo da Perto Digital. O homem vitruviano dentro de um circulo verde, com o texto Perto Digital ao lado.](https://conhecimento.pertodigital.com.br/hs-fs/hubfs/Logo%20maior-2.png?width=200&height=54&name=Logo%20maior-2.png "Logotipo da Perto Digital. O homem vitruviano dentro de um circulo verde, com o texto Perto Digital ao lado.")](https://www.pertodigital.com.br) Central de Conhecimento Copyright © 2026, Perto Digital