Hierarquia Visual
A rápida raposa marrom salta sobre o cão preguiçoso. A legibilidade é essencial.
Um verificador de contraste é uma ferramenta de acessibilidade que mede a diferença de luminância entre as cores de primeiro plano e de fundo. Ele calcula a taxa de contraste e avalia se sua combinação de cores atende aos padrões WCAG 2.1. O verificador de contraste do Color Taste fornece resultados instantâneos de aprovação/reprovação para os níveis AA e AAA, além de sugestões de correção automática quando suas cores não atendem aos requisitos.
Verifique se suas cores atendem aos padrões WCAG AA: 4,5:1 para texto normal e 3:1 para texto grande e componentes de UI.
Verifique o padrão AAA mais rigoroso: 7:1 para texto normal e 4,5:1 para texto grande.
Teste o contraste para texto normal, texto grande (18pt+), botões, bordas de entrada, ícones e outros elementos de UI.
Digite ou cole sua cor de texto/primeiro plano nos formatos HEX, RGB ou HSL no primeiro campo de entrada.
Insira sua cor de fundo no segundo campo. Veja a pré-visualização ao vivo ser atualizada em tempo real.
A taxa de contraste é calculada automaticamente. Marcas de verificação verdes indicam aprovação, cruzes vermelhas indicam reprovação nos níveis WCAG.
Quando sua combinação falhar, clique na sugestão de correção automática para ajustar suas cores mantendo a intenção do design.
Obtenha cálculos de taxa de contraste em tempo real com resultados de aprovação/reprovação para os padrões AA e AAA.
Quando o contraste falhar, receba sugestões inteligentes que ajustam minimamente suas cores para atender aos requisitos de acessibilidade.
Veja exatamente como seu texto fica na cor de fundo com pré-visualizações em tempo real para diferentes tamanhos de texto.
Trabalhe no formato de cor de sua preferência. O verificador lida com todas as conversões automaticamente.
Verifique a acessibilidade durante o processo de design.
Valide o contraste no código antes do lançamento.
Garanta que os paletes de tokens atendam aos padrões WCAG.
Audite e corrija problemas de contraste em escala.
O WCAG 2.1 define taxas de contraste mínimas para diferentes tipos de conteúdo e níveis de conformidade:
4,5:1 para texto normal, 3:1 para texto grande (18pt ou 14pt em negrito). Este é o alvo de conformidade mais comum.
7:1 para texto normal, 4,5:1 para texto grande. O padrão ouro para máxima acessibilidade.
Mínimo de 3:1 para botões, bordas de entrada, ícones e qualquer elemento gráfico que transmita significado.
Para WCAG AA: texto normal precisa de pelo menos 4,5:1, texto grande (18pt ou 14pt em negrito) precisa de pelo menos 3:1, e componentes de UI não textuais precisam de pelo menos 3:1.
AAA é um padrão mais rigoroso: 7:1 para texto normal e 4,5:1 para texto grande. A maioria dos sistemas de design visa AA como mínimo, com AAA como meta aspiracional para conteúdo crítico.
Sim. O verificador de contraste do Color Taste aceita formatos de cor HEX, RGB e HSL. Insira suas cores em qualquer formato e a ferramenta lida com a conversão automaticamente.
Quando sua combinação de cores falhar, o Color Taste sugere cores ajustadas que atendem aos requisitos WCAG, mantendo-se o mais próximo possível da intenção original do design. Clique na sugestão para aplicá-la instantaneamente.
Sim, o verificador de contraste do Color Taste é completamente gratuito. Sem cadastro, sem marcas d'água, sem limites de uso. Verifique quantas combinações de cores precisar.