Verificador de contraste online grátis (WCAG)

A WCAG AA exige no mínimo 4.5:1 para texto normal e 3:1 para texto grande. Ícones, bordas de campos e outras partes da UI precisam de 3:1 em relação às cores ao lado. O AAA eleva as regras de texto para 7:1 no texto normal e 4.5:1 no texto grande.

Os valores de vermelho, verde e azul de cada cor são convertidos em luz linear e ponderados em uma luminância relativa. A razão é a luminância mais clara somada a 0.05, dividida pela mais escura somada a 0.05, então ela vai de 1:1 para a mesma cor até 21:1 para preto sobre branco.

Texto grande tem pelo menos 18pt (24px) em peso regular ou 14pt (cerca de 18.66px) em negrito. Ele só precisa de 3:1 no AA e 4.5:1 no AAA. O verificador não pergunta o tamanho da fonte, então leia as linhas de texto grande só se o seu texto for desse tamanho.

O AA é o nível a que a maioria das leis e políticas se refere, incluindo a EN 301 549 na UE e a regra de 2024 dos EUA para sites de governos estaduais e locais, que usam a WCAG 2.1 AA. O AAA é mais rigoroso e uma boa meta para textos longos de leitura.

Ela testa a regra de 3:1 para partes que não são texto, o critério de sucesso 1.4.11 da WCAG. Use-a para cores de ícones, bordas de campos, anéis de foco e linhas de gráficos. Coloque a cor da parte na caixa da cor do texto e a cor que está atrás dela na caixa do fundo.

A razão na tela é arredondada para duas casas decimais, mas as verificações usam o valor exato, como a WCAG exige. Cinza #959595 sobre branco dá 2.995:1, então aparece 3.00:1 e ainda reprova nas linhas de 3:1. Escureça um pouco a cor para passar.

Ele lê apenas códigos hex de 6 dígitos, com ou sem o #. Códigos curtos como #fff, códigos de 8 dígitos com transparência, rgb(), hsl() e nomes de cores resultam em 0.00:1 e reprovam em todas as linhas. Escreva #fff como #ffffff. Uma letra errada, como em #12345g, é lida como outra cor, sem nenhum aviso.

21:1, que é preto puro #000000 sobre branco puro #ffffff. Duas cores idênticas dão 1:1, o menor valor. O par padrão aqui, #1a1a1a sobre branco, tem 17.40:1, e o cinza médio #767676 sobre branco tem 4.54:1, logo acima da linha de 4.5:1 do AA.

Não diretamente, já que ele compara uma cor sólida com outra. Para texto sobre um gradiente ou imagem, encontre o ponto atrás do texto cuja luminosidade seja mais próxima da cor do texto. Informe essa cor como fundo e faça a verificação.

Não. Ele usa a razão de contraste da WCAG 2.x, na qual se baseiam a WCAG 2.1, a WCAG 2.2 e as leis atuais. O APCA é um método em rascunho para a futura WCAG 3 que avalia o texto por tamanho e peso, e esta ferramenta não o calcula.

Sim. É grátis, sem conta e sem limite de verificações. As cores que você informa ficam no seu navegador e não são salvas. No site oficial, o Google Analytics conta os cliques em Copiar razão, nunca as cores nem a razão.