Contraste e legibilidade
Texto e fundo precisam de contraste suficiente para serem lidos por todo mundo, e o Builder ajuda com o selo AA das paletas prontas e com a prévia das cores.
O que é contraste
Contraste é a diferença de luminosidade entre o texto e o fundo. Cinza claro sobre branco tem contraste baixo. Preto sobre branco tem contraste alto.
A referência usada no mercado é a WCAG, o padrão internacional de acessibilidade na web. No nível AA, ela pede uma relação de pelo menos 4,5:1 entre texto comum e fundo. É essa a régua que o Builder aplica às paletas prontas.
Onde isso aparece no Builder
Em Builder > Aparência > Cores:
- Selo AA nas paletas. Ao clicar em Usar templates, cada paleta que passa no contraste 4,5:1 em todos os pares de texto e fundo mostra o selo AA. Escolher uma delas é o caminho mais curto.
- Preview. A prévia ao lado das cores, com os botões Home e Curso, mostra o resultado antes de salvar.
- Mira. O botão Ver no preview, ao lado de cada cor, destaca onde ela é usada.
O Builder não calcula o contraste das cores que você edita à mão. Para essas, use um verificador de contraste (busque por "contrast checker") e informe os dois códigos hexadecimais.
Os pares que mais pesam
Confira o contraste destes pares, nesta ordem:
| Texto | Fundo |
|---|---|
| Textos e parágrafos | Fundo das páginas |
| Títulos | Fundo das páginas |
| Textos e parágrafos | Fundo dos cards |
| Texto do botão principal | Fundo do botão principal |
| Texto do header | Fundo do header |
| Texto do footer | Fundo do footer |
| Texto dos campos | Fundo dos campos |
| Texto de exemplo (placeholder) | Fundo dos campos |
O par do botão principal é o que mais dá problema: cores vivas de marca (amarelo, laranja, verde claro) raramente sustentam texto branco.
Além da cor
- Tamanho base. Texto corrido muito pequeno cansa. Ajuste em Builder > Aparência > Tipografia.
- Texto em imagens. Texto dentro de banner não se adapta ao tamanho da tela nem é lido por leitores de tela. No componente Banner, preencha o Texto alt com a descrição da imagem.
- Logotipo. Um logo claro sobre cabeçalho claro some. Veja Logotipos e favicon.
Como testar
- Salve as cores e abra o site em uma janela anônima.
- Veja a página inicial, a página de um produto e a tela de login.
- Repita no celular, com o brilho da tela baixo.
- Se você precisa apertar os olhos para ler algum texto, o contraste está insuficiente.
Erros comuns
"Minha cor de marca não passa no contraste"
Mantenha a cor da marca em Cor de destaque e nos fundos, e use uma variação mais escura dela em Fundo do botão principal. Outra saída é trocar Texto do botão principal de branco para uma cor escura.
"Apliquei uma paleta com selo AA e depois mudei uma cor"
O selo vale para a paleta como ela vem. Ao trocar uma cor, confira de novo o par que ela forma.
"O texto de exemplo dos campos está quase invisível"
Texto de exemplo (placeholder) está muito próximo de Fundo dos campos. Escureça o texto de exemplo.