Experimente as ferramentas de SEO

Verificador de contraste

Verificador de contraste de cores WCAG para calcular a taxa de contraste do texto.

Relação de contraste 21:1

Texto normal

WCAG AA: Pass

WCAG AAA: Pass

Exemplo de texto normal - 16px

Texto grande

WCAG AA: Pass

WCAG AAA: Pass

Exemplo de texto grande 18pt/24px

Objetos gráficos e componentes da interface do usuário

WCAG AA: Pass

Calcule a taxa de contraste para o tamanho normal do texto.
Calcule a taxa de contraste para textos grandes.
Calcule a taxa de contraste dos componentes da interface do usuário.
Selecione a cor no seletor de cores
Configurar a luminosidade da cor

Como usar o Contrast Checker

Escolha a cor de fundo
Escolha a cor do primeiro plano
Ajuste a luminosidade, se necessário
Verifique a auditoria para texto normal e grande

PERGUNTAS FREQUENTES

Como funciona o verificador de contraste?

Você precisa avaliar a cor do texto e do plano de fundo. De acordo com as diretrizes da WCAG 2.1, são elas: Texto grande - Texto com tamanho mínimo de 18 px requer uma taxa de contraste de 3:1; Texto pequeno - Texto com tamanho inferior a 18 px requer uma taxa de contraste de 4, 5:1.

Por que meu site deveria ter contraste de cores suficiente?

O texto em um plano de fundo com baixa taxa de contraste geralmente é difícil de ler. Isso não afeta apenas negativamente as pessoas com deficiência visual, mas também incomoda todos os usuários. Um exemplo é ler texto em um celular ao ar livre em um dia ensolarado.

O que significa acessibilidade do site?

Um site acessível é um site criado para que pessoas com deficiência visual ou auditiva possam usá-lo sem restrições. Por exemplo, isso garante que todos os elementos do site tenham contraste de cores suficiente, ou seja, a cor do texto é bem diferente da cor de fundo.

As imagens e os vídeos precisam estar em conformidade com os requisitos de contraste de cores WCAG?

Certos componentes gráficos e de interface exigem uma taxa de contraste de pelo menos 3:1. No entanto, isso não inclui logotipos, imagens decorativas ou arquivos de mídia em geral.

Produtos

Sites

Sobre

language

Verificador de contraste

Verificador de contraste de cores WCAG para calcular a taxa de contraste do texto.

Texto normal

Texto grande

Objetos gráficos e componentes da interface do usuário

Como usar o Contrast Checker

PERGUNTAS FREQUENTES

Como funciona o verificador de contraste?

Por que meu site deveria ter contraste de cores suficiente?

O que significa acessibilidade do site?

As imagens e os vídeos precisam estar em conformidade com os requisitos de contraste de cores WCAG?