Verificador de Contraste de Cores
A razão de contraste do WCAG entre duas cores, e se passa em AA ou AAA no tamanho de texto que está a usar.
Resultados
O que faz esta ferramenta
Se um texto se lê ou não, não é uma questão de gosto; tem um número, e o número está escrito na lei de acessibilidade de um número crescente de países. A razão de contraste do WCAG vai de 1 para 1, com duas cores iguais, até 21 para 1, com preto sobre branco. Ponha as suas duas cores e o tamanho a que as vai usar, e esta página dá-lhe a razão e o veredicto simples — incluindo se o tamanho conta como texto grande, o que muda o limiar.
Fórmula
WCAG 2: luminância = 0,2126 R + 0,7152 G + 0,0722 B depois da rampa; razão = (clara + 0,05) ÷ (escura + 0,05)
Variáveis
| Símbolo | Significado | Unidade |
|---|---|---|
foreground | Cor do texto | — |
background | Cor de fundo | — |
font_size | Tamanho do texto | px |
bold | Negrito | — |
OUT | Razão de contraste | :1 |
LV | Nível WCAG atingido | — |
AA | Passa AA | — |
A3 | Passa AAA | — |
GR | Chega para ícones e contornos | — |
LG | Conta como texto grande | — |
NE | Preciso para AA neste tamanho | :1 |
BT | Melhor cor de texto simples neste fundo | — |
Exemplo resolvido
- Cor do texto#5a5f6b
- Cor de fundo#fdfcf8
- Tamanho do texto16 px
- Negritono
- Razão de contraste6,23 :1
- Nível WCAG atingidoAA — a exigência habitual
- Passa AASim
- Passa AAANão
- Chega para ícones e contornosSim
- Conta como texto grandeNão
- Preciso para AA neste tamanho4,5 :1
- Melhor cor de texto simples neste fundo#000000
Limitações
- Para trabalhos que tenham de cumprir uma norma ou ser assinados, confirme o resultado com o regulamento aplicável e peça a revisão de um engenheiro qualificado.
Perguntas frequentes
Porque é que o tamanho do texto muda a resposta?
Porque as letras grandes precisam de menos contraste para continuarem legíveis — há simplesmente mais traço para o olho apanhar. O WCAG traça a linha nos 18 pontos, que são 24 píxeis, ou nos 14 pontos (cerca de 18,7 píxeis) quando o texto é negrito. Acima dessa linha o AA pede 3 para 1 em vez de 4,5, e o AAA pede 4,5 em vez de 7. O mesmo par de cores pode assim passar num título e chumbar no parágrafo por baixo dele.
Porque é que cinzento sobre branco fica tantas vezes quase a passar?
Porque o cinzento médio a que os designers chegam por instinto — #777 — dá 4,48 contra branco, e o limiar é 4,5. Fica bem num bom ecrã numa sala sossegada e desaparece num telemóvel à luz do dia, que é exactamente a situação que o limiar existe para proteger. Escurecer um passo, para #767676, é a correcção habitual e não custa nada visualmente.