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 prévia 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 primeiro plano e de fundo e mostrar resultados comuns em tamanho de texto.

Entrada
Duas cores CSS válidas e texto de visualização opcional.
Saída
Uma taxa de contraste com indicadores de aprovação ou reprovação WCAG AA e AAA.
Limitações reais
O cálculo cobre apenas o contraste de luminância; não certifica uma interface ou leva em conta renderização de fonte, movimento, foco ou dicas 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 Convertr 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 esta ferramenta

  1. Forneça duas cores CSS válidas e texto de pré-visualização opcional nos controles da ferramenta.
  2. Escolha as configurações que afetam uma taxa de contraste com indicadores de aprovação ou reprovação WCAG AA e AAA, e então execute a ferramenta.
  3. Revise uma taxa de contraste com indicadores de aprovação ou reprovação WCAG AA e AAA antes de copiar ou baixar.

Modos de falha comuns

As cores inválidas 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 #1f2937 sobre #ffffff para conferir o contraste em textos normais e grandes.