Verificador de Contraste de Cores WCAG

Avalie a proporção de contraste das cores do texto e do fundo de acordo com as diretrizes WCAG 2.1. Gere ajustes de cores acessíveis instantaneamente.

HEX/RGB/HSL
HEX/RGB/HSL
Tudo roda localmente no seu navegador.

Pré-visualização de Texto ao Vivo

Título Grande (18pt Negrito / 24pt Regular)

Esta é uma previsão do grande estilo de texto de título.

Texto Normal (Abaixo de 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elite.

Proporção de Contraste

18.6:1

Status de Conformidade WCAG 2.1

Requisitos WCAG AA
Texto Normal (4.5:1) PASS
Texto Grande (3.0:1) PASS
Requisitos WCAG AAA
Texto Normal (7.0:1) PASS
Texto Grande (4.5:1) PASS

Diretrizes WCAG 2.1

Verifique facilmente os padrões de contraste para construir interfaces acessíveis que estejam em conformidade com as diretrizes da Seção 508, ADA e WCAG AA ou AAA.

Mecanismo de Sugestões

Ajuste automaticamente as cores incrementalmente ao longo das coordenadas HSL para encontrar as alternativas mais próximas que atendam aos critérios de relação de contraste.

Totalmente do Lado do Cliente

Os cálculos são executados localmente no contexto do seu navegador. Nenhuma cor, arquivo ou coordenadas de telemetria são transmitidos para nossos servidores.

Ferramentas de Cores Relacionadas

Conversor de Cores HEX RGB HSL
Converta cores e ajuste as coordenadas de luminosidade.
Seletor de Cores de Imagem
Extraia paletas de cores de mockups de design.
Conversor de Cores CSS
Conversão entre formatos CMYK, HSV, RGB, HSL e HEX.

Verificador de Contraste de Cores

Calcular as proporções de contraste do WCAG para as cores de antecedência e de fundo e mostrar resultados comuns em tamanho de texto.

Entrada
Duas cores CSS válidas e texto de visualização pré-opcional.
Saída
A relação de contraste com os indicadores WCAG AA e AAA passam ou falham.
Limitações reais
O cálculo cobre apenas o contraste de luminância; não certifica uma interface ou conta para renderização de letras, movimento, foco ou coes não coloridas.
Privacidade e tratamento de dados
duas cores CSS válidas e texto de visualização opcional são processados nesta tabela do navegador. o Converter não recebe ou armazenará; fechar ou re-carregar a página limpa o estado de trabalho, a menos que a ferramenta explicitamente ofereça uma download local.

Como usar essa ferramenta

  1. Fornece duas cores CSS válidas e texto de visualização prévia opcional nos controles de ferramentas.
  2. Escolha as configurações que afetam uma relação de contraste com o WCAG AA e AAA passando ou falhando indicadores, então execute a ferramenta.
  3. Revise uma relação de contraste com o WCAG AA e AAA passando ou falhando indicadores antes de copiar ou baixar.

Modos de falha comuns

As cores invalidas não podem ser medidas, e a transparência sem um fundo resolvido pode tornar uma relação sem sentido.

Exemplo útil

Compare o texto #f2904 em #fffx para ver a sua relação entre texto normal e grande.