ZenovayTools

Verificador de Contraste de Cores

Verifique as proporções de contraste de cores WCAG 2.1 para texto e planos de fundo. Verifique conformidade AA e AAA para texto normal e grande.

Como Usar Verificador de Contraste de Cores

  1. 1Digite sua cor de primeiro plano (texto), RGB ou cor nomeada.
  2. 2Digite sua cor de plano de fundo.
  3. 3Veja a proporção de contraste e conformidade WCAG 2.1 AA/AAA para texto normal e grande.
  4. 4Ajuste as cores até que seu design atenda aos requisitos de acessibilidade.
ZenovayAnalytics

Analytics feito para fundadores.

  • Acompanhamento de visitantes em tempo real
  • Privacidade em primeiro lugar, sem banner de cookies
  • Configurado em dois minutos
Conheça o Zenovay

Ferramentas Relacionadas

Formatador e Validador de JSON
Formate, valide e embeleze dados JSON com destaque de sintaxe e detecção de erros.
Decodificador JWT
Decodifique e inspecione tokens JWT. Visualize cabeçalho, payload e verifique assinaturas.
Codificar/Decodificar Base64
Codifique texto para Base64 ou decodifique Base64 de volta para texto. Suporta dados UTF-8 e binários.
Encode/Decode de URL
Codifique ou decodifique componentes de URL. Trate caracteres especiais, strings de consulta e URLs completas.

Perguntas Frequentes

O que é contraste de cor WCAG?▾
WCAG (Web Content Accessibility Guidelines) requer contraste de cor suficiente entre o texto e seu fundo para que pessoas com baixa visão ou daltonismo possam ler o conteúdo. A razão de contraste é medida de 1:1 (sem contraste) a 21:1 (preto em branco).
O que é conformidade WCAG AA vs AAA?▾
WCAG AA requer uma razão de contraste de 4,5:1 para texto normal e 3:1 para texto grande (18pt+ ou 14pt+ negrito). AAA requer 7:1 para texto normal e 4,5:1 para texto grande. AA é o mínimo legal para a maioria das leis de acessibilidade (ADA, EN 301 549). AAA é o padrão ouro.
O que conta como texto grande em WCAG?▾
Texto grande é definido como 18pt (24px) ou maior para peso normal, ou 14pt (aproximadamente 18.67px) ou maior para texto em negrito. Texto grande tem requisitos de contraste mais baixos porque é mais fácil de ler com contraste mais baixo.
Por que o contraste de cor importa para SEO?▾
Texto com baixo contraste aumenta a taxa de rejeição (os usuários saem), reduz o tempo na página e prejudica as pontuações do Core Web Vitals. Google usa sinais de engajamento na classificação. Sites acessíveis também são classificados melhor porque servem mais usuários de forma eficaz.
Como corrijo o contraste baixo?▾
Escureça a cor do texto ou clareie o fundo (para temas claros). Pequenos ajustes incrementais de 10-20% de claridade geralmente são suficientes. Use uma roda de cores para manter a tonalidade da sua marca enquanto ajusta a claridade.
Quais formatos de cor essa ferramenta aceita?▾
Essa ferramenta aceita cores hex (#fff, #ffffff), RGB (rgb(255,255,255)), cores CSS nomeadas (white, red) e HSL (hsl(0, 0%, 100%)). Hex é o formato mais confiável.
O contraste WCAG se aplica a ícones e gráficos?▾
WCAG 1.4.11 (Non-text Contrast, Level AA) requer uma razão de contraste de 3:1 para componentes de UI (ícones, botões, controles de formulário) e gráficos informativos. Essa ferramenta se concentra no contraste de texto (WCAG 1.4.3 e 1.4.6).