1:1 to 21:1 · AA · AAA
Verificador de contraste
Preto sobre branco tem uma taxa de contraste WCAG de 21:1, a mais alta possível, e branco sobre #0060fd tem 5.13:1. Digite uma cor de texto e um fundo para verificar as suas.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
A taxa e as cinco verificações se atualizam enquanto você digita. A taxa é cortada em duas casas decimais, nunca arredondada para cima, então 4.499 aparece como 4.49:1 e não passa na verificação de 4.5:1.
Scanned by 
NortonTM Safe Web
Resumo
- Preço
- Sem custo
- Conta
- Não é necessária
- Envio
- Não se aplica — você digita cores, nada é enviado a lugar nenhum
- Fórmula
- (luminância mais clara + 0.05) ÷ (luminância mais escura + 0.05)
- Limites
- AA 4.5:1 texto normal e 3:1 texto grande; AAA 7:1 normal e 4.5:1 texto grande; 3:1 para partes da interface
- Padrão
- Definições WCAG 2.2 de luminância relativa e taxa de contraste
Taxas de contraste de pares conhecidos
Estas linhas foram geradas pelo mesmo código do verificador. Um visto significa que o par atende ao requisito; uma cruz significa que não atende.
| Cor do texto | Fundo | Taxa | AA normal | AA grande | AAA normal | AAA grande | Partes da interface |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Verificação | Taxa mínima |
|---|---|
| AA, texto normal | 4.5:1 |
| AA, texto grande | 3:1 |
| AAA, texto normal | 7:1 |
| AAA, texto grande | 4.5:1 |
| AA, partes da interface e gráficos | 3:1 |
Como verificar um par de cores
Digite as duas cores
Digite a cor do texto e a cor do fundo em qualquer notação CSS, ou use os seletores. O botão de trocar inverte as duas, o que é útil para texto claro sobre fundo escuro.
Leia a taxa
A taxa vai de 1:1 (cores idênticas) a 21:1 (preto sobre branco). A amostra abaixo dos campos mostra o par em 16 px e em 24 px, para que você julgue o resultado com os próprios olhos.
Veja as cinco verificações
Cada bloco indica Aprovado ou Reprovado para um requisito WCAG: AA e AAA para texto normal, AA e AAA para texto grande, e AA para partes de uma interface. Se o texto normal não passar no AA, a página sugere a cor de texto mais próxima que passa.
Como a taxa de contraste é calculada
O WCAG mede o contraste pela luminância relativa, o brilho de uma cor de 0 (preto) a 1 (branco). Cada canal de vermelho, verde e azul é dividido por 255; um valor até 0.04045 é dividido por 12.92, e um valor maior é elevado a uma potência: (valor + 0.055) dividido por 1.055, e depois elevado a 2.4. A luminância é então 0.2126 vezes o vermelho mais 0.7152 vezes o verde mais 0.0722 vezes o azul, o que reflete a intensidade com que o olho responde a cada um. A taxa de contraste é a luminância mais clara mais 0.05, dividida pela luminância mais escura mais 0.05.
O WCAG 2 pede pelo menos 4.5:1 para texto normal e 3:1 para texto grande no nível AA, e 7:1 e 4.5:1 no nível AAA. Texto grande tem pelo menos 18 pontos, que são 24 pixels CSS, ou pelo menos 14 pontos em negrito, cerca de 18.66 pixels. O critério de sucesso 1.4.11 pede 3:1 para as partes de uma interface e os gráficos que o leitor precisa ver, como a borda de um campo ou a linha de um gráfico. A taxa é comparada com cada limite sem arredondamento. Se uma cor tiver transparência, um fundo transparente é colocado sobre o branco e uma cor de texto transparente sobre o fundo antes da medição. Esta página implementa apenas o WCAG 2.x; ela não calcula o APCA, que é discutido para uma versão futura das diretrizes.
Perguntas sobre contraste
Que taxa de contraste o WCAG exige para texto?
No nível AA, o texto normal precisa de pelo menos 4.5:1 e o texto grande de pelo menos 3:1. No nível AAA os valores são 7:1 para texto normal e 4.5:1 para texto grande. A taxa é medida entre a cor do texto e a cor diretamente atrás dele.
O que conta como texto grande?
O WCAG define texto grande como pelo menos 18 pontos, que são 24 pixels CSS, ou pelo menos 14 pontos em negrito, que são cerca de 18.66 pixels CSS. Qualquer coisa menor conta como texto normal e precisa da taxa mais alta.
Qual é o cinza mais claro que passa no AA sobre branco?
#767676 sobre branco tem uma taxa de 4.54:1 e passa na verificação de 4.5:1 para texto normal. O cinza seguinte, mais claro, #777777, tem 4.47:1 e não passa. Para 7:1 (AAA), o cinza mais claro é #595959, que tem 7.00:1.
Por que 4.49 não passa se parece 4.5?
As verificações comparam a taxa exata com o limite. Uma taxa de 4.499 está abaixo de 4.5, então não passa, e a página a imprime como 4.49:1 em vez de arredondar para cima. Vermelho puro sobre branco é um exemplo real: 3.99:1 não passa na verificação de 4.5:1 para texto normal, embora esteja perto.
Que contraste ícones, bordas e campos de formulário precisam?
O critério de sucesso 1.4.11 Contraste de elementos não textuais, incluído no WCAG 2.1, pede pelo menos 3:1 entre as partes de uma interface ou um gráfico que o leitor precisa ver, como a borda de um campo, um anel de foco ou a linha de um gráfico, e as cores ao lado delas. Controles desativados e gráficos puramente decorativos são isentos.
Uma taxa aprovada torna uma página acessível?
Não. O contraste é um requisito entre muitos. Tamanho e peso da fonte, espaçamento entre linhas, significado transmitido só pela cor, visibilidade do foco, texto sobre imagens e gradientes, e como pessoas com diferentes tipos de visão de cores enxergam uma página também importam. Use este resultado como uma informação entre outras e teste a página com conteúdo real.