WCAG Contrast Checker
Understand WCAG Contrast Checker
Calcula a razão de contraste entre uma cor de texto e uma cor de fundo e informa se ela atende à WCAG AA e AAA.
How it works
Cada cor é primeiro convertida em luminância relativa. Os três canais são normalizados para 0–1 e linearizados — divididos por 12,92 abaixo do limiar de 0,03928 e, fora disso, elevados por ((c + 0,055) / 1,055)^2,4 — e depois ponderados em 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul, porque o olho é muito mais sensível ao verde que ao azul. A razão é (L_mais_clara + 0,05) / (L_mais_escura + 0,05), que vai de 1:1 para cores idênticas até 21:1 para preto sobre branco. O termo 0,05 representa o reflexo ambiente da tela e é o que impede a fórmula de dividir por zero no preto puro.
When to use it
- Conferir o texto corrido contra o fundo antes de fechar uma cor no design system
- Achar o cinza mais escuro que ainda passa sobre branco — #767676 fica em cerca de 4,54:1, e um tom mais claro reprova no AA
- Auditar textos de placeholder, estados desabilitados e textos de apoio, que é onde as falhas de contraste costumam se esconder
- Fornecer evidência para uma auditoria de acessibilidade sob a WCAG 2.1, a EN 301 549 ou a Section 508
Watch out for
- O limiar depende do texto, não da cor. O AA exige 4,5:1 para texto corrido, mas apenas 3:1 para texto grande — 18pt (24px), ou 14pt (18,66px) quando em negrito. A ferramenta informa os dois; você escolhe qual se aplica.
- Elementos não textuais têm regra própria. Ícones, anéis de foco, bordas de campos e segmentos de gráficos precisam de 3:1 pela WCAG 1.4.11, o que é fácil de esquecer quando se está conferindo só os parágrafos.
- Cores semitransparentes não podem ser medidas diretamente. Uma cor com alfa precisa ser composta antes contra o que está de fato atrás dela, e o resultado depende desse fundo.
- Texto sobre uma fotografia ou um gradiente não tem uma razão única. Teste a região mais desfavorável ou coloque uma camada sólida atrás do texto.
Not the right tool for: Provar que uma paleta é utilizável por pessoas com deficiência na visão de cores. A razão de contraste é uma medida de luminância — duas cores podem passar em 7:1 e ainda ser indistinguíveis para um deuteranope, então nunca codifique significado apenas no matiz.
Frequently Asked Questions
Como verificar o contraste de cores para acessibilidade?
Informe a cor de primeiro plano (texto) e a cor de fundo em HEX ou RGB. A ferramenta calcula a razão de contraste pela fórmula de luminância relativa da WCAG 2.1 e mostra o resultado de aprovado/reprovado para AA (4,5:1 para texto normal) e AAA (7:1). Ajuste as cores até passar.
Por que o contraste de cores importa para a acessibilidade?
Contraste baixo dificulta a leitura para pessoas com baixa visão, daltonismo ou em ambientes muito iluminados. Cerca de 8% dos homens têm alguma forma de deficiência na visão de cores. Os requisitos de contraste da WCAG garantem que o conteúdo seja legível nessa ampla faixa de capacidades e condições visuais.
Qual é a razão de contraste mínima para a WCAG AA?
A WCAG 2.1 AA exige 4,5:1 para texto normal (abaixo de 18pt ou de 14pt em negrito) e 3:1 para texto grande (18pt ou mais, ou 14pt ou mais em negrito). Componentes de interface não textuais (ícones, bordas de campos) precisam de 3:1. O nível AAA eleva esses valores a 7:1 e 4,5:1. A maioria das normas legais de acessibilidade exige o AA.
How to Use WCAG Contrast Checker
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.