Central de Conhecimento e Guia
Calculadora de Contraste de Cores WCAG 2.1 e Acessibilidade Web
Calculadora de Contraste de Cores WCAG 2.1 e Acessibilidade Web
Esta ferramenta opera 100% do lado do cliente. Seus códigos, tokens, credenciais e dados confidenciais nunca saem do seu navegador nem são transmitidos a servidores remotos.
Fórmula e Método de Cálculo
Taxa de contraste = (L1 + 0.05) / (L2 + 0.05)
Onde L1 é a luminância relativa da cor mais clara e L2 é a luminância da cor mais escura. A proporção resultante varia de 1:1 (sem contraste, branco sobre branco) a 21:1 (contraste máximo, preto sobre branco).
Melhores Práticas e Dicas
- Aim for AA Compliance (4.5:1): The Web Content Accessibility Guidelines (WCAG) Level AA requires a minimum ratio of 4.5:1 for standard body text, and 3:1 for large text (usually 18pt or 14pt bold).
- Don't Rely Solely on Color for Meaning: Colorblind users cannot distinguish certain hues (like red error states versus green success states). Always pair color changes with iconography, underlines, or structural changes.
- Account for Dark Mode Reversals: A high contrast palette in Light Mode often fails catastrophically when mathematically inverted for Dark Mode. You must manually check the contrast ratios for both distinct themes.
Perguntas Frequentes
O que é o Nível AAA da WCAG?
O Nível AAA é o padrão de acessibilidade mais rigoroso, exigindo uma taxa de contraste de 7:1 para texto normal. Normalmente só é obrigatório para softwares governamentais ou médicos altamente especializados.
O contraste se aplica a elementos de interface que não são texto?
Sim. A WCAG 2.1 introduziu a exigência de uma taxa de contraste mínima de 3:1 para 'Componentes de Interface do Usuário e Objetos Gráficos', significando que as bordas de campos de entrada e planos de fundo de botões também devem contrastar com a página.
Por que meus tons de cinza puro falham no teste de contraste?
Tons de cinza médio puros (como #808080) sobre um fundo branco puro costumam ficar em torno de uma proporção de 3,9:1, o que falha estritamente no requisito de 4,5:1 para texto do corpo. Você deve escurecê-los.