Verificador de contraste WCAG AA e AAA

Verifique o contraste de cores segundo WCAG 2.2 AA e AAA, pré-visualize tamanhos de texto e encontre alternativas de cor acessíveis.

Passe o cursor sobre um campo ou selecione-o para ver a ajuda. Pressione Escape para fechar.

Primeiro planoFundoBase opaca

Use HEX, RGB, RGBA ou HSL. As cores transparentes são compostas sobre a base opaca.

5.84:1

Os limiares usam o rácio com precisão total, nunca o valor arredondado apresentado.

WCAG 2.2
Nível	Usar	SC	Mínimo	Resultado
AA	Texto normal	1.4.3	4.5:1	Aprovado
AA	Texto grande	1.4.3	3:1	Aprovado
AAA	Texto normal	1.4.6	7:1	Não aprovado
AAA	Texto grande	1.4.6	4.5:1	Aprovado
AA	Componentes da interface e gráficos	1.4.11	3:1	Aprovado

Texto de pré-visualizaçãoTamanho de letra (px CSS)Negrito

Aa — fiokit.

Texto normal: AA ✓ · AAA ✗

Texto grande: pelo menos 24 px CSS ou 18,67 px CSS em negrito (14 pt).

Objetivo do primeiro plano sugeridoRelatório

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Texto normal (SC 1.4.3): PASS — 4.5:1
AA Texto grande (SC 1.4.3): PASS — 3:1
AAA Texto normal (SC 1.4.6): FAIL — 7:1
AAA Texto grande (SC 1.4.6): PASS — 4.5:1
AA Componentes da interface e gráficos (SC 1.4.11): PASS — 3:1

Verifica pares de cores, não a conformidade WCAG completa. Avalie separadamente cores adjacentes, estados de interação e conteúdo real.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Como funciona

Defina primeiro plano, fundo e base opaca. Os resultados AA e AAA são atualizados imediatamente. Experimente tamanho e espessura da letra, aplique uma cor sugerida ou descarregue o relatório.

Um exemplo prático

Cores

#155bdf

Perguntas frequentes

Meu texto é enviado a um servidor?

Não. O conteúdo é processado neste navegador. Não é enviado ao servidor nem salvo.

O que devo saber sobre Verificador de contraste WCAG AA e AAA?

Apresenta separadamente os limiares para texto e elementos não textuais. Esta verificação de cor não certifica a conformidade WCAG completa.