Verificador de contraste WCAG
Teste a acessibilidade das suas cores texto/fundo.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Cores legíveis por todos, verificadas em dois cliques
Quase uma em cada doze pessoas percebe mal certos contrastes. As WCAG (Web Content Accessibility Guidelines) fixam rácios mínimos entre texto e fundo; este verificador calcula-os em direto, com a fórmula oficial de luminância relativa, e mostra uma pré-visualização real da sua combinação.
-
Escolha as suas duas cores
No seletor ou colando um código hexadecimal (#rrggbb ou #rgb).
-
Leia o rácio
De 1:1 a 21:1, com os quatro veredictos AA/AAA para texto normal e grande.
-
Ajuste se necessário
Modifique a claridade de uma das cores até passar, guiando-se pela pré-visualização.
Os limiares WCAG numa tabela
| Nível | Texto normal | Texto grande |
|---|---|---|
| AA (mínimo) | 4,5 : 1 | 3 : 1 |
| AAA (reforçado) | 7 : 1 | 4,5 : 1 |
| Componentes de interface (2.1) | 3 : 1 | 3 : 1 |
O contraste deve ser verificado para cada par texto/fundo da sua interface — lembre-se dos estados: ligações com hover, botões desativados, placeholders e modo escuro.
Perguntas frequentes
O que é o rácio de contraste?
É a relação entre a luminância da cor mais clara e a da mais escura, de 1:1 (idênticas) a 21:1 (preto sobre branco). As WCAG usam-no para garantir a legibilidade do texto para todos, incluindo pessoas com baixa visão.
Que limiares devo atingir?
Nível AA: 4,5:1 para texto normal, 3:1 para texto grande. Nível AAA, mais exigente: 7:1 e 4,5:1 respetivamente. AA é o mínimo legal em muitos países para serviços públicos.
O que conta como «texto grande»?
Segundo as WCAG: pelo menos 18 pt (24 px) em peso normal, ou 14 pt (18,5 px) a negrito. Os títulos grandes toleram portanto menos contraste do que o corpo de texto.
O contraste também se aplica a elementos não textuais?
Sim: desde as WCAG 2.1, os componentes de interface (contornos de campos, ícones informativos, estados de foco) devem atingir 3:1 com as cores adjacentes (critério 1.4.11).
O meu rácio é insuficiente: como corrigir?
Escureça o texto ou clareie o fundo (ou o inverso em tema escuro). Muitas vezes bastam alguns passos de luminosidade — mantenha a mesma tonalidade e ajuste a claridade para preservar a sua paleta.