Verificador de contraste de cores WCAG
Escolha uma cor de texto e uma cor de fundo: veja a relação de contraste, os resultados de aprovação ou reprovação em AA e AAA e uma prévia real de como fica a leitura.
Relação de contraste (de 1:1 a 21:1)
Este é um exemplo de texto normal: um parágrafo igual aos que seus visitantes leem todos os dias.
Este é um título grande
O que significam os níveis AA e AAA
As WCAG (Web Content Accessibility Guidelines) medem a legibilidade com uma relação de contraste que vai de 1:1 (sem contraste) a 21:1 (preto sobre branco). O nível AA, o padrão exigido pela maioria das normas de acessibilidade, pede no mínimo 4,5:1 para texto normal e 3:1 para texto grande. O nível mais rigoroso AAA eleva esses limites para 7:1 e 4,5:1. “Texto grande” significa texto de pelo menos 24 px, ou 18,5 px se estiver em negrito.
Por que o contraste importa de verdade
Cerca de uma em cada vinte pessoas tem algum tipo de baixa visão ou deficiência na percepção de cores, e todo mundo tem dificuldade para ler uma tela sob sol forte ou com o brilho baixo. O contraste insuficiente é uma das falhas de acessibilidade mais comuns na web, e uma das mais fáceis de corrigir: muitas vezes basta escurecer o texto ou clarear o fundo em alguns tons. Lembre-se de verificar também os estados secundários, como links, placeholders e o texto de botões coloridos.