WCAG AA requer 4.5:1 for normal texto and 3:1 for large texto — AAA requer 7:1 and 4.5:1 respectively.

Upgrade to Starter+ to get the closest AA-compliant cor suggestion when your pair fails?

Upgrade to Starter+ to get the closest AA-compliant cor suggestion when your pair fails.

Test your cores at their actual usage tamanhos — a pair that passes for headings may fail for small body texto?

Test your cores at their actual usage tamanhos — a pair that passes for headings may fail for small body texto.

Verificador de Contraste WCAG

Verificar proporções de contraste de cores contra diretrizes WCAG 2.1 AA/AAA com pré-visualização ao vivo, sugestões de correção automática e exportação CSS

Sobre Verificador de Contraste WCAG

Check cor contraste ratios against WCAG 2.1 AA and AAA guidelines com pré-visualização ao vivo, auto-fix suggestions, and CSS export — all no seu navegador.

Como usar Verificador de Contraste WCAG

1Enter or pick a primeiro plano (texto) cor and a fundo cor.
2View the contraste ratio and WCAG pass/fail resultadoados for AA and AAA levels.
3Verifique o live texto pré-visualizaçãos at diferente tamanhos: normal texto, large headings, badges, botãos, and captions.
4Use 'Swap' to reverse primeiro plano and fundo, or 'Random pair' for inspiration.
5Copie o CSS variables for the accessible cor pair.

Dicas

WCAG AA requer 4.5:1 for normal texto and 3:1 for large texto — AAA requer 7:1 and 4.5:1 respectively.
Upgrade to Starter+ to get the closest AA-compliant cor suggestion when your pair fails.
Test your cores at their actual usage tamanhos — a pair that passes for headings may fail for small body texto.

Limites grátis vs pago

Grátis: contraste checking and pré-visualização. Starter+: auto-fix cor suggestions and accessible pairs.

Ferramentas relacionadas

Equipe OneKitToolsAtualizado 2.21.4