Cores e design
Verificador de contraste WCAG
Saiba em segundos se as suas cores são legíveis por toda a gente.
Rácio de contraste
- AA texto normal
- AA texto grande
- AAA texto normal
- AAA texto grande
Pré-visualização
Um pequeno jabuti xereta viu dez cegonhas felizes.
Um pequeno jabuti xereta viu dez cegonhas felizes.
Aquele cinzento subtil sobre fundo branco pode estar a custar-lhe leitores. Este verificador calcula o rácio de contraste exato entre qualquer cor de texto e cor de fundo segundo a norma WCAG 2.1 e mostra veredictos claros de aprovação ou reprovação para os níveis AA e AAA, tanto para texto normal como para texto grande. Uma pré-visualização apresenta uma frase real com as cores escolhidas para julgar o resultado com os seus próprios olhos, e os seletores, mais a troca de cores num clique, facilitam iterar até atingir o objetivo. Use-o em botões, texto corrido, gráficos — onde quer que o texto encontre a cor. Essencial para um design acessível e conforme, totalmente grátis e sem conta.
Como funciona?
- Defina a cor do texto e a cor de fundo (escreva um valor ou use o seletor).
- O rácio de contraste aparece de imediato, com os veredictos AA e AAA.
- Confirme na pré-visualização como fica o texto real.
- Ajuste qualquer das cores até alcançar o nível pretendido.
Perguntas frequentes
Que rácio de contraste preciso de atingir?
O nível AA das WCAG exige 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA, mais rigoroso, exige 7:1 e 4,5:1. A maioria dos sites visa a conformidade AA.
O que conta como «texto grande»?
Texto com pelo menos 18 pt (cerca de 24 px), ou 14 pt (cerca de 18,5 px) se estiver a negrito. Os títulos entram muitas vezes nesta categoria, e por isso é-lhes permitido um rácio ligeiramente inferior.
Porque é que o contraste importa tanto?
Cerca de 1 em cada 12 pessoas tem alguma forma de daltonismo, e toda a gente tem dificuldade em ler texto de baixo contraste num dia de sol. Um bom contraste melhora a legibilidade para todos os utilizadores e é uma exigência legal de acessibilidade num número crescente de países.
As minhas cores reprovaram — como as corrijo?
Escureça o texto ou clareie o fundo em vez de mudar completamente de tonalidade. Um pequeno ajuste de luminosidade costuma bastar para passar o limiar mantendo as cores da marca reconhecíveis.