Support Centre

Pesquisa

Verifique a taxa de contraste de cores

Renée Meloche
Renée Meloche
  • Atualizado

Disponível nos seguintes planos de assinatura da Venngage: Grátis, Premium, Empresarial e Enterprise.

A taxa de contraste de cores informa se os usuários com deficiência visual ou outras deficiências poderão ver e interpretar facilmente os elementos em seu design.

Clique no menu de cores na barra de ferramentas superior com o elemento selecionado.

Uma visão parcial de uma tela no Venngage Editor (canto superior esquerdo). Um usuário clica no ícone verde escuro de um livro, sobre uma barra de cabeçalho azul marinho em uma tela de design. Quando o ícone é selecionado, seu menu de cores aparece na barra de ferramentas superior; o usuário clica no menu de cores e abre o painel de seleção de cores. Na parte inferior do painel, o cabeçalho da seção 'Taxa de contraste' aparece, bem como o rótulo do elemento ('Gráficos') e um valor de taxa de contraste 1,8:1, que é identificado como não atendendo aos requisitos de acessibilidade 'AA' por um sinal vermelho ícone 'x'.

Na parte inferior do painel do menu de cores, uma seção intitulada "  Taxa de contraste  " exibe a taxa de contraste do elemento em comparação com o plano de fundo.

Um "x" vermelho aparece ao lado do rótulo do elemento (por exemplo, "Gráficos", "Texto normal", "Cabeçalho" etc.)  se a proporção não atender aos requisitos de acessibilidade  e uma marca de seleção verde se atender.

Um usuário clica no ícone de informações (um 'i' em um círculo) ao lado do cabeçalho 'Taxa de contraste' na parte inferior do seletor de cores. Uma caixa preta de informações é exibida. A caixa diz 'Para atingir os padrões de acessibilidade WCAG 2.1 AA, certifique-se de que seus designs atendam aos seguintes limites de contraste de cores: Texto normal: 4:5:1; Texto grande (pelo menos 19px e negrito, ou pelo menos 24px e regular): 3:1; Gráficos significativos: 3:1.' Um link na parte inferior diz 'Saiba mais sobre contraste de cores'.

Clique no ícone "informações"  ao lado do cabeçalho Taxa de contraste para obter mais detalhes sobre qual taxa de contraste atende aos requisitos WCAG.

Uma visão parcial de uma tela no Venngage Editor (canto superior esquerdo). Um elemento é selecionado na tela de design e o menu seletor de cores é aberto, sobrepondo a visualização parcial do design. Um usuário clica no seletor de cores, que é definido como verde escuro (HEX 245561) e muda a cor para azul claro (HEX 3AB3D2). Na parte inferior do painel, sob o cabeçalho da seção 'Contrast Ratio', o rótulo do elemento 'Graphics' aparece e um valor de taxa de contraste. O valor da taxa de contraste da cor verde escura é definido como '1,8:1', que é identificado como não atendendo aos requisitos de acessibilidade 'AA' por um ícone 'x' vermelho. Quando o usuário altera a cor para azul claro, o valor da taxa de contraste muda para 6,08:1 e a pontuação de acessibilidade 'AA' muda para atender aos requisitos de acessibilidade,

Altere a cor do elemento  com o seletor ou inserindo o  valor do código HEX  . A taxa de contraste no painel de cores será atualizada automaticamente, juntamente com o verificador de requisitos.

O que significa o contraste de cores ("AA", "AAA")?

O verificador de acessibilidade da Venngage classifica o contraste de cores de acordo com  os requisitos WCAG  :

  • O nível A  é o nível mínimo.

  • O nível AA  inclui todos os requisitos de nível A e AA.

    • Este é o requisito que a Venngage aplica para avaliar todos os elementos em um design acessível criado no Editor atualizado.

    • Muitas organizações se esforçam para atingir o Nível AA; isso é usado como linha de base para o requisito legalmente definido de atender aos padrões de acessibilidade.

  • O nível AAA  inclui todos os requisitos de nível A, AA e AAA e atende ao mais alto nível de exigência padrão.

 

VENNGAGE LOGO

Você está curioso para se inscrever? Confira nossos planos.

 

Esse artigo foi útil?

Usuários que acharam isso útil: 0 de 0

Tem mais dúvidas? Envie uma solicitação