Verificador de Contraste de Cores WCAG — ferramenta…

O que é Verificador de Contraste de Cores WCAG?

Verificador de contraste de cores WCAG gratuito online. Insira cores de primeiro plano e fundo, verifique conformidade com WCAG 2.1 AA e AAA. Inclui pares de cores predefinidos e visualização ao vivo.

O contraste de cores é um dos aspectos mais negligenciados da acessibilidade web e, mesmo assim, afeta diretamente se milhões de usuários conseguem ler o seu conteúdo. As WCAG (Web Content Accessibility Guidelines) 2.1 definem taxas de contraste específicas para cores de texto e fundo, garantindo legibilidade para usuários com baixa visão, daltonismo ou condições de visualização como luz solar intensa. O Color Contrast Checker mede qualquer combinação de cores de primeiro plano/fundo contra esses padrões e informa instantaneamente se ela passa ou falha.

Insira as cores usando o seletor de cores HEX ou digite valores hex diretamente. A ferramenta calcula a taxa de contraste — um número entre 1:1 (sem contraste) e 21:1 (contraste máximo, preto sobre branco). O resultado é comparado com quatro limiares WCAG: texto normal AA (4,5:1), texto grande AA (3:1), texto normal AAA (7:1) e texto grande AAA (4,5:1). Cada limiar mostra um indicador claro de aprovação ou reprovação, para que você saiba exatamente quais padrões seu par de cores atende.

Um painel de pré-visualização ao vivo mostra texto de exemplo renderizado com as cores escolhidas, dando a você uma verificação visual junto com a análise numérica. Isso é importante porque algumas combinações de cores que passam matematicamente ainda podem parecer desconfortáveis de ler (ou vice-versa). Oito pares de cores predefinidos estão incluídos para cenários comuns — modo escuro, modo claro, cores de links e selos de aviso — para que você possa testar combinações do mundo real rapidamente.

A ferramenta também lida com casos extremos. Se as cores forem muito semelhantes, a taxa cai abaixo de 3:1 e todas as verificações falham — um forte sinal de que o par é inutilizável para texto. Se você estiver testando elementos não textuais, como ícones ou bordas de formulários, os requisitos de contraste não textual das WCAG são mais permissivos (mínimo de 3:1), e este verificador pode ajudar você a avaliá-los visualmente, embora os limiares principais sejam voltados ao texto.

Casos de uso reais do Verificador de Contraste de Cores WCAG

Garantindo Legibilidade de Texto em uma Landing Page

Seu designer escolheu texto cinza claro (#999) sobre fundo branco para a seção hero. Teste aqui: a taxa é de aproximadamente 2,8:1 — ela falha na AA das WCAG para todos os tamanhos de texto. Ajuste o primeiro plano para um cinza mais escuro (#595959) e reteste até passar na AA para texto normal (4,5:1+). A pré-visualização ao vivo confirma a legibilidade de relance.

Validando Esquemas de Cores do Modo Escuro

Uma interface em modo escuro usa texto branco sobre fundo azul escuro. Teste a combinação: branco (#FFFFFF) sobre azul-marinho (#0A1628) normalmente produz uma taxa acima de 10:1, passando na AAA facilmente. No entanto, a cor do link no modo escuro pode ser sutil demais — teste seu link azul (#4A90D9) no mesmo fundo escuro para verificar se atende pelo menos à AA para texto grande.

Selecionando Cores Acessíveis para Botões e Selos

Seu selo de notificação usa texto branco sobre fundo vermelho. Teste o tom exato de vermelho — nem todos os vermelhos passam nos requisitos de contraste. Um vermelho vivo (#E53E3E) com texto branco normalmente passa na AA para texto grande, mas pode falhar para rótulos pequenos de selos. Ajuste o tom de vermelho e reteste até que o selo esteja ao mesmo tempo alinhado à marca e acessível.

Por que usar Verificador de Contraste de Cores WCAG?

Conformidade com diretrizes WCAG AA/AAA
Indicadores de aprovado/reprovado com proporções exigidas
8 pares de cores predefinidos para cenários comuns

Como usar Verificador de Contraste de Cores WCAG — Passo a passo

Insira as cores de primeiro plano e fundo.

Ajuste até que todas as verificações sejam aprovadas.

Use presets para cenários comuns.

Para quem é Verificador de Contraste de Cores WCAG?

acessibilidade web
design de UI
conformidade regulatória

Dicas profissionais para Verificador de Contraste de Cores WCAG

1Projete visando a conformidade AA como padrão mínimo. AAA é ideal, mas não é obrigatório para todo conteúdo — reserve o AAA para contextos de leitura de texto longo, em que a legibilidade é essencial.
2Texto grande (18px+ regular ou 14px+ em negrito) tem um requisito de contraste menor (3:1 para AA). Use isso a seu favor para títulos, botões e rótulos que podem ser estilizados maiores.
3Nunca dependa apenas da cor para transmitir informação. Mesmo com contraste aprovado, usuários com daltonismo precisam de dicas adicionais, como ícones, sublinhados ou rótulos, para distinguir estados.
4Teste os pares de cores no início do processo de design, e não após o desenvolvimento. Corrigir problemas de contraste no CSS é fácil; corrigi-los depois que uma cor de marca foi finalizada é muito mais difícil.

Verificador de Contraste de Cores WCAG — Perguntas frequentes

What is WCAG 2.1 AA compliance?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

What is the difference between AA and AAA?

AAA is a higher standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is not required for all content but is recommended where possible.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is Verificador de Contraste de Cores WCAG really free to use?

Yes, Verificador de Contraste de Cores WCAG is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Pronto para usar Verificador de Contraste de Cores WCAG?

Ferramenta online gratuita — funciona no navegador, sem cadastro. Comece a usar agora.

Experimente agora