Verificador de Razão de Contraste da WCAG Verifique as razões de contraste da WCAG entre cores de primeiro plano e segundo plano.
Verificador de Razão de Contraste
Verifique as razões de contraste da WCAG entre cores de primeiro plano e segundo plano.
Definir Cores
Insira as cores do primeiro plano (texto) e de fundo.
Verificar Conformidade
Veja a razão de contraste e os resultados de aprovação/reprovação da WCAG AA/AAA.
Ajustar & Trocar
Modifique as cores até atingir o nível de conformidade desejado.
What Is Verificador de Razão de Contraste?
Um verificador de razão de contraste WCAG avalia a acessibilidade de combinações de cores calculando a razão de contraste entre as cores do primeiro plano (texto) e do segundo plano de acordo com as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.1. A ferramenta computa a razão de contraste baseada na luminância e testa contra quatro limites WCAG: AA para texto normal (≥4,5:1), AA para texto grande (≥3,0:1), AAA para texto normal (≥7,0:1) e AAA para texto grande (≥4,5:1). Ultrapassar esses limites garante que o texto seja legível para usuários com vários níveis de deficiência visual, incluindo baixa visão e daltonismo. A ferramenta fornece uma pré-visualização do texto ao vivo mostrando como a combinação de cores realmente se parece em diferentes tamanhos, juntamente com indicadores claros de passar/falhar para cada nível WCAG. Essa é uma ferramenta essencial para qualquer desenvolvedor ou designer da web comprometido em criar experiências digitais acessíveis e inclusivas.
Why Use Verificador de Razão de Contraste?
-
Verificação instantânea de conformidade com a WCAG AA e AAA
-
Visualização prévia do texto em várias tamanhos mostra legibilidade no mundo real
-
Indicadores claros de aprovação/reprovação com limites de razão necessários
-
Botão de troca para testar rapidamente combinações de cores invertidas
-
Testa quatro níveis de conformidade: AA/AAA para texto normal e grande
Common Use Cases
Acessibilidade na Web
Verifique se as combinações de texto/fundo atendem aos requisitos da WCAG 2.1 para conformidade com a ADA e AODA.
Auditoria do Sistema de Design
Teste todas as combinações de cores em um sistema de design para conformidade com acessibilidade.
Avaliação da Cor da Marca
Verifique se as cores da marca podem ser usadas para combinações de texto/fundo que atendam aos padrões de acessibilidade.
Conformidade Legal
Garanta que o conteúdo digital atenda às leis de acessibilidade que fazem referência aos critérios da WCAG.
Technical Guide
A razão de contraste é calculada usando a fórmula de luminância relativa WCAG 2.1. Primeiro, cada canal de cor é linearizado: se sRGB ≤ 0,03928, linear = sRGB/12,92; caso contrário, linear = ((sRGB + 0,055)/1,055)^2,4. Luminância relativa L = 0,2126×R + 0,7152×G + 0,0722×B. A razão de contraste = (L_claro + 0,05) / (L_escuro + 0,05). A razão varia de 1:1 (nenhuma contraste, mesma cor) para 21:1 (preto sobre branco). WCAG 2.1 define quatro limites: Nível AA exige ≥4,5:1 para texto normal (<18pt ou <14pt negrito) e ≥3:1 para texto grande (≥18pt ou ≥14pt negrito). Nível AAA exige ≥7:1 para texto normal e ≥4,5:1 para texto grande. Esses limites são baseados em pesquisas sobre acuidade visual e garantem legibilidade para usuários com visão 20/40 ou baixa visão moderada.
Tips & Best Practices
-
1Aimie para uma razão de contraste mínima de 4,5:1 para texto do corpo - isso é o mínimo para a conformidade com a WCAG AA
-
2Texto grande (18px+ ou 14px+ em negrito) tem um requisito mais baixo de 3:1 para AA
-
3A conformidade AAA (7:1) garante legibilidade para usuários com deficiências visuais mais graves
-
4Use o botão Trocar para testar se as cores funcionam bem em ambas as orientações
-
5Projetos no modo escuro precisam das mesmas razões de contraste - teste ambos os modos
Related Tools
Conversor HEX para RGB
Converta códigos de cor HEX em valores RGB instantaneamente com uma pré-visualização ao vivo.
🎨 Color Tools
Seletor de Cores
Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.
🎨 Color Tools
Gerador de Matizes de Cor
Gere matizes mais escuros de qualquer cor com quantidade de passos ajustável.
🎨 Color Tools
Gerador de Paleta de Cores Acessível
Gere paletas de cores que atendem aos requisitos de contraste da WCAG.
🎨 Color Tools
Simulador de Daltonismo
Simule como as cores aparecem para pessoas com diferentes tipos de deficiência visual de cor.
🎨 Color ToolsFrequently Asked Questions
Q O que é a razão de contraste da WCAG?
Q Qual é a diferença entre AA e AAA?
Q O que conta como texto grande?
Q A cor sozinha determina a acessibilidade?
About This Tool
Verificador de Razão de Contraste is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.