Texto grande, 24 px
Texto normal de 15 px. Um pequeno jabuti xereta viu dez cegonhas felizes.
Este verificador de contraste de cores testa uma cor de texto sobre uma cor de fundo com a fórmula da WCAG 2.1 e mostra a razão de contraste na hora, com aprovação ou reprovação para AA e AAA em texto normal e grande. Se o par falhar, sugere a cor aprovada mais próxima com o mesmo matiz, para corrigir o design sem mudar o visual.
Como usar
- Toque na amostra grande para abrir o seletor, use o conta-gotas para capturar uma cor da tela ou digite em qualquer campo.
- Cole qualquer cor CSS (#hex, rgb(), hsl(), hwb(), oklch(), lab(), um nome…) em um campo ou em qualquer lugar da página.
- Toque no botão de copiar ao lado de um formato. Arraste Opacidade para adicionar transparência.
- Na paleta, toque em uma amostra para usá-la; mantenha pressionado (ou clique direito) para copiar o HEX. Em Contraste, defina texto e fundo e toque numa sugestão para corrigir uma combinação reprovada.
- A WCAG 2.1 pede 4,5:1 para texto normal (AA) e 7:1 para AAA. Texto grande (24 px, ou 18,66 px em negrito) precisa de 3:1 para AA e 4,5:1 para AAA. Componentes de interface e gráficos, 3:1.
- As sugestões mantêm matiz e saturação e mudam só a luminosidade (em OKLCH) até o valor mais próximo que passa.
- Cores semitransparentes são mescladas ao fundo antes do cálculo.
- Os valores CMYK são uma conversão simples; para impressão, use o perfil de cor da gráfica.
- Suas cores recentes ficam salvas apenas neste navegador.
Os limites da WCAG
A WCAG 2.1 pede razão de contraste de pelo menos 4,5:1 para texto normal (nível AA) e 7:1 para o nível AAA. Texto grande, ou seja, a partir de 24 px ou 18,66 px em negrito, precisa de 3:1 para AA e 4,5:1 para AAA. Componentes de interface e gráficos com significado, como bordas de campos e ícones, precisam de 3:1.
A razão vai de 1:1 (cores iguais) a 21:1 (preto no branco).
Como a razão é calculada
Cada cor é convertida em luminância relativa: os canais sRGB são linearizados e ponderados com 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul. A razão é (L1 + 0,05) / (L2 + 0,05), com a cor mais clara em cima. O cinza #767676 no branco dá 4,54:1 e passa no AA por pouco, enquanto #777777 dá 4,48:1 e reprova: a linha pode ser bem fina. Cores semitransparentes são misturadas antes ao fundo.
Corrigir um par reprovado
As sugestões mantêm matiz e saturação e mudam só a luminosidade em OKLCH, até o valor aprovado mais próximo. Escurecer o texto costuma ser a mudança menos perceptível. O contraste é só uma parte da acessibilidade: peso, tamanho e espaçamento da fonte também importam.
Perguntas frequentes
Qual contraste preciso para a WCAG AA?
4,5:1 para texto normal e 3:1 para texto grande (24 px, ou 18,66 px em negrito). Botões, bordas de campos e ícones precisam de 3:1 em relação ao entorno.
Qual a diferença entre AA e AAA?
AA é o nível exigido pela maioria das leis e diretrizes. AAA é mais rígido: 7:1 para texto normal e 4,5:1 para texto grande, recomendado para leitura longa ou pessoas com baixa visão.
Texto branco num botão azul passa?
Depende do azul. Branco sobre #1E88E5 dá 3,68:1, que só passa para texto grande; para rótulos de botão em tamanho normal é preciso um azul mais escuro.
O que conta como texto grande?
Texto de pelo menos 24 px (18 pt) normal, ou 18,66 px (14 pt) em negrito. Tudo que for menor é texto normal.
Como a ferramenta escolhe a cor sugerida?
Ela mantém matiz e saturação e ajusta só a luminosidade em OKLCH até o par atingir a razão desejada, então a cor continua parecendo da mesma família.
É o mesmo que o método APCA?
Não. Este verificador usa a razão de contraste da WCAG 2.1, a fórmula citada pelas normas e leis de acessibilidade atuais. O APCA é um método diferente e mais novo.