Softonic

Verificador de Contraste de Cores

Etapa 1 / 2 Razão de contraste
Exemplo de cabeçalho grande
Exemplo de texto do corpo. A rápida raposa marrom salta sobre o cachorro preguiçoso.
Resultados

Insira as cores de primeiro plano e fundo e o verificador retorna a razão de contraste WCAG (1:1 a 21:1) além de aprovações/reprovações em relação aos limites WCAG 2.1 AA e AAA para texto normal, texto grande e elementos não textuais. Nos bastidores, utiliza a fórmula de luminância WCAG, matemática simples, mas crítica para acessibilidade. Corrija falhas ajustando a clareza até a razão ultrapassar o limite que você precisa.

Como a razão de contraste é calculada

  1. 1

    Insira duas cores

    Hex, de 3 ou 6 dígitos, para ambas as cores. Seletores de cores disponíveis para cada uma.

  2. 2

    Luminância relativa calculada para cada uma

    L = 0.2126·R + 0.7152·G + 0.0722·B onde cada canal é linearizado a partir de sRGB.

  3. 3

    Razão de contraste

    (L_claro + 0.05) / (L_escuro + 0.05). Razões entre 1:1 e 21:1.

  4. 4

    Emblemas de aprovação/reprovação

    AA (4.5:1 para normal, 3:1 para grande/UI), AAA (7:1 para normal, 4.5:1 para grande). Texto grande = ≥18pt regular ou ≥14pt negrito.

Limites de contraste WCAG

Tipo de conteúdo Limite AA Limite AAA
Texto normal 4.5:1 7:1
Texto grande (≥18pt regular ou ≥14pt negrito) 3:1 4.5:1
Não-texto (componentes de UI, anéis de foco) 3:1 -
Texto incidental (decorativo, desativado, logotipos) isento isento

“Texto grande” significa peso regular de 18pt+ (~24px em CSS) ou 14pt+ negrito (~19px negrito).

Exemplos de contrastes

Par Razão AA normal AA grande AAA normal
Preto sobre branco 21:1 Aprovação Aprovação Aprovação
#333 sobre branco 12.6:1 Aprovação Aprovação Aprovação
#666 sobre branco 5.7:1 Aprovação Aprovação Reprovação
#888 sobre branco 3.5:1 Reprovação Aprovação Reprovação
#AAA sobre branco 2.3:1 Reprovação Reprovação Reprovação
Branco sobre #1976D2 (Material blue 700) 4.6:1 Reprovação Aprovação Reprovação
Branco sobre #2196F3 (Material blue 500) 3.1:1 Reprovação (normal) Aprovação Reprovação

Armadilhas comuns de acessibilidade

  • Texto do corpo cinza sobre branco em #999 ou mais claro, reprova AA. Use #767676 ou mais escuro para texto do corpo sobre branco.
  • Link azul sobre cinza: frequentemente reprova porque ambas as cores são de luminância média.
  • Texto branco sobre cor da marca: aprova em tons mais escuros (≥ 4.5:1), reprova em cores de marca de tom médio. Use texto maior ou marca mais escura.
  • Texto de espaço reservado é frequentemente de baixo contraste para “dicas”, a WCAG ainda se aplica se os usuários precisarem ler o espaço reservado.
  • Estado desativado: a WCAG 2.2 exige 3:1 para texto desativado em relação ao fundo do controle, a menos que o estado em si seja comunicado por outro meio.

O que a WCAG não diz

  • A WCAG 2.x usa uma fórmula de 1988. O APCA moderno (algoritmo de contraste perceptual avançado) reflete melhor a legibilidade percebida, mas ainda não é a base legal. Aumente os números ligeiramente além dos mínimos da WCAG para lidar com APCA e casos extremos.
  • O contraste não é a única dimensão de acessibilidade. Uma razão de 21:1 não significa nada se a fonte for 9px, a altura da linha for apertada ou a cor do significado for vermelho-verde.

Melhorando um par reprovado

  • Primeiro plano mais claro sobre fundo escuro, ou primeiro plano mais escuro sobre claro.
  • Aumente o tamanho ou peso da fonte, o limite de texto grande é menor.
  • Adicione um fundo atrás do texto sobre imagens (sobreposição, gradiente).
  • Nunca corrija o contraste desbotando para um cinza que ainda reprova, empurre até atingir AA.

Verifique novamente após cada ajuste, a ferramenta recalcula a razão em tempo real e uma pequena mudança de clareza pode inverter o veredito rapidamente.

Perguntas frequentes

AA é a base legal na maioria das jurisdições (Seção 508 EUA, EN 301 549 UE) e o que a maioria das ferramentas de auditoria sinaliza. AAA é aspiracional, exigido apenas para contextos específicos de acessibilidade (conteúdo educacional para usuários com baixa visão). Almeje AA e trate AAA como um bônus.

Não, ele aceita apenas cores hex opacas, de 3 ou 6 dígitos. Converta RGB ou HSL para hex primeiro, ou use o seletor de cores, que sempre produz hex.

A WCAG 2.1 SC 1.4.11 exige 3:1 de contraste para componentes de UI não textuais e objetos gráficos. Isso se aplica a indicadores de foco, bordas de entrada, botões apenas com ícones e estados (hover, ativo). Verifique tanto os estados padrão quanto os de foco.

Teste cada modo separadamente, as razões de contraste em temas claros e escuros são independentes. Muitas paletas que passam no modo claro reprovam no modo escuro na mesma clareza relativa.

Ferramentas relacionadas

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Ferramenta disponível em outros idiomas