O que é um verificador de contraste de cores?
Um verificador de contraste de cores mede a diferença de luminância entre uma cor de primeiro plano (texto) e uma cor de fundo, produzindo uma taxa de contraste conforme definido pelas Web Content Accessibility Guidelines (WCAG) 2.1. Essa taxa indica se o texto é legível para pessoas com baixa visão ou deficiência na percepção de cores. As WCAG definem dois níveis de conformidade — AA (mínimo) e AAA (aprimorado) — com limites diferentes para textos de tamanho normal e grande. Esta ferramenta calcula a taxa instantaneamente e também simula a aparência da combinação de cores em formas comuns de daltonismo.
Como usar o verificador de contraste de cores
- 1Insira a cor de primeiro plano (texto) como um valor HEX (por exemplo, #1e293b) ou use o seletor Pick.
- 2Insira a cor de fundo como um valor HEX (por exemplo, #ffffff) ou use o seletor Pick.
- 3Veja a prévia em tempo real do texto em diferentes tamanhos sobre o plano de fundo.
- 4Confira a taxa de contraste e os resultados de aprovação ou reprovação nos níveis AA/AAA das WCAG exibidos abaixo.
- 5Use o botão Swap Colors para inverter rapidamente as cores de primeiro plano e de fundo.
- 6Role para baixo para ver simulações de daltonismo para protanopia, deuteranopia e tritanopia.
Casos de uso comuns
Conformidade de acessibilidade na web
Confirme se as combinações de cores de texto e fundo do seu site atendem aos requisitos AA ou AAA das WCAG 2.1 antes da implantação.
Validação de design systems
Teste todas as combinações de tokens de cor do seu design system para garantir que sejam acessíveis e estejam em conformidade.
Teste de daltonismo
Visualize como pessoas com protanopia, deuteranopia ou tritanopia percebem suas escolhas de cores e faça os ajustes necessários.
Relatórios para clientes e stakeholders
Produza evidências claras de aprovação ou reprovação para auditorias de acessibilidade, análises de conformidade com a ADA ou avaliações da Section 508.
Perguntas frequentes
Qual taxa de contraste é exigida para conformidade com o nível AA das WCAG?
O nível AA das WCAG exige uma taxa de contraste mínima de 4,5:1 para textos de tamanho normal e 3:1 para textos grandes (18px ou mais, ou 14px ou mais em negrito). Esses limites ajudam a garantir a legibilidade para a maioria das pessoas com deficiências visuais moderadas.
Qual é a diferença entre os níveis AA e AAA das WCAG?
O nível AAA das WCAG é mais rigoroso: exige 7:1 para textos normais e 4,5:1 para textos grandes. Embora o nível AA seja considerado o mínimo aceitável, o AAA oferece legibilidade aprimorada e é recomendado para textos corridos em sites governamentais ou com alto tráfego.
Como funciona a simulação de daltonismo?
A ferramenta aplica matrizes de transformação de cores derivadas de estudos científicos para aproximar como pessoas com protanopia (dificuldade com vermelho), deuteranopia (dificuldade com verde) e tritanopia (dificuldade com azul) percebem as cores. Ela recalcula a taxa de contraste de cada combinação simulada para permitir a verificação da acessibilidade em diferentes condições visuais.
Posso usar valores RGB ou HSL em vez de HEX?
Atualmente, a ferramenta aceita códigos de cores HEX no formato #rrggbb. Primeiro, use a ferramenta complementar Color Converter & Picker para converter valores RGB ou HSL em HEX e depois cole o resultado aqui.
As cores informadas são enviadas a um servidor?
Não. O cálculo de contraste e as simulações são processados localmente no navegador, sem enviar os valores de cor para um servidor.