Ferramentas de cor

Verificador de Contraste

Confira a razão de contraste WCAG entre duas cores. Veja os selos de aprovação para AA e AAA em texto normal e grande, com pré-visualização ao vivo.

Cor do texto

Cor de fundo

Exemplo de título grande

Este é um texto de tamanho normal — a linha que você leria em parágrafos e formulários.

Esta é a letra miúda — legendas, notas de rodapé, textos de apoio.

Razão de contraste

WCAG AA — Normal --

WCAG AA — Grande --

WCAG AAA — Normal --

WCAG AAA — Grande --

O que é razão de contraste?

A razão de contraste é um número de 1:1 (sem contraste) a 21:1 (preto puro sobre branco puro) que mede o quanto a cor do texto se distingue do fundo. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) usam esse número como referência legal para saber se um texto é legível por pessoas com baixa visão, daltonismo, ou por qualquer pessoa em uma tela com reflexo. Quanto maior a razão, mais segura a escolha — e mais universalmente legível a sua interface.

Como usar este verificador

Escolha a cor do texto no seletor Cor do texto e a cor da superfície atrás dele em Cor de fundo — ou cole os códigos hex direto. A pré-visualização ao vivo se atualiza em tempo real para mostrar exatamente o que o usuário verá, e os quatro selos indicam de relance em quais níveis WCAG você passou. Use Inverter cores para trocar a dupla quando estiver esboçando uma versão dark mode ou testando botões de CTA invertidos.

Boas práticas

Mire em AA Normal (4,5:1) no texto corrido como mínimo absoluto, e em AAA Normal (7:1) quando acessibilidade for valor de marca. Não fique no limite — razões marginais falham em monitores baratos e ao ar livre. Teste suas cores reais no tamanho real que será publicado, não aproximações da paleta. Lembre que estados desabilitados, placeholder e textos publicitários também contam como texto — precisam de contraste. Nunca use cor sozinha para transmitir significado; combine com ícones, sublinhados ou rótulos.

A matemática por trás da razão

O WCAG calcula contraste a partir da luminância relativa, não dos valores RGB brutos. Cada canal é primeiro linearizado a partir de sRGB — valores abaixo de 0.03928 são divididos por 12.92, o resto passa por ((c + 0.055) / 1.055)^2.4. A luminância então é L = 0.2126·R + 0.7152·G + 0.0722·B, ponderada porque o olho humano é mais sensível ao verde e menos ao azul. A razão é (L_maior + 0.05) / (L_menor + 0.05). O termo + 0.05 modela a luz ambiente refletida em telas reais e é o que limita o máximo em 21:1.

Níveis de conformidade WCAG resumidos

AA Normal: mínimo de 4,5:1 para texto corrido abaixo de 18pt (ou 14pt em negrito). AA Grande: 3:1 para texto a partir de 18pt (ou 14pt+ negrito). AAA Normal: 7:1 — o nível avançado, recomendado para sites que buscam o padrão máximo de legibilidade. AAA Grande: 4,5:1 — texto grande no nível avançado. Componentes de UI não-textuais (ícones, anel de foco, bordas de formulário) precisam de pelo menos 3:1 contra a superfície adjacente para atender ao critério WCAG 2.1 SC 1.4.11.

Perguntas frequentes

O que é "texto grande" no WCAG?

Texto grande é qualquer coisa a partir de 18pt, ou a partir de 14pt em negrito — aproximadamente 24px e 18,66px em pixels CSS. A lógica: letras maiores têm traços mais grossos e mais massa visual, então continuam legíveis com contraste menor que o texto corrido. Se seu design system mistura pesos regular e bold no mesmo tamanho, avalie cada um separadamente.

Esta ferramenta envia minhas cores para um servidor?

Não. Todo cálculo de contraste roda no seu navegador via JavaScript padrão — nenhuma requisição de rede dispara quando você muda os valores. Pode confirmar abrindo DevTools → Aba Rede e arrastando o seletor. Auditorias de cores de marca são seguras para rodar aqui, mesmo com paletas não lançadas.

Por que minhas cores reprovam em 4,49:1 mas passam em 4,50:1?

O WCAG define seus limites como mínimos inclusivos — 4,5:1 significa pelo menos 4,5, não estritamente maior. Arredondamos para duas casas na exibição mas comparamos com precisão total internamente, então um resultado de 4,4998 reprova por uma margem mínima mesmo que o selo mostre 4,50. Se ficou tão perto, ajuste um canal em um ou dois pontos para passar com folga.

E elementos não-textuais como ícones ou bordas de formulário?

O critério WCAG 2.1 SC 1.4.11 exige 3:1 de contraste mínimo para componentes gráficos de UI — traços de ícone, bordas de input, indicadores de foco, contornos de botão. Use este verificador na cor de frente do ícone contra a superfície; se o ícone tem várias cores, avalie o traço de maior contraste que carrega significado.

AAA importa de fato em sites comuns?

AA é o piso legal na maioria das jurisdições. AAA é aspiracional e nem sempre dá para manter na paleta inteira sem comprometer a identidade da marca. Mire AAA no texto corrido sempre que possível — é onde o ganho de legibilidade é maior — e aceite AA em hovers de destaque e títulos grandes.

Nomes de cores como "red" ou "blue" são suportados?

Os seletores e campos hex aceitam códigos hexadecimais de 6 e 3 dígitos. Para cores nomeadas do CSS, use nossa ferramenta Cores Nomeadas para descobrir o hex equivalente primeiro, depois cole aqui.

Verificador de Contraste