Verificador de contraste de cor

O que é Verificador de contraste de cor?

O Verificador de contraste de cor é uma ferramenta on-line gratuita de contraste WCAG e APCA para designers, desenvolvedores e testadores de acessibilidade. Ela aceita cores em HEX (#rgb, #rrggbb e #rrggbbaa de 8 dígitos com alfa), rgb()/rgba() e hsl()/hsla(), compõe um primeiro plano translúcido sobre o fundo antes de medir e informa tanto a relação WCAG 2.1 (1:1 a 21:1) quanto a pontuação de contraste de luminosidade APCA Lc. Ela sinaliza o nível AA do WCAG 2.1 (4.5:1 normal, 3:1 grande) e AAA (7:1 normal, 4.5:1 grande), adiciona um selo 3:1 para componentes de interface e gráficos não textuais e pode sugerir o primeiro plano aprovado mais próximo — ajustando apenas a luminosidade até atingir AA ou AAA — que você aplica com um clique.

Como usar Verificador de contraste de cor

1. Insira a cor de primeiro plano (texto) como HEX, rgb() ou hsl() — HEX de 8 dígitos ou rgba com alfa é aceito — ou clique no seletor de cor para escolhê-la visualmente.
2. Insira a cor de fundo da mesma forma; um primeiro plano semitransparente é composto sobre ela (e o fundo sobre branco) antes de medir o contraste.
3. Use o botão Trocar para inverter o primeiro plano e o fundo a qualquer momento.
4. Leia a relação de contraste WCAG 2.1 e a pontuação APCA Lc mostrada logo ao lado.
5. Confira os selos AA e AAA para texto normal e grande, além do selo 3:1 para componentes de interface e gráficos.
6. Se um par reprovar, veja a cor AA ou AAA aprovada mais próxima e clique em Aplicar para atualizar o primeiro plano.

Exemplos

Primeiro plano #595959, Fundo #ffffff

Relação 7.00:1 com um APCA Lc alto — passa em AA e AAA para texto normal e grande

Primeiro plano #00000080 (preto a 50%) sobre #ffffff

Composto primeiro em um cinza sólido e depois calculam-se a relação WCAG e o APCA Lc

Primeiro plano #999999 sobre #ffffff — 2.85:1, reprova em AA

Abra a cor AA mais próxima e clique em Aplicar para chegar a 4.5:1 mantendo o mesmo matiz

Perguntas frequentes

Quais relações de contraste o WCAG exige?

O nível AA do WCAG 2.1 precisa de pelo menos 4.5:1 para texto normal e 3:1 para texto grande; o nível AAA precisa de 7:1 e 4.5:1. Componentes de interface e objetos gráficos não textuais (SC 1.4.11) precisam de 3:1. Este verificador mostra um selo de aprovação/reprovação para cada um desses limites.

O que é a pontuação APCA Lc?

O APCA (Algoritmo de Contraste Perceptual Acessível) é o método de contraste proposto para o WCAG 3. Ele fornece um valor de contraste de luminosidade (Lc) de cerca de 0 a 108, em que mais alto significa mais contraste, e considera a polaridade (escuro sobre claro versus claro sobre escuro). É mostrado ao lado da relação WCAG 2.1 e usa seus próprios níveis de orientação em vez de um único aprovado/reprovado.

Como funciona a sugestão de cor aprovada mais próxima?

Ela mantém o matiz e a saturação do primeiro plano e ajusta apenas sua luminosidade, mais clara ou mais escura, até o contraste com o fundo atingir AA (4.5:1) ou AAA (7:1); então você pode aplicá-la com um clique. Se o fundo for de tom médio e a meta não puder ser atingida, mostra a cor possível mais próxima.

Quais formatos de cor posso inserir?

HEX (#rgb, #rrggbb, além de #rgba e #rrggbbaa de 8 dígitos com alfa), rgb()/rgba() e hsl()/hsla(), com um seletor de cor nativo para cada campo. Um primeiro plano semitransparente é composto sobre o fundo — que, por sua vez, é achatado sobre branco — antes de a relação ser calculada. Cores nomeadas não são suportadas.

Minhas cores são enviadas a um servidor?

Não. Toda a análise, composição e os cálculos de luminância, relação e APCA são executados inteiramente no seu navegador com JavaScript — nenhuma cor é enviada e nada é transmitido a um servidor, então funciona de forma privada e até offline depois que a página é carregada.