Contrast Checker
Check the contrast ratio between two colors for WCAG accessibility compliance.
Preview
Large Text (18pt+)
Heading Example
This is an example of large text content to demonstrate contrast.
Normal Text (under 18pt)
Regular paragraph text that users would typically read.
Smaller text that might be used for secondary content.
Verificador de Contraste de Cores
Garante que os teus designs web cumprem os padrões de acessibilidade com o nosso verificador profissional de contraste. Testa combinações de cores contra as diretrizes WCAG 2.1 para conformidade AA e AAA.
Porquê Usar o Nosso Verificador de Contraste?
O nosso verificador de contraste de cores é uma ferramenta essencial para designers e developers web que querem criar experiências digitais acessíveis e inclusivas. Esta poderosa ferramenta ajuda-te a garantir que as tuas combinações de cores cumprem os rigorosos padrões definidos pelas Diretrizes de Acessibilidade para Conteúdo Web (WCAG), tornando o teu conteúdo utilizável por pessoas com diversas deficiências visuais.
O cumprimento da acessibilidade não se trata apenas de seguir regulamentos—trata-se de alcançar o público mais vasto possível. Aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres em todo o mundo tem alguma forma de deficiência na visão de cores, e muitas outras beneficiam do alto contraste devido à idade ou à visualização em condições de iluminação desafiantes.
A nossa ferramenta fornece feedback instantâneo sobre as tuas escolhas de cor, mostrando exatamente que combinações funcionam e quais não funcionam, ajudando-te a tomar decisões informadas sobre as cores do teu sistema de design e interface de utilizador.
Benefícios Principais
- Conformidade Legal: Cumpre requisitos de acessibilidade como ADA, Secção 508 e padrões WCAG
- Melhor Experiência de Utilizador: Cria interfaces fáceis de ler e navegar para todos os utilizadores
- Design Profissional: Garante que as tuas escolhas de cor funcionam bem em todos os contextos e condições de iluminação
- Poupança de Tempo: Obtém resultados instantâneos sem cálculos manuais ou suposições
Compreender os Padrões WCAG
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem rácios de contraste específicos que garantem que o texto permanece legível:
Nível AA (Conformidade Mínima)
Rácio 4.5:1 para texto normal (menos de 18pt ou 14pt negrito)
Rácio 3:1 para texto grande (18pt+ ou 14pt+ negrito)
Nível AAA (Conformidade Reforçada)
Rácio 7:1 para texto normal
Rácio 4.5:1 para texto grande
Estes rácios garantem que o texto permanece legível para utilizadores com deficiências na visão de cores, baixa visão, ou que visualizam conteúdo em condições de iluminação deficientes.
Quem Deve Usar Esta Ferramenta?
Designers UI/UX
Criam interfaces acessíveis e sistemas de design
Developers Web
Implementam esquemas de cores acessíveis em código
Criadores de Conteúdo
Garantem a legibilidade do texto em todos os dispositivos
WCAG AA vs AAA, explicado
O contraste de cor é a falha de acessibilidade mais comum na web — e uma das mais fáceis de corrigir. Isto é o que os números realmente significam e como os cumprir sempre.
AA (mínimo)
4.5:1 para texto normal · 3:1 para texto grande (18pt / 14pt negrito ou maior) e componentes de interface como botões, inputs e ícones.
AAA (reforçado)
7:1 para texto normal · 4.5:1 para texto grande. Requisito habitual no setor público, saúde e guias de marca exigentes.
Como se calcula o contraste
É o rácio entre a luminância relativa de duas cores, de 1:1 (branco sobre branco) a 21:1 (preto sobre branco):
(L1 + 0.05) / (L2 + 0.05) A luminância relativa pondera cada canal RGB após a correção gama. Por isso duas cores que parecem diferentes em saturação podem falhar igualmente: a saturação não importa, a luminância sim.
Falhas comuns e soluções
Texto cinzento sobre branco
#999999 sobre branco dá 2.8:1 — reprova AA. Escurece para #767676 (4.54:1) para texto de corpo conforme.
Texto branco sobre cores de marca
Branco sobre âmbar #F59E0B dá 2.2:1. Escurece o fundo, muda para texto escuro ou reserva a combinação para elementos decorativos.
Placeholders pouco visíveis
Placeholders cinzento-claro costumam falhar — não estão isentos de WCAG, e uma pista invisível é também um problema de usabilidade.
Links coloridos em texto colorido
Um link dentro do texto deve atingir 4.5:1 contra o fundo e distinguir-se por algo mais do que a cor — sublinha-o.
| Tipo de texto | AA | AAA |
|---|---|---|
| Texto de corpo (< 18pt) | 4.5:1 | 7:1 |
| Texto grande (≥ 18pt / 14pt negrito) | 3:1 | 4.5:1 |
| Componentes UI e gráficos | 3:1 | — |
Usa o verificador acima para testar qualquer par texto/fundo em tempo real. Cor acessível não é cor aborrecida — é verificar relações de luminância desde o início.