As cores são verificadas no seu navegador; nada é carregado
WCAG AA e AAA • Pontuação APCA • Sem upload
Verificador de contraste de cores
Verifique o contraste do texto e do fundo em relação às WCAG AA e AAA com uma pontuação APCA. Teste texto normal, grande e da interface do usuário em seu navegador sem upload.
Verifique o contraste das cores em relação aos padrões WCAG
Insira uma cor de texto e uma cor de fundo para ver a taxa de contraste WCAG 2.x, resultados AA e AAA para texto normal, grande e UI, além de uma pontuação de percepção APCA. Ajuste qualquer cor até passar.
Como verificar o contraste das cores
- 1.Insira o texto e as cores de fundo com o seletor, campo hexadecimal ou controles deslizantes HSL
- 2.Observe a taxa de contraste e os indicadores AA / AAA serem atualizados instantaneamente
- 3.Ajuste a luminosidade até que o texto normal, grande ou da interface do usuário atinja o nível necessário
- 4.Copie o URL para compartilhar o par exato de cores com outra pessoa
Por que usar este verificador de contraste
Usa a fórmula oficial de contraste de luminância relativa das WCAG
Inclui a pontuação perceptual da APCA do rascunho das WCAG 3
O par de cores permanece na URL para que você possa compartilhá-lo
Perguntas frequentes sobre o verificador de contraste de cores
As cores são enviadas para um servidor?
Não. A taxa de contraste é calculada localmente no seu navegador a partir das duas cores inseridas.
O que significa a taxa de contraste?
Compara a luminância relativa das duas cores em uma escala de 1:1 (mesma cor) a 21:1 (preto sobre branco). WCAG estabelece proporções mínimas como 4,5:1 para texto normal no nível AA.
O que significam AA e AAA?
São níveis de conformidade WCAG. AA requer pelo menos 4,5:1 para texto normal e 3:1 para texto grande; AAA aumenta para 7:1 e 4,5:1.
O que é considerado texto grande?
WCAG define texto grande como pelo menos 18 pt (24 px) regular ou 14 pt (18,66 px) em negrito. Texto grande precisa de menos contraste: 3:1 em AA e 4,5:1 em AAA.
Qual é a pontuação APCA?
APCA é o algoritmo de contraste perceptivo proposto para WCAG 3, medindo a diferença de luminosidade percebida. Esta página mostra o valor Lc do rascunho atual das WCAG 3 como um indicador suplementar; WCAG 2.x AA/AAA continuam sendo a base de conformidade.
Minhas cores falham — como faço para corrigi-las?
Use o botão Correção automática para AA ao lado de qualquer cor para ajustar a luminosidade dessa cor até que o texto normal atinja 4,5:1. Você pode então ajustar o matiz, a saturação ou a luminosidade com os controles deslizantes.