WCAG Color Contrast Checker

Check foreground and background color pairs against WCAG 2.x and APCA contrast standards. Get live text previews, pass/fail ratings, and accessible color suggestions.

100% no navegador. Seus dados nunca saem do seu computador.

#1a202c
#ffffff
Taxa de Contraste16.32:1
AANormal✓AAGrande✓AAANormal✓AAAGrande✓
APCALc 97Excelente
Pré-visualização

O veloz raposo marrom pula sobre o cão preguiçoso

O veloz raposo marrom pula sobre o cão preguiçoso

O veloz raposo marrom pula sobre o cão preguiçoso

BotãoCampo de texto
Enviar para:

Conversores e Exemplos

Verificar Acessibilidade de Cor de Botões WCAG

Verifique se as cores dos seus botões atendem aos requisitos de contraste WCAG. Teste pares de primeiro plano e fundo de botões CTA para acessibilidade.

 Verificar Contraste de Texto de Espaço Reservado WCAG

Verifique se o texto de espaço reservado dos seus campos de entrada atende aos requisitos de contraste WCAG. O texto de espaço reservado é um ponto comum de falha de acessibilidade.

 Verificar Contraste de Texto de Espaço Reservado WCAG

Verifique se o texto de espaço reservado dos seus campos de entrada atende aos requisitos de contraste WCAG. O texto de espaço reservado é um ponto comum de falha de acessibilidade.

Ferramentas Relacionadas

rgb
Conversor de Cores + Paleta

Converta cores entre HEX, RGB, HSL, HSB e CMYK. Gere paletas complementares, análogas, triádicas e outras. Verifique taxas de contraste WCAG. Todo processamento acontece no seu navegador.

 css
Gerador de Gradientes CSS: Ferramenta de Gradientes Linear, Radial e Cônico

Crie gradientes CSS linear, radial e cônico visualmente. Arraste os pontos de cor, ajuste os ângulos e copie o CSS pronto para produção.

WCAG Color Contrast Checker

Check any foreground and background color pair against WCAG 2.x and APCA contrast standards. Get real-time pass/fail ratings, live text previews at multiple sizes, and smart suggestions for accessible alternatives when your colors fail.

How to Use

  1. Click the foreground color chip or type a hex value to pick your text color
  2. Click the background color chip or type a hex value to pick your background
  3. Read the contrast ratio and WCAG/APCA ratings
  4. If colors fail, click a suggestion to apply an accessible alternative

WCAG 2.x Contrast Levels

LevelNormal TextLarge TextUI Components
AAA7:14.5:17:1
AA4.5:13:13:1
FailBelow 3:1Below 3:1Below 3:1

Large text is defined as 18px (14px bold) or larger. UI components include buttons, input fields, icons, and form controls.

APCA Lc Rating

APCA uses a signed contrast value (Lc) instead of a ratio. Positive values mean dark text on light backgrounds. Negative values mean light text on dark backgrounds.

Lc RangeRatingUse Case
75+ExcellentBody text, any size
60-74GoodBody text, small text
45-59AcceptableLarge text only
30-44PoorDecorative text only
Below 30Very PoorDo not use for text

Common Use Cases

Design system color auditing

Run your brand palette through the checker. Test your primary text color against every background variant in your system. Document which pairs pass AA and which need adjustments.

Dark mode migration

Dark mode inverts your contrast relationships. A color pair that passes in light mode often fails in dark mode. Use the swap button to quickly test both directions.

Email and marketing templates

Email clients render colors differently. Test your email text colors against common email background colors (white, light gray, brand tints) to catch accessibility issues before sending.

Tips for Improving Contrast