WCAG Color Contrast Checker (AA / AAA)

Checa contraste texto/background contra WCAG 2.1 AA e AAA - preview ao vivo

🔒 100% no browser🆓 Grátis pra sempre⚡ Sem sign-up
Nota: A interface da ferramenta abaixo por enquanto está só em inglês. Estamos traduzindo uma por uma. Ver essa ferramenta em inglês →
The quick brown fox jumps over the lazy dog - 0123456789
14.33:1
Contrast ratio · Normal text
AA (normal ≥ 4.5)PASS
AA large (≥ 3)PASS
AAA (normal ≥ 7)PASS
AAA large (≥ 4.5)PASS

Uses the WCAG 2.1 sRGB relative-luminance formula. “Large text” is 24px (18pt) regular or 18.66px (14pt) bold.

Como funciona

  1. 1
    Pick foreground e background

    Digita HEX ou usa os color pickers. Alpha é suportado e blendeado sobre o background.

  2. 2
    Lê o ratio

    O contrast ratio exato aparece com badges AA / AAA pass/fail pra texto normal e large.

  3. 3
    Ajusta até passar

    Sliders ajustam lightness em passos pequenos pra achar o shade que passa mais próximo.

Sobre WCAG Color Contrast Checker (AA / AAA)

WCAG color contrast checker grátis. Pick cores de foreground e background pra ver o contrast ratio exato (por WCAG 2.1 relative luminance) e badges pass/fail pra AA, AA Large, AAA e AAA Large. Preview ao vivo de texto real com as cores. Roda inteiro no seu browser. WCAG Color Contrast Checker (AA / AAA) no 712 Tools roda inteiro dentro do seu browser via APIs nativas de JavaScript - nenhum server vê seus dados. Isso significa resultado na hora, privacidade total e nenhum limite de upload.

Seja pra uma sessão de debug, uma checagem rápida ou um incidente em produção, essa ferramenta é grátis e sem limite de uso. Sem watermarks, sem sign-up e sem ads dentro da ferramenta.

Perguntas frequentes

Que ratios o WCAG exige?

AA pede 4.5:1 pra texto normal e 3:1 pra large. AAA pede 7:1 pra normal e 4.5:1 pra large. 'Large' é 18pt (24px) regular ou 14pt (18.66px) bold.

Que fórmula de luminância usa?

A fórmula sRGB relative-luminance do WCAG 2.1 - a mesma que webaim.org e axe. Resultados batem até a quarta casa decimal.

E APCA?

APCA (o algoritmo proposto pra WCAG 3) ainda não tá incluído - ainda tá em draft. Essa tool fica na fórmula WCAG 2.1 atual que auditores e advogados citam.

Leia mais

5 min de leitura

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

Ferramentas relacionadas

Color Converter

Converte entre HEX, RGB, HSL e CMYK com preview ao vivo

Palette Generator

Gera paletas de cores harmoniosas a partir de uma cor base

CSS Gradient

Desenha gradients CSS linear, radial e conic com preview ao vivo

Box Shadow

Desenha box-shadows CSS multi-layer com preview ao vivo

Glassmorphism

Desenha frosted-glass cards CSS com preview ao vivo e código copy-ready

Physics Editor

Editor de hitbox de sprites grátis online - auto-traceia collision polygons e exporta pra Phaser, Matter.js, Rapier ou qualquer engine 2D