Como escolher uma cor legível para um site?
Guia completo para selecionar cores legíveis na web. Descubra as regras de contraste, boas práticas e erros a evitar.
Experimente nossa ferramenta gratuita
Sem cadastro, processamento 100% local.
A legibilidade é a base de toda experiência do usuário bem-sucedida. Um site pode ser lindo, mas se os visitantes têm dificuldade para ler o conteúdo, eles vão embora em segundos. Escolher cores legíveis não é apenas uma questão de estética — é uma necessidade funcional que impacta diretamente o engajamento, a conversão e a acessibilidade do seu site.
No entanto, esse problema é frequentemente negligenciado. Designers talentosos criam combinações visualmente atraentes que falham nos testes de legibilidade mais básicos. Um cinza elegante no branco? Ilegível para 30% dos visitantes. Texto branco em imagem de fundo? Uma loteria dependendo das zonas da imagem.
Este guia ensina você a dominar os princípios científicos por trás da legibilidade das cores. Você descobrirá como avaliar o contraste, quais combinações funcionam universalmente e como usar nossas ferramentas para validar suas escolhas antes da produção.
Índice
Como usar bem text-readability
text-readability ajuda a acelerar o trabalho com cores e elementos visuais.
As recomendações cobrem usos de accessibility, qualidade do resultado e consistência com projetos web.
Como fazer em 3 passos
Identifique sua cor de fundo principal (geralmente branco, creme ou cinza muito claro para conteúdo textual).
Use nossa ferramenta de legibilidade para testar diferentes cores de texto. Comece com cinzas escuros e ajuste até atingir uma proporção mínima de 4.5:1.
Valide cada combinação da sua paleta com o analisador WCAG. Anote as proporções e níveis de conformidade (A, AA, AAA).
Simule sua paleta com nossa ferramenta de daltonismo para verificar se permanece legível para todos os tipos de visão.
Exporte suas cores validadas com notas de contraste para a documentação do seu design system.
Dicas de especialistas
- Mantenha as cores principais como variáveis reutilizáveis.
- Teste o resultado no celular, desktop, modo claro e escuro.
Erros comuns a evitar
- ✗Usar cinza médio (#808080) para texto secundário — esse cinza está no limite da legibilidade e frequentemente falha nos testes.
- ✗Testar a legibilidade apenas na sua própria tela bem calibrada, esquecendo que a maioria dos usuários tem displays menos performantes.
- ✗Confundir contraste de tom com contraste de luminância — cores muito diferentes podem ter a mesma luminância e ser ilegíveis juntas.
Ferramentas complementares
Perguntas frequentes
Artigos relacionados
text-readability: guia prático de accessibility
Guia localizado para usar text-readability, entender boas práticas de accessibility e evitar erros comuns.
text-readability: guia prático de accessibility
Guia localizado para usar text-readability, entender boas práticas de accessibility e evitar erros comuns.
text-readability: guia prático de accessibility
Guia localizado para usar text-readability, entender boas práticas de accessibility e evitar erros comuns.
Pronto para experimentar?
Nossa ferramenta é gratuita, sem cadastro e respeita sua privacidade.
Experimentar Lisibilité texte agora