Loading...
Loading...
Teste qualquer par de cor de texto e fundo contra os requisitos de contraste WCAG 2.2 AA e AAA, com feedback instantâneo de aprovação/reprovação e uma prévia ao vivo.
Proporções mais altas são mais legíveis. 21:1 é preto puro sobre branco.
Veja sua combinação de cores em tamanhos de corpo e cabeçalho.
Texto normal do corpo a 16 pixels. O WCAG 2.2 mede o contraste entre o texto em primeiro plano e seu fundo imediato — esta pré-visualização mostra a combinação que você inseriu acima exatamente como um usuário a veria.
Um verificador de contraste mede a diferença de luminância entre duas cores e a reporta como uma razão entre 1:1 (idêntico) e 21:1 (preto puro sobre branco puro). Diretrizes de acessibilidade usam essa razão para decidir se o texto é legível para usuários com baixa visão, daltonismo ou telas vistas sob luz solar intensa. Esta ferramenta segue o WCAG 2.2 — o mesmo padrão referenciado pela ADA nos EUA, pela Lei de Acessibilidade Europeia e pela maioria dos sistemas de design corporativo. Insira quaisquer duas cores e você obtém uma aprovação/reprovação instantânea em relação aos cinco limiares do WCAG, além de uma pré-visualização ao vivo em tamanhos de corpo e cabeçalho. Tudo roda no seu navegador — sem upload, sem rastreamento, sem conta.
Cole um código hex ou use o seletor de cores para a cor do primeiro plano (texto). A ferramenta também aceita abreviações de 3 dígitos como #03A.
Faça o mesmo para o fundo. Se você só souber a cor do texto, deixe o fundo em branco (#FFFFFF) para o teste padrão.
O grande número da razão é atualizado à medida que você digita. Uma razão abaixo de 3.0 reprovará até o limiar mais flexível do WCAG para texto normal.
Os cinco emblemas mostram aprovação/reprovação para os limiares AA normal, AA grande, AAA normal, AAA grande e componentes de UI. AA é o mínimo legal usual; AAA é o alvo aprimorado para conteúdo chave.
Verifique se a pré-visualização está correta nos tamanhos de cabeçalho e corpo, depois use Copiar CSS para pegar as declarações `color:` e `background-color:` para sua folha de estilo.
Para cada canal (R, G, B escalado de 0–1): c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4 Luminância relativa: L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear Razão de contraste: razão = (L_clara + 0.05) / (L_escura + 0.05) onde L_light = max(L1, L2) e L_dark = min(L1, L2)
A fórmula vem do WCAG 2.x e aplica uma curva de correção gama a cada canal sRGB antes de calcular a luminância. Os pesos (0.2126, 0.7152, 0.0722) refletem a sensibilidade dos cones humanos à luz vermelha, verde e azul. Adicionar 0.05 a ambos os termos evita a divisão por zero quando uma cor é preto perfeito. As razões variam de 1:1 (cores idênticas) a 21:1 (preto puro sobre branco puro).
Referência: WCAG 2.2 — Contraste (Mínimo) 1.4.3
| Par | Razão & veredicto |
|---|---|
#000000 em #FFFFFF | 21:1 — passa em todos os limiares O contraste máximo canônico. Usado para UIs de leitura em formato longo. |
#1A73E8 em #FFFFFF | 4.63:1 — passa AA normal, reprova AAA normal Azul do Google sobre branco. Legal para texto do corpo, não exatamente AAA. |
#808080 em #FFFFFF | 3.95:1 — reprova AA normal, passa AA grande Cinza médio sobre branco — bom para cabeçalhos, muito claro para parágrafos. |
Converta entre HEX, RGB e HSL com amostras ao vivo, deslizadores e cópia instantânea.
Calcule sua idade exata em anos, meses e dias a partir de qualquer data de nascimento.
Verifique o índice de massa corporal a partir da altura e peso usando unidades métricas ou imperiais.
Calcule porcentagens, variação percentual e porcentagem de um total em segundos.
Última atualização