Contrast Checker
WCAG contrast check
WCAG contrast check Executa localmente no seu navegador
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
O Verificador de Contraste mede a taxa de contraste entre uma cor de texto e uma cor de fundo usando a fórmula de luminância WCAG e informa quais níveis de acessibilidade esse par passa. Esta é a verificação que decide se o corpo do texto é realmente legível: uma proporção de 4,5 para 1 é o mínimo para texto normal, 3 para 1 para texto grande e para limites de interface, e 7 para 1 para conformidade aprimorada. Avaliar o contraste a olho nu não é confiável, porque o olho é muito mais sensível ao verde do que ao azul, e é por isso que um amarelo que parece brilhante e um azul que parece escuro podem pontuar quase de forma idêntica.
Where people use the
- Verificar se o corpo do texto em um fundo colorido atende ao AA.
- Escolher entre texto em preto e branco para a cor do botão.
- Auditando uma paleta existente antes de um redesenho.
- Documentar uma decisão de acessibilidade em um ticket.
How to use the
- 1
Defina a cor do texto
Digite um valor hexadecimal, como 1a1a1a, ou use o seletor de cores. A abreviatura de três dígitos, como f0a, é aceita.
- 2
Defina a cor de fundo
O mesmo para o fundo. A visualização é atualizada conforme você altera qualquer uma delas.
- 3
Leia a proporção
O número vai de 1:1, cores idênticas, até 21:1, preto sobre branco. Maior significa mais legível.
- 4
Verifique o nível que você precisa
O corpo do texto normal precisa de 4,5 para 1 para AA e 7 para 1 para AAA. Os títulos em negrito de 18 ou 14 pontos e as bordas da interface do usuário precisam de 3 para 1.
- 5
Veja a prévia e também o número
Um par pode passar no papel e ainda assim parecer ruim em um tamanho pequeno ou em uma tela de baixa qualidade. Se parece difícil de ler, é difícil de ler.
Dicas e práticas recomendadas
- Escureça uma cor para o texto, mantenha a versão mais clara para preenchimentos.
- Verifique o menor tamanho em que o texto será realmente usado.
- Bordas e ícones também precisam de 3 para 1, não apenas texto.
Perguntas frequentes
Qual é a fórmula da taxa de contraste?
Cada cor é convertida em luminância relativa usando os pesos padrão, 0,2126 para vermelho, 0,7152 para verde e 0,0722 para azul, após correção gama. A proporção é então a luminância mais clara mais 0,05 dividida pela luminância mais escura mais 0,05. O resultado varia de 1:1 a 21:1.
Por que a cor da minha marca falha?
Porque a maioria das cores saturadas de tons médios não pode atingir 4,5 para 1 em relação ao branco. A solução usual é escurecer a cor para uso de texto, mantendo a versão mais clara para preenchimentos grandes, que é exatamente o que a maioria dos sistemas de design faz com sua cor primária.
Passar a proporção é suficiente para ser acessível?
É necessário, mas não suficiente. Texto muito grande ou muito pequeno, fontes finas, texto sobre imagens e certas formas de deficiência na visão de cores afetam a legibilidade além da proporção. Teste com usuários reais sempre que puder.
A direção importa, claro no escuro ou escuro no claro?
Não. A proporção é simétrica, então preto sobre branco e branco sobre preto pontuam 21:1. O que difere na prática é o brilho e o peso percebido, que é um julgamento de design e não de conformidade.
O que conta como texto grande?
Nos termos das WCAG, 18pt ou maior, ou 14pt ou maior quando em negrito. Em pixels CSS, isso equivale a aproximadamente 24px ou cerca de 18,66px quando em negrito.
Onde acontece o cálculo?
Totalmente no seu navegador. Nada é carregado, então você pode verificar as cores em uma diretriz da marca que ainda não é pública.