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

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Contador de FPS

Meça o FPS do navegador com requestAnimationFrame: suavização, taxa de quadros mínima e máxima, limite de alerta e gráfico opcional. Roda localmente, sem upload nem API.

Conversor de Binário para ASCII

Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa, decodificado 8 bits por vez.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.