Verificador de Contraste de Cor

Verificador de contraste de cores WCAG para cores de texto e de interface

Use este verificador de contraste de cores para comparar um primeiro plano e um plano de fundo, resolver a transparência sobre um fundo explícito e inspecionar a taxa de contraste resultante. O verificador de contraste WCAG informa os limites de texto AA e AAA, além de um resultado de par de cores de 3:1 para controles e elementos gráficos, tornando-o útil como um verificador de cores de acessibilidade durante o trabalho com interfaces.

Como verificar o contraste entre primeiro plano e plano de fundo

1. Insira as cores de primeiro plano, de fundo e da tela como HEX, RGB ou HSL. Use o canal alfa quando o primeiro plano ou o fundo for translúcido, ou converta um código HEX para RGB ou HSL primeiro se você tiver apenas um formato.
2. Revise as cores resolvidas, a proporção, os resultados para texto normal e grande e a pré-visualização do componente.
3. Escolha uma meta de 3:1, 4.5:1 ou 7:1, aplique um primeiro plano sugerido e, em seguida, copie, baixe ou compartilhe o CSS.

Limites WCAG AA, AAA, texto grande e 3:1

Use isto como um verificador de contraste AA para texto normal e grande, ou como um verificador de contraste AAA quando as metas mais altas se aplicam. O WCAG AA exige no mínimo 4.5:1 para texto normal e 3:1 para texto grande; o AAA eleva essas metas para 7:1 e 4.5:1. Texto grande geralmente significa pelo menos 18 pontos em peso regular ou 14 pontos em negrito. O resultado de contraste de 3:1 separado para primeiro plano e plano de fundo avalia apenas o par de cores testado para um controle ou gráfico; por si só, não estabelece conformidade para elementos que não são texto.

Por que cores translúcidas precisam de uma tela de pintura explícita

Uma cor translúcida não tem contraste final até que todas as camadas por trás dela sejam conhecidas. Este verificador de contraste de texto compõe primeiro a tela de pintura opaca, depois o plano de fundo e, em seguida, o primeiro plano. A proporção exibida, portanto, descreve as cores resolvidas do navegador, em vez de assumir silenciosamente o branco por trás de cada valor transparente.

Cores de alto contraste dependem do par e do contexto

O que são cores de contraste? São cores cuja diferença de luminância resolvida cria um par legível ou distinguível em um uso específico. Uma combinação de cores acessível para um componente pode falhar em outro estado, e as melhores cores de contraste não são universais: o preto pode funcionar em um fundo amarelo pálido, enquanto um cinza mais claro falha. A escolha de uma cor de contraste para um fundo amarelo ainda deve ser medida em relação ao amarelo exato, tamanho do texto, peso e estado do componente que você irá entregar.

Encontre um primeiro plano acessível mais escuro ou mais claro

Quando o par atual não atinge o alvo selecionado, o verificador busca caminhos sRGB determinísticos mais escuros e mais claros pelos valores de primeiro plano exportados mais próximos que são aprovados. Ele preserva o alfa do primeiro plano quando possível e rotula claramente uma alternativa opaca quando a transparência torna o alvo inalcançável. Para ajustar a cor de primeiro plano manualmente e ver seus tons e sombras, abra-a no seletor de cores.

Um par de cores aprovado não é uma auditoria de acessibilidade completa

Este cálculo não prova que uma página inteira está em conformidade. Tipografia real, gradientes, imagens, ícones, estados de interação, indicadores de foco, controles desabilitados, limites e cores ao redor ainda precisam de inspeção na interface renderizada. Use o resultado como uma medição precisa dentro de uma revisão de acessibilidade mais ampla.

Verificação de contraste privada no seu navegador

O parsing, a composição alfa, o cálculo de contraste, as sugestões, a renderização da pré-visualização e a geração de CSS acontecem localmente neste navegador. Os dados de analytics excluem cores exatas, proporções, resultados de aprovação ou reprovação, CSS gerado e valores de estado de compartilhamento. Uma URL de compartilhamento contém cores somente quando você a cria explicitamente.

Perguntas frequentes

Qual proporção de contraste o WCAG AA exige?

O WCAG AA exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande. O verificador informa ambos os resultados separadamente porque o tamanho e o peso da fonte determinam qual limite se aplica.

Qual proporção de contraste o WCAG AAA exige?

O WCAG AAA exige pelo menos 7:1 para texto normal e 4.5:1 para texto grande. O nível AAA é uma meta de contraste de texto mais alta, não uma declaração de que todos os outros requisitos de acessibilidade são atendidos.

O que é considerado texto grande para o teste de contraste?

Texto grande geralmente significa texto normal de pelo menos 18 pontos ou texto em negrito de 14 pontos. Pixels de CSS e métricas de fonte renderizadas podem variar, portanto, verifique o tamanho e o peso reais usados na interface.

Controles e ícones precisam de contraste de 3:1?

Muitos controles significativos, indicadores de foco e objetos gráficos precisam de uma relação de contraste de 3:1 com as cores adjacentes. Esta ferramenta reporta apenas o par testado; se o requisito se aplica depende do elemento e do estado.

Um par de cores aprovado prova que minha página está em conformidade?

Não. Um par aprovado cobre um cálculo de contraste. Tipografia, imagens, gradientes, ícones, controles, estados de hover e desabilitado, indicadores de foco, estrutura, acesso por teclado e a página renderizada completa ainda exigem revisão.