Verificador de Contraste de Cores
Verifique instantaneamente a proporção de contraste entre cores de texto e fundo e se atendem ao padrão de legibilidade (WCAG AA)
Características
Verificação instantânea da proporção de contraste
Insira as cores do texto e fundo para ver se atendem ao WCAG AA
Compatível com seletor e código de cores
Especifique cores por seletor de cores ou cole códigos HEX, forma abreviada ou rgb()
Visualização de amostra em 2 tamanhos
Confira como o texto comum e títulos aparecem instantaneamente
Aplicar cores aprovadas com um clique
Aplique sugestões de cores que mantêm a tonalidade enquanto ajustam o brilho
Como usar
Especificar a cor do texto
Escolha com o seletor de cores ou insira o código de cor no formato #333333, #333 ou rgb(51, 51, 51)
Especificar a cor de fundo
Especifique a cor de fundo da mesma forma. Os resultados são atualizados conforme você digita, sem necessidade de clicar em botão
Verificar proporção, aprovação/reprovação e amostra
Verifique a proporção de contraste, aprovação/reprovação para texto comum e texto grande, avaliação breve e como o texto de amostra aparece
Aplicar cor sugerida e verificar novamente
Se reprovado, clique em "Alterar cor do texto para..." ou similar para aplicar uma cor aprovada. Use o botão de troca para intercambiar cores de texto e fundo
Casos de uso
Verificar paleta de apresentações e documentos
Confirme se as cores de texto e fundo em documentos internos e apresentações são legíveis antes de finalizar
Verificar paleta de sites
Confirme se as cores de sites e banners atendem aos padrões de acessibilidade (WCAG AA)
Determinar uso de cores da marca no corpo de texto
Ao usar cores da marca como texto, determine quão escuro deve ser para uso no corpo do texto
Corrigir paletas reprovadas
Corrija paletas criticadas para cores aprovadas, mantendo a tonalidade original
Conhecimento básico
O que é proporção de contraste
A proporção de contraste é um indicador que expressa a diferença de brilho entre cores de texto e fundo em valores de 1:1 a 21:1. A combinação preto e branco tem o máximo de 21:1, enquanto cores idênticas têm o mínimo de 1:1.
- Como é calculada：A proporção de contraste é calculada convertendo as duas cores para luminância relativa sRGB, adicionando 0,05 a cada uma e dividindo a luminância mais clara pela mais escura.
- Guia de valores：Em fundo branco (#FFFFFF), #777777 cinza tem proporção de contraste de 4,47:1, #999999 tem 2,84:1, e preto (#000000) tem 21:1.
Diferença entre AA e AAA do WCAG
WCAG é uma diretriz internacional sobre acessibilidade de conteúdo web que define os limites de aprovação da proporção de contraste em dois níveis: AA e AAA.
- AA (nível padrão)：AA requer 4,5:1 ou mais para texto comum e 3,0:1 ou mais para texto grande, sendo o nível padrão que a maioria dos sites busca.
- AAA (nível mais rigoroso)：AAA requer 7:1 ou mais para texto comum e 4,5:1 ou mais para texto grande, visando legibilidade para pessoas com visão reduzida.
Definição de texto grande
Texto grande no WCAG refere-se a texto com aproximadamente 18 pontos (24px) ou mais, ou 14 pontos (cerca de 18,7px) ou mais em negrito.
- Texto comum：Texto comum é aquele que não se enquadra em texto grande, incluindo corpo de texto e notas, requerendo proporção de contraste de 4,5:1 ou mais.
- Relação com títulos：Títulos com menos de 24px e não em negrito são tratados como texto comum, exigindo verificação tanto de tamanho quanto de peso.
Segurança e Privacidade
Tudo no navegador
Os dados inseridos são processados apenas no seu navegador e não são enviados para fora.
Processado apenas no navegador
Cálculo de proporção de contraste e sugestão de cores é processado inteiramente no seu navegador, e os dados de entrada não são enviados para o servidor.
Comunicação criptografada com HTTPS
O carregamento da página também é criptografado por TLS, e o conteúdo não pode ser lido por terceiros.
Sem envio a terceiros
O conteúdo de entrada não é enviado para serviços externos como redes de publicidade ou rastreadores.
Sem salvamento automático de resultados
Cores de texto e fundo inseridas e sugestões de entrada não são armazenadas no servidor.
Siga RAKKOTOOLS na Busca do Google
194 ferramentas úteis ficam mais fáceis de encontrar na Busca do Google e na Busca por IA!
- Encontrado na busca
- Exibido também na busca por IA
- Descubra novas ferramentas
Informações de atualização
- update #337
Verificador de Contraste de Cores adicionado, avalia a legibilidade da cor do texto e da cor de fundo