Texto branco em botão verde: meça antes de escolher
Um botão verde chama atenção, mas o texto branco nem sempre é confortável de ler. Compare uma legenda escura no Utilgo antes de trocar a cor da marca.
Atualizado em:
Insira as cores reais
Experimente #22c55e na superfície e #ffffff no texto. São exemplos: no seu projeto, consulte os estilos calculados do navegador. O primeiro plano é a legenda e o fundo é o próprio botão, não a página. Comece com duas cores opacas.
Compare uma legenda escura
Mantenha a superfície e use #111827 no texto. W3C AA define 4,5:1 para texto normal e 3:1 para texto grande. Leia o resultado de aprovação, sem depender apenas do valor arredondado. Não marque texto grande para uma legenda que continua pequena.
Confira outros estados
Se o fundo muda ao passar o ponteiro, meça esse par separadamente. Alcance o botão pelo teclado e confira a legenda. Repita no tema escuro se as cores forem diferentes. O arquivo de design pode não representar os valores do CSS real.
Finalize na página real
A ferramenta compara duas cores HEX opacas; não audita a página inteira. Fotos, gradientes e camadas transparentes precisam de análise adicional. Teste o botão no celular e pelo teclado. Registre cores e estados verificados para repetir o teste após mudanças no tema.
Ferramentas relacionadas
Artigos práticos sobre este tema
Implementação de Dark Mode: CSS, JavaScript e Preferência do Sistema
Dark mode reduz a fadiga visual e prolonga a duração da bateria.
Acessibilidade Web: WCAG, ARIA e Design Inclusivo
A acessibilidade web garante que pessoas com deficiência possam usar sites.
Auditoria de Acessibilidade Web: Conformidade WCAG e Processo de Auditoria
A auditoria de acessibilidade web é um processo sistemático que avalia a conformidade do seu site com os padrões WCAG.