Contrast Checker: verifique o contraste de cores segundo as WCAG
O Contrast Checker verifica o contraste das suas cores: calcula a taxa de contraste segundo as WCAG entre texto e fundo (por exemplo, 4.48:1 para #777777 sobre branco), mostra se a combinação passa nos níveis AA e AAA e, caso não passe, sugere a cor mais próxima que atinge AA. Grátis, sem cadastro e diretamente no seu navegador.
Criado por Justin Schuessler
Já verificou o contraste? Coloque seu site no ar com uma hospedagem web rápida e confiável.
Relação de contraste
21.00:1
Texto normal
A rápida raposa castanha pula por cima do cão preguiçoso.
Texto grande
A raposa rápida
Continuar com estas cores: Verificar a cor de primeiro plano no simulador de daltonismo · Gerar esquema de cores a partir da cor de primeiro plano
Desenvolvido com foco na privacidade. Suas entradas são processadas no navegador e não são enviadas a um servidor.
Exemplo de resultado
Como é o resultado no verificador de contraste
Você informa as cores do texto e do fundo, e a ferramenta calcula a relação de contraste, verifica todos os níveis WCAG e, se não atender aos requisitos, sugere a cor mais próxima que atinja AA. As cores abaixo são um exemplo; seu resultado depende das suas cores.
Exemplo · #777777 sobre #ffffff
Não passou no nível AA para texto normal- Relação de contraste
- 4.48:1
- Valor mínimo para AA em texto normal: 4.5:1.
- Níveis aprovados
- 2/5
- Aprovado: AA – Texto grande (3:1), Componentes de UI e gráficos (3:1)
- Cor de primeiro plano sugerida
- #767676
- Atinge 4.54:1 e, portanto, o nível AA para texto normal, com a menor alteração de luminosidade.
Como interpretar o resultado
Cada nível WCAG tem um valor mínimo fixo; o exemplo com 4.48:1 é verificado separadamente em cada nível.
| Nível WCAG | Exemplo |
|---|---|
| AA – Texto normal (4.5:1) | Reprovado |
| AA – Texto grande (3:1) | Aprovado |
| AAA – Texto normal (7:1) | Reprovado |
| AAA – Texto grande (4.5:1) | Reprovado |
| Componentes de UI e gráficos (3:1) | Aprovado |
Funções
Mais que uma calculadora de contraste: o que o Contrast Checker verifica
Um contraste de cores suficiente torna textos e elementos de interface legíveis para pessoas com baixa visão e em condições de pouca luz. O verificador de contraste mostra se sua combinação atende aos limites das WCAG e ajuda você a ajustá-la.
Cinco verificações das WCAG de uma só vez
Para cada combinação de cores, a ferramenta mostra se o texto normal e o texto grande passam nos níveis AA e AAA e se componentes de interface e elementos gráficos atingem o contraste mínimo de 3:1.
Sugestão de cor com um clique
Se o contraste não atingir o nível AA para texto normal, a ferramenta sugere a cor mais próxima que atinge 4.5:1. Ela altera apenas o brilho da cor do texto ou do fundo, conforme a que exigir menos ajuste.
Hexadecimal, RGB e seletor de cores
Digite as cores como valores hexadecimais com ou sem #, com três ou seis dígitos, como rgb() ou rgba(), ou como valores simples, como 34, 34, 34. Você também pode escolhê-las no seletor de cores.
Prévia em tempo real para texto normal e grande
Dois cartões de prévia mostram exemplos de texto normal e grande nas cores que você escolheu.
Link compartilhável
As cores atuais aparecem automaticamente na URL. Ao copiar o link, você pode abrir a mesma combinação, o que facilita a colaboração com a equipe.
Cálculo no navegador
A taxa de contraste é calculada diretamente no seu navegador. Suas cores não são enviadas a um servidor.
Limites das WCAG
Qual taxa de contraste você precisa segundo as WCAG?
O Contrast Checker verifica suas cores em relação a estes cinco valores mínimos. O nível AA é o requisito mínimo usual; o AAA é mais rigoroso e oferece legibilidade ainda maior.
| Nível WCAG | Contraste mínimo | Aplica-se a |
|---|---|---|
| AA – Texto normal (4.5:1) | 4.5:1 | Texto corrido e rótulos abaixo do tamanho mínimo para texto grande |
| AA – Texto grande (3:1) | 3:1 | Texto a partir de 24 px (18 pt) ou, em negrito, a partir de 18,66 px (14 pt) |
| AAA – Texto normal (7:1) | 7:1 | Texto corrido no nível mais rigoroso e opcional |
| AAA – Texto grande (4.5:1) | 4.5:1 | Texto grande no nível mais rigoroso e opcional |
| Componentes de UI e gráficos (3:1) | 3:1 | Bordas de campos de entrada, ícones e outros elementos gráficos (WCAG 1.4.11) |
Quer verificar se suas cores continuam distinguíveis para pessoas com deficiência na visão de cores? O simulador de daltonismo mostra como uma cor aparece em diferentes tipos de daltonismo. Ir para o simulador de daltonismo
Como funciona
Verifique o contraste de cores em 6 etapas
Da cor do texto e do fundo a uma combinação acessível que você pode copiar ou compartilhar.
Passo 1
Inserir cor do texto
Digite a cor do texto no campo “Primeiro plano (texto)” como valor hexadecimal ou RGB, ou escolha-a no seletor de cores.
Passo 2
Inserir cor de fundo
Insira a cor de fundo da mesma forma no campo “Fundo”. Use o botão de seta entre os campos para trocar as cores do primeiro plano e do fundo.
Passo 3
Consultar taxa de contraste
Confira a taxa de contraste e os cinco indicadores para AA e AAA em texto normal e grande, além de componentes de interface e elementos gráficos. Uma marca de seleção indica que passou; um X, que não passou.
Passo 4
Verificar prévia
Veja na prévia como os exemplos de texto normal e grande aparecem com sua combinação de cores.
Passo 5
Aplicar sugestão de cor
Se a combinação não atingir AA para texto normal, clique em “Sugerir a cor mais próxima que passa” e depois em “Aplicar”.
Passo 6
Copiar ou compartilhar cores
Copie o valor hexadecimal com o botão ao lado do campo ou compartilhe a URL da barra de endereço, que contém as duas cores.
Descobrir mais
Mais ferramentas de cores
Simulador de daltonismo
Simule em tempo real como as paletas de cores e suas imagens são percebidas em casos de protanopia, deuteranopia, tritanopia e acromatopsia — tudo processado no navegador.
Criado por Justin Schuessler
Gerador de esquemas de cores
Crie em tempo real esquemas de cores complementares, análogos, triádicos e outros a partir de uma cor base — nada é salvo ou transmitido.
Criado por Justin Schuessler
Seletor de cores
Converta cores em tempo real entre HEX, RGB, HSL, HSV e CMYK, encontre a cor CSS com nome mais próxima e verifique o contraste WCAG com preto/branco — tudo no navegador.
Criado por Justin Schuessler
Seletor de cores em imagem
Identifique o código de uma cor em uma imagem: conta-gotas com lupa, HEX, RGB e HSL, paleta de cores da imagem e indicação de contraste. A imagem permanece no navegador.
Criado por Dimitri Heissler
FAQ
Perguntas frequentes sobre o Contrast Checker
Respostas breves sobre contraste de cores, WCAG e esta ferramenta.
O Contrast Checker é grátis e pode ser usado sem cadastro. A taxa de contraste é calculada diretamente no seu navegador; suas cores não são enviadas a um servidor.
Seguindo a fórmula das WCAG 2.x, a ferramenta calcula primeiro a luminância relativa (L) das duas cores. Depois, divide L da cor mais clara mais 0.05 por L da cor mais escura mais 0.05. O resultado varia de 1:1 (cores idênticas) a 21:1 (preto sobre branco), independentemente da ordem das cores. Quanto maior o valor, mais fácil é ler o texto sobre o fundo.
No nível AA, o texto normal precisa de pelo menos 4.5:1 de contraste, e o texto grande, de 3:1. O nível AAA, mais rigoroso, exige 7:1 para texto normal e 4.5:1 para texto grande. Componentes de interface e elementos gráficos, como bordas de campos de entrada ou ícones, precisam de 3:1. A maioria das exigências legais se baseia no nível AA; o AAA é um nível mais rigoroso e opcional.
O texto é considerado grande a partir de 18pt (24px), ou de 14pt (18.66px) se também estiver a negrito. Para texto grande, aplicam-se requisitos mínimos de contraste inferiores (3:1 em vez de 4.5:1 para AA), pois continua legível mesmo com menos contraste.
Valores hexadecimais com ou sem #, com três ou seis dígitos (#fff ou #ffffff), rgb() e rgba(), além de valores simples como 34, 34, 34. Você também pode escolher cada cor no seletor de cores. Em rgba(), o valor alfa é ignorado: a ferramenta calcula o contraste usando a cor opaca. Uma entrada inválida fica marcada até que você corrija o valor.
Se sua combinação não atingir AA para texto normal (4.5:1), a ferramenta sugere, com um clique, a cor mais próxima que alcança esse valor. Para isso, altera apenas o brilho da cor do texto ou do fundo, conforme a que exigir menos ajuste. Clique em “Aplicar” para usar a sugestão. Exemplo: #777777 sobre #ffffff chega a 4.48:1; a sugestão #767676 atinge 4.54:1.
Sim. O Contrast Checker adiciona automaticamente as cores do primeiro plano e do fundo à URL. Ao copiar o link da barra de endereço, você pode abrir a mesma combinação. Os links abaixo da prévia também permitem enviar a cor do primeiro plano ao simulador de daltonismo ou ao gerador de esquemas de cores.
Leis como o European Accessibility Act (EAA) e suas implementações nacionais, ou a ADA nos EUA, exigem um nível mínimo de acessibilidade para muitos sites e aplicativos e geralmente fazem referência às WCAG. O contraste suficiente do texto é um dos critérios mais verificados. Esta ferramenta não substitui a orientação jurídica, mas ajuda você a verificar os valores técnicos de contraste das WCAG.
Mais alguma pergunta?
Contatar o suporteSeu próximo projeto precisa de um servidor confiável por trás
Um VPS da ZAP-Hosting mantém seu site ou aplicação online de forma confiável.
Sem configuração. Sem riscos. Online em segundos.
Procurando mais ferramentas? Ver todas as ferramentas de imagem e design
Fonte preferida no Google
