Design

Verificador de Contraste de Cores

Razão de contraste WCAG para duas cores.

Quase antes de percebermos, já tínhamos deixado o chão.
1.00
Relação de contraste
PadrãoTexto normalTexto grande
WCAG AA
WCAG AAA
WCAG 1.4.11Componentes não textuais/de UI (≥3:1): —

Alternativa de texto AA mais próximaCalculando uma alternativa OKLCH…

Este relatório segue os requisitos de relação de contraste da WCAG 2.2. A APCA continua experimental e não é um resultado de conformidade com a WCAG 3.

Escolher cores? Conversor de cores · bios sociais: Gerador de Texto Estilizado · balanças: Gerador de Tons de Cor.

Como usar

Escolha uma cor de texto e uma cor de fundo. A razão de contraste e aprovação/reprovação para cada nível WCAG são atualizadas ao vivo, com pré-visualização.

Perguntas frequentes

O que é uma boa taxa de contraste?

WCAG AA exige 4.5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 e 4.5:1, respectivamente. WCAG 1.4.11 também exige 3:1 para elementos gráficos essenciais sem texto e para limites ou estados de componentes de UI.

O que conta como texto grande?

Texto grande tem cerca de 18pt (24px) ou 14pt (18,66px) em negrito e maior.

Como a proporção é calculada?

A partir da luminância relativa de ambas as cores: (mais clara + 0,05) ÷ (mais escura + 0,05), conforme a fórmula WCAG.

Última atualização: