Como usar
- Informe a cor do texto (primeiro plano) e a cor do fundo em HEX, rgb(), hsl() ou outro formato CSS, ou use os seletores de cor.
- Confira a taxa de contraste e o resultado de aprovação ou reprovação para cada requisito da WCAG.
- Se um requisito não for atendido, escolha uma meta e aplique a cor sugerida, que mantém o matiz e altera apenas a luminosidade.
- Use “Inverter” para verificar a combinação inversa, como texto claro em um botão escuro.
Como funciona
A proporção segue a definição da WCAG 2.2: a luminância relativa de cada cor é calculada a partir de seus canais sRGB, e a proporção é (mais clara + 0.05) ÷ (mais escura + 0.05). Ela varia de 1:1 (cores idênticas) a 21:1 (preto sobre branco).
Requisitos verificados: o critério de sucesso 1.4.3 (AA) exige 4.5:1 para texto normal e 3:1 para texto grande; o critério 1.4.6 (AAA) exige 7:1 e 4.5:1; o critério 1.4.11 exige 3:1 para componentes da interface e elementos gráficos significativos, como bordas de campos e ícones. Texto grande tem pelo menos 24px em peso normal ou cerca de 18.66px em negrito. A WCAG não permite arredondar para cima: portanto, 4.49:1 não passa no nível AA, mesmo que esteja perto. A proporção exibida é truncada, não arredondada.
A sugestão mantém o matiz e o croma da cor do texto em OKLCH e busca a luminosidade mais próxima, mais escura ou mais clara, que atenda à meta. A proporção de contraste é apenas um dos fatores de legibilidade: o peso e o tamanho da fonte, além das diferenças na percepção das cores, também importam. A WCAG 2.2 é a recomendação atual do W3C, mencionada pela maioria das leis de acessibilidade.
Exemplos
Texto cinza que quase atende ao requisito
#777777 sobre branco tem contraste de 4.48:1. Isso atende ao requisito para texto grande e componentes da interface, mas não ao nível AA para texto normal. O cinza mais próximo que atende ao requisito é cerca de #767676, com contraste de 4.54:1.
Texto branco em um botão da marca
Branco sobre #ff8800 tem contraste de cerca de 2.4:1, abaixo até mesmo do nível 3:1 para texto grande. Escurecer o laranja ou usar texto escuro são as soluções mais comuns; a sugestão mostra o quanto a cor do texto precisaria escurecer.
Verificar a borda de um campo de formulário
Uma borda cinza-clara #cccccc sobre branco tem contraste de cerca de 1.6:1. Pelo critério 1.4.11, a borda que identifica um campo precisa de 3:1. Portanto, é necessário usar algo próximo de #949494 ou mais escuro.
Perguntas frequentes
Qual proporção de contraste preciso para atender ao nível AA da WCAG?
4.5:1 para texto normal, 3:1 para texto grande (24px ou 18.66px em negrito) e 3:1 para componentes da interface e elementos gráficos significativos. No nível AAA, o contraste exigido para texto passa a 7:1 e, para texto grande, a 4.5:1.
O texto de logotipos ou de botões desativados precisa atender ao requisito?
Não. A WCAG isenta textos em logotipos e nomes de marcas, textos puramente decorativos e textos em componentes inativos (desativados) da interface.
Por que meu resultado é um pouco diferente do de outro verificador?
Algumas ferramentas arredondam a proporção para uma casa decimal ou arredondam para cima. A WCAG compara o valor exato, por isso esta ferramenta trunca o resultado em duas casas decimais. Pequenas diferenças também podem ocorrer com cores informadas com canal alfa.
E quanto ao novo método de contraste APCA?
APCA é um método diferente, proposto para uma futura versão da WCAG. Ele não faz parte da WCAG 2.2, que é a versão avaliada por esta ferramenta e referenciada pelas regras de acessibilidade atuais.
Privacidade
As cores são verificadas no seu navegador. Nada é enviado ou armazenado.