Verificador de contraste de cores
Prévia
Dê espaço para boas ideias.
Um pouco de clareza já ajuda bastante.
Reúna suas ideias, mantenha os detalhes organizados e reserve tempo para o trabalho que realmente importa. Tudo o que você precisa, em um só lugar.
Feito para o seu dia a dia.
Verifique o contraste entre as cores do texto e do fundo.
Duas cores podem parecer atraentes em um mockup, mas serem difíceis de ler quando aplicadas a textos ou controles pequenos. Insira uma cor HEX de primeiro plano e uma de fundo para ver sua taxa de contraste e como a combinação se comporta em relação aos limites de texto AA e AAA do WCAG 2.x. A pré-visualização coloca essas cores em contextos comuns de texto, botão e interface para que você possa avaliar a combinação além de um único número.
O que significam os resultados de contraste do WCAG?
- Texto normal: pelo menos 4.5:1 para AA e 7:1 para AAA.
- Texto grande: pelo menos 3:1 para AA e 4.5:1 para AAA. O texto grande de acordo com as WCAG tem tamanho de fonte de pelo menos 24px em peso normal ou cerca de 18,7px em negrito.
- Componentes de interface do usuário e objetos gráficos relevantes: um limite de contraste não textual de 3:1 pode ser aplicado às cores adjacentes.
A decisão de aprovação/reprovação usa a proporção não arredondada, mesmo quando um valor exibido tem menos casas decimais. Um par de cores aprovado não significa que uma página da web ou componente inteiro esteja em conformidade com as WCAG: outras combinações de cores, estados, estilos de foco, semântica e interações ainda precisam ser verificadas.
Como testar um par de cores
- Insira os valores HEX de primeiro plano e de fundo ou escolha cores com o seletor.
- Leia a taxa de contraste e os resultados para texto normal, texto grande e interface do usuário.
- Inspecione a pré-visualização da interface ao vivo. Altere uma cor e compare o resultado antes de aplicá-la ao seu design.
Perguntas frequentes
A proporção 4.5:1 é suficiente para todos os tipos de texto?
É o contraste mínimo AA das WCAG para texto normal. O AAA tem uma meta mais alta de 7:1; textos grandes têm limites diferentes.
Ter um passe AA significa que meu site é acessível?
Não. Esta ferramenta verifica apenas um par de cores fornecido. A acessibilidade também depende de outros pares de primeiro plano/fundo e de muitos outros requisitos além do contraste.
Posso testar transparência, gradientes ou uma página web inteira?
Não nesta versão. O verificador avalia um par de cores HEX sólidas usando o cálculo de contraste WCAG 2.x; não é um scanner de páginas da web nem um teste APCA/WCAG 3.