Verificador de contraste de cores

Como Funciona Nosso Verificador de Contraste de Cor

Insira as cores do primeiro e fundo usando valores hexadecimais RGB, ou escolha diretamente com o Selector de Cores.

 É possível:

• Ajuste o Alpha para mudar o quão transparente é a cor do primeiro plano.
• Use o controle deslizante de clareza para deixar a cor mais clara ou mais escura.

Nossa ferramenta então calcula a razão de contraste e a compara com as diretrizes do WCAG:

• WCAG 2.0 Nível AA
• Pelo menos 4,5:1 para texto corporal normal
• Pelo menos 3:1 para texto grande
• WCAG 2.1 (UI e gráficos)
• Pelo menos 3:1 para ícones, bordas e outros componentes da interface
• WCAG Nível AAA
• Pelo menos 7:1 para texto normal
• Pelo menos 4,5:1 para texto grande

Texto grande significa que:

• 14 pontos (cerca de 18,66 px) e negrito, ou
• 18 pt (cerca de px) ou mais

Você pode usar o conta-gotas no Seletor de Cor para pegar cores exatas de qualquer coisa na tela. Isso facilita testar designs reais, botões ou fundos.

Para links que dependem apenas da cor para se destacar, use nosso verificador de contraste de cor para garantir que atendam aos padrões de acessibilidade e sejam faciles de ler para todos.