Verificador de contraste de cores (WCAG)
Verifique a taxa de contraste entre uma cor de texto e uma de fundo segundo WCAG 2.2 AA e AAA para texto normal, texto grande e elementos de interface, e obtenha as cores aprovadas mais próximas
Carregando a ferramenta…
Escolha uma cor de texto e uma cor de fundo para obter de uma vez a taxa de contraste das WCAG 2.2 e os resultados AA e AAA. Quando um nível não é atingido, a página sugere a cor aprovada mais próxima mudando apenas a luminosidade. Serve para conferir se o texto de um site, de um aplicativo ou de uma apresentação é bem legível.
Como usar
- Em “Verificar duas cores”, defina a “Cor do texto” e a “Cor de fundo” com o seletor ou digitando HEX, rgb() ou hsl().
- Digite o seu próprio texto em “Frase de pré-visualização” para vê-lo como texto normal, grande e em negrito, e como borda e ícone.
- Em “Cores mais próximas que são aprovadas”, pressione “Aplicar” ao lado de “Mudar a cor do texto” ou “Mudar o fundo”. Pressione um valor HEX para copiá-lo.
- Em “Verificar uma paleta”, insira de 2 a 12 cores para obter uma tabela com todas as combinações e a lista “Pares que atingem o nível”.
Como funciona
- Taxa de contraste = (L1 + 0.05) ÷ (L2 + 0.05), onde L1 e L2 são as luminâncias relativas das duas cores. Vai de 1:1 a 21:1 e é arredondada para baixo com duas casas decimais.
- Os níveis seguem os critérios 1.4.3 (AA: 4.5:1 para texto normal, 3:1 para texto grande), 1.4.6 (AAA: 7:1 e 4.5:1) e 1.4.11 (3:1 para elementos de interface) das WCAG 2.2. Texto grande tem 24px, ou 18.66px em negrito, ou mais.
- Uma sugestão mantém o matiz e o croma em OKLCH e move apenas a luminosidade até atingir o nível. Quando nenhuma luminosidade consegue atingi-lo, a página informa isso.
- As últimas cores, a frase e a lista da paleta ficam guardadas neste navegador.
Perguntas frequentes
- O que significa uma taxa de contraste de 4.5:1?
- A luminância relativa da cor mais clara mais 0.05 é 4.5 vezes a da cor mais escura mais 0.05. É o mínimo para texto de tamanho normal no nível AA.
- O texto cinza #777777 é aprovado sobre branco?
- A taxa é 4.47:1, pouco abaixo de 4.5:1, então apenas o nível de texto grande é atingido. Um passo mais escuro, #767676, dá 4.54:1 e é aprovado em AA.
- Qual é a diferença entre AA e AAA?
- AA exige 4.5:1 para texto normal e AAA exige 7:1. A maioria dos sites busca AA; AAA convém a textos longos de leitura.
- Bordas de botões e ícones também precisam de contraste?
- Sim. Pelo critério 1.4.11 das WCAG, elementos de interface e gráficos que transmitem significado precisam de pelo menos 3:1 em relação ao entorno; a linha “Elementos de interface e gráficos” verifica isso.