Pular para o conteúdo
SPCXTools

Verificador de Contraste de Cores

Verifique se o seu texto está legível — e obtenha a cor mais próxima que passa na WCAG.

Roda localmente — os arquivos não saem do seu dispositivo

Carregando ferramenta…

Como usar: Verificador de Contraste de Cores

  1. 1Insira a cor do texto e a cor de fundo em HEX, RGB, HSL ou pelo nome da cor, ou escolha-as usando os seletores de cores.
  2. 2Veja a taxa de contraste e os resultados de aprovação/reprovação para WCAG AA e AAA.
  3. 3Confira a visualização em tempo real com texto grande, normal e pequeno.
  4. 4Se reprovar, clique em uma cor sugerida para usar o tom mais próximo que passa no teste.

Garanta que todos possam ler seu texto

Texto cinza-claro no branco, texto branco em um botão pastel ou links azuis em um fundo escuro podem parecer elegantes em um arquivo de design, mas ser ilegíveis para usuários reais. Este verificador de contraste mede a taxa de contraste entre qualquer cor de texto e fundo e informa instantaneamente se atende às Diretrizes de Acessibilidade para Conteúdo Web (WCAG) nos níveis AA e AAA — e, caso não atenda, sugere a cor mais próxima que atenda.

Recursos

  • Taxa de contraste de 1:1 a 21:1.
  • Resultados WCAG 2 AA e AAA para texto normal, texto grande e componentes de UI.
  • Qualquer formato de cor: HEX, RGB, HSL ou nomes de cores CSS.
  • Pré-visualização em tempo real com título, corpo de texto e texto pequeno.
  • Sugestões de cores acessíveis que mantêm o seu matiz.
  • Botão de inverter para testar versões de claro sobre escuro.

Requisitos da WCAG em resumo

Conteúdo AA AAA
Texto normal 4.5:1 7:1
Texto grande (≥ 24 px, ou ≥ 19 px em negrito) 3:1 4.5:1
Componentes de UI e gráficos 3:1 —
Logotipos e texto decorativo Sem requisito Sem requisito

Combinações comuns

Texto Fundo Taxa Texto normal AA
#000000 #FFFFFF 21:1 Aprovado
#767676 #FFFFFF 4.54:1 Aprovado (cinza mais claro aceito)
#999999 #FFFFFF 2.85:1 Reprovado
#FFFFFF #0EA5E9 2.77:1 Reprovado
#FFFFFF #0369A1 5.93:1 Aprovado

Ferramentas relacionadas

Converta cores entre formatos com o Conversor de Cores, crie uma paleta completa com o Gerador de Paleta de Cores ou selecione cores exatas de uma captura de tela com o Seletor de Cores de Imagem.

Perguntas frequentes

De qual taxa de contraste eu preciso?
O nível AA da WCAG 2, padrão comum na indústria e na legislação, exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande (cerca de 24 px normal ou 19 px em negrito). O nível AAA exige 7:1 e 4.5:1. Ícones, bordas de campos e outros elementos gráficos essenciais precisam de pelo menos 3:1.
Como a taxa de contraste é calculada?
A luminância relativa de cada cor é calculada a partir de seus valores de vermelho, verde e azul; em seguida, a taxa é (mais clara + 0.05) ÷ (mais escura + 0.05). Ela varia de 1:1 (cores idênticas) a 21:1 (preto no branco).
Como as cores sugeridas são escolhidas?
A ferramenta mantém o matiz e a saturação da cor do seu texto e altera apenas a luminosidade, passo a passo, até atingir a taxa desejada. O resultado fica o mais próximo possível da sua cor original.
Por que o contraste é importante?
Cerca de um em cada doze homens tem alguma forma de deficiência de visão de cores, muitas pessoas têm baixa visão e todos têm dificuldade com baixo contraste na tela do celular sob a luz do sol. Um bom contraste torna seu texto legível para todos, além de ser exigido por leis de acessibilidade em muitos países.
A ferramenta considera transparência?
Não. As cores são tratadas como opacas. Se o seu texto for semitransparente, verifique a cor mesclada visível — pegue-a de uma captura de tela usando o Seletor de Cores de Imagem.

Ferramentas relacionadas

Conversor de CoresConverta qualquer cor entre HEX, RGB, HSL, HSV e CMYK e verifique seu contraste.Gerador de Paleta de CoresEscolha uma cor e obtenha uma paleta harmoniosa de cinco cores baseada na teoria das cores.Seletor de Cores de ImagemClique em qualquer lugar de uma imagem para obter sua cor exata em HEX, RGB e HSL — além da sua paleta de cores principal.Gerador de Gradiente CSSCrie um fundo gradiente visualmente e copie o CSS — linear, radial ou cônico.Gerador de Box ShadowAjuste sombras suaves, nítidas, em camadas ou internas com visualização em tempo real e copie o CSS.Simulador de DaltonismoVisualize suas imagens através dos olhos de alguém com deficiência de visão de cores para garantir que seus designs sejam acessíveis.