Verificador de Contraste de Cores para acessibilidade WCAG
O Verificador de Contraste de Cores mede a razão de contraste entre a cor do texto e o fundo e informa na hora se a combinação passa nos níveis WCAG AA e AAA. Foi feito para designers e desenvolvedores que querem interfaces legíveis e acessíveis sem ficar no chute.
Informe uma cor de primeiro plano (texto) e uma cor de fundo com o seletor ou um código HEX, e a razão é atualizada ao vivo junto com selos de aprovação/reprovação para texto normal, texto grande e componentes de interface. Quando uma combinação fica abaixo do necessário, o verificador propõe alternativas acessíveis e simula como as cores aparecem para quem tem deficiência na visão de cores.
Como verificar o contraste de cores
Informe as suas cores
Defina as cores de Primeiro plano (texto) e Fundo. Clique no quadrado de cor para abrir o seletor nativo ou digite um código HEX diretamente, como #1F2937 ou 1F2937.
Leia os resultados
Veja a razão de contraste (de 1:1 até 21:1) ser atualizada na hora, com selos de aprovação/reprovação para Texto normal, Texto grande e Componentes de interface em AA e AAA, além de uma pré-visualização ao vivo de texto real sobre o seu fundo.
Corrija o contraste baixo
Se uma combinação reprova no AA de texto normal, abra Alternativas sugeridas e clique em qualquer amostra para aplicar uma cor acessível. Use Inverter cores para trocar primeiro plano e fundo e testar o cenário inverso.
Teste para daltonismo
Abra Mais ferramentas para simular Protanopia, Deuteranopia e Tritanopia, ou aplique uma Predefinição rápida para comparar combinações comuns em um clique.
Recursos
Cálculo de contraste em tempo real
A razão de contraste é recalculada no instante em que você muda uma cor, então você tem retorno imediato de aprovação ou reprovação enquanto cria.
Verificação completa de conformidade WCAG
Teste Texto normal (AA 4.5:1, AAA 7:1), Texto grande (AA 3:1, AAA 4.5:1) e Componentes de interface (AA 3:1) de uma só vez.
Sugestões inteligentes de cores
Quando uma combinação reprova no AA, receba até quatro alternativas acessíveis mostrando a cor ajustada, a razão dela e se o texto ou o fundo mudou. Clique em uma para aplicá-la.
Pré-visualização ao vivo
Veja as suas cores em um título de amostra real, texto corrido, legenda em texto pequeno e um botão com borda antes de se decidir por elas.
Simulação de daltonismo
Pré-visualize a sua combinação como ela aparece com Protanopia, Deuteranopia ou Tritanopia para garantir que funciona para todo mundo.
Predefinições rápidas
Carregue combinações comuns, como preto no branco ou branco no preto, com um único clique para começar de um ponto de partida conhecido.
Inverter cores
Troque na hora o primeiro plano e o fundo para testar o cenário de contraste inverso.
Copiar para a área de transferência
Copie qualquer valor de cor com um clique para colar direto na sua ferramenta de design ou no código.
Perguntas frequentes
Qual é uma boa razão de contraste de cores?
Para texto normal, busque pelo menos 4.5:1 (WCAG AA) ou 7:1 (AAA) para uma acessibilidade mais forte. Texto grande — a partir de 18px, ou 14px em negrito — só precisa de 3:1 para passar no AA.
Qual razão de contraste passa no WCAG AA?
O WCAG AA exige 4.5:1 para texto normal e 3:1 para texto grande. O mesmo mínimo de 3:1 vale para componentes de interface, como ícones, bordas e elementos interativos.
Como a razão de contraste é calculada?
O verificador usa a fórmula oficial da WCAG. Ele calcula a luminância relativa de cada cor e depois divide o valor mais claro mais 0,05 pelo valor mais escuro mais 0,05, gerando uma razão entre 1:1 e 21:1. Os resultados batem com os de outras ferramentas de acessibilidade e com os das ferramentas de desenvolvedor do navegador.
Qual é a diferença entre AA e AAA?
O AA é o padrão mínimo que a maioria dos sites busca e é amplamente citado em conformidade no estilo ADA. O AAA é um nível mais rigoroso que melhora ainda mais a legibilidade, mas pode ser difícil de atingir com algumas paletas. A maioria das equipes mira no AA e busca o AAA no texto corrido sempre que possível.
Por que meu design reprova mesmo com texto escuro no branco?
Texto em cinza-claro (em torno de #999999 ou mais claro) sobre branco costuma ficar abaixo de 4.5:1. Uma cor pode parecer "escura o bastante" para você e ainda assim não atingir a razão, e é justamente por isso que uma verificação numérica importa.
Como corrijo o contraste baixo?
Escureça o texto ou clareie o fundo até a razão ultrapassar o limite. O painel Alternativas sugeridas faz isso por você, calculando cores acessíveis que alcançam o AA e permitindo aplicar uma com um clique.
Qual formato de cor o verificador aceita?
Informe as cores como códigos HEX (com ou sem o # inicial) ou use o seletor de cores nativo. Para testar um valor RGB ou HSL, converta-o primeiro para HEX com qualquer conversor de cores.
Para que serve a simulação de daltonismo?
Cerca de 8% dos homens e 0,5% das mulheres têm algum tipo de deficiência na visão de cores. A simulação mostra as suas cores como elas aparecem com Protanopia, Deuteranopia ou Tritanopia, ajudando a confirmar que o design continua legível para esses usuários.
Ainda não há comentários. Seja o primeiro a comentar!