Pular para o conteúdo principal
ImageColorPix

Verificador de Contraste

Confira se sua combinação de texto e fundo é acessível. Escolha cores à mão com as janelas de cor, use os presets Branco / Preto, ou envie uma imagem e clique em qualquer pixel. Notas WCAG AA e AAA na hora.

Cor do texto

rgb(59, 130, 246)

Ver detalhes →

Cor de fundo

rgb(255, 255, 255)

Ver detalhes →

Taxa de contraste

5.20 : 1

Bom contraste

A+A

Notas WCAG

Texto normal AA (≥ 4.5)✓ Passou
Texto grande AA (≥ 3)✓ Passou
Texto normal AAA (≥ 7)✕ Falhou
Texto grande AAA (≥ 4.5)✓ Passou

A rápida raposa marrom salta sobre o cão preguiçoso, texto normal 16px.

Texto grande 24px em negrito

O que é checagem de contraste?

Texto legível para todos

Proporção de contraste mede como o texto se destaca do fundo, de 1:1 (mesma cor) a 21:1 (preto no branco). Nosso verificador usa a fórmula WCAG de luminância relativa, o mesmo padrão que auditores e design systems usam.

Busque pelo menos 4.5:1 para texto normal (AA), 3:1 para texto grande, e 7:1 para AAA. Teste suas cores de marca, estilos de botão, ou qualquer texto sobre imagem antes de publicar.

Como usar

01

Escolha as cores

Digite o HEX, use a janela de cor nativa, ou clique nos presets Branco / Preto / Aleatório. Troque quando quiser.

02

Ou pegue da imagem

Clique no ícone de imagem, envie qualquer JPG/PNG/WebP, depois clique na imagem ou na paleta extraída. Alterne o alvo Texto / Fundo.

03

Publique UI acessível

Leia a proporção, as notas AA/AAA, e a prévia ao vivo.

04

Compartilhe e exporte

Copie a URL (?text=…&bg=…) para compartilhar o par exato, Copie o CSS para handoff, ou Baixe o relatório TXT.

Exemplos reais

Texto base 16px: #767676 em #FFFFFF (4.54:1 passa) vs #999999 (2.85:1 falha)

A checagem real número 1. Texto cinza secundário parece limpo mas cinzas claros falham. Teste ambos os pares acima: escureça o texto apagado para #767676 ou #595959 para passar AA. Texto longo pequeno precisa dos 4.5:1 completos.

Rótulos de botão: branco no azul

Checagem de UI mais feita. Azuis vivos (cerca de 3.9:1) passam só em texto grande. Escureça o preenchimento para cerca de 5 a 6:1 em rótulos de tamanho normal. Teste os estados normal, hover e desativado à parte.

Links dentro do texto

Usuários colam o azul de link e o fundo do texto para ver se links só pela cor batem 4.5:1. Se não, escureça o link ou sublinhe (só a cor não pode ser a única pista).

Campos, bordas e letra miúda 13px

Bordas de campos, checkboxes e avisos de 13px é onde o contraste morre. Bordas/UI precisam de 3:1. Legendas de 13px precisam de 4.5:1 como o texto base. Cole aqui seu cinza de borda e o fundo do campo.

Títulos 24 a 32px e gráficos

Texto grande (24px ou mais, ou 19px em negrito ou mais) só precisa de 3:1, igual a ícones, traços de gráfico e anéis de foco. Teste títulos, ícones e linhas de dados como pares à parte do texto base.

Texto sobre fotos e gradientes

Caso top com imagem: envie o hero, clique nos pixels mais claros e mais escuros atrás do título. Se algum falhar, adicione véu ou sombra de texto e teste de novo a cor misturada. Nunca teste só uma parada do gradiente.

Perguntas frequentes

1Qual proporção de contraste WCAG é exigida: AA ou AAA?
A dúvida mais comum. AA: 4.5:1 texto normal, 3:1 texto grande, a meta legal e prática da maioria dos sites. AAA: 7:1 normal, 4.5:1 grande, para conteúdo altamente acessível. A maioria publica AA. Damos as quatro notas para você ver ambos.
2Tamanho e peso da fonte mudam a exigência?
Sim, a segunda dúvida mais comum. Grande significa 24px ou mais, ou 19px ou mais em negrito (18pt / 14pt em negrito). Grande só precisa de 3:1 para AA. Teste texto base e títulos à parte: o mesmo par pode falhar no texto e passar nos títulos.
3Como corrijo uma combinação que falha sem trocar a marca?
Fluxo top dos usuários: mantenha o matiz, mude a leveza: escureça o texto ou clareie o fundo até passar do limite. Ou restrinja a cor que falha a texto grande e ícones (3:1), adicione véu ou contorno sobre imagens, ou combine com um tom escuro compatível para o texto base.
4Posso checar gradientes, imagens ou transparência?
Verificadores trabalham com pares sólidos, então usuários testam os piores pixels: envie o hero, clique nos pontos mais claros e mais escuros atrás do texto, e teste ambos. Para opacidade, tire print da UI misturada e amostre o pixel renderizado, uma sobreposição de 50% não é seu HEX puro.
5Links, botões, campos e ícones precisam de checagem?
Sim, o conjunto de UI mais testado. Botões e links precisam de proporções de texto (4.5:1 normal). Bordas de campos, checkboxes, ícones, traços de gráfico e anéis de foco precisam de 3:1 não textual contra cores vizinhas. Teste cada estado: padrão, hover, foco, desativado.
6Como uso o conta-gotas / pego da tela?
Clique no ícone de imagem, envie ou cole qualquer print, depois clique em qualquer pixel para carregar como Texto ou Fundo (alterne no topo). Clique nas amostras da paleta para variantes rápidas.
7Funciona para apps mobile e modo escuro?
A mesma matemática de luminância vale para iOS/Android e temas escuros. Usuários checam ambos os modos à parte, um par que passa no claro costuma falhar no escuro. Teste cada tema, incluindo vista sob sol forte.
8Posso compartilhar, salvar ou automatizar o resultado?
Copie a URL (?text=…&bg=…) para compartilhar o par exato, Copie o CSS para handoff, ou Baixe o relatório TXT. Usuários avançados anexam pares a docs ou testam matrizes de tokens de marca um por um.

Explore mais ferramentas de cores

Conversor de Cores

HEX RGB HSL HSV CMYK LAB

Gerador de Paletas

Harmonias aleatórias + modo imagem

Seletor de Cores de Imagem

Escolha qualquer pixel de qualquer imagem

Gerador de Gradientes

CSS linear, radial e cônico