Cinco "verificadores de contraste" fáceis de usar para os responsáveis.

2024/07/29

Verificador de contrastecalcula a taxa de contraste, ou seja, a diferença entre a cor do primeiro plano (texto e elementos gráficos) e a cor do plano de fundo em um site ou imagem,Se a proporção está em conformidade com as diretrizes de acessibilidade da Web, como WCAG e JIS.Ferramentas para avaliar oTambém conhecido como verificador de relação de contraste ou verificador de contraste de cores.

Este artigo apresenta as cinco ferramentas a seguir como verificadores de contraste típicos.

A seguir, apresentamos uma introdução a essas ferramentas, bem como uma explicação detalhada do que procurar ao verificar as relações de contraste,Recomenda-se que as pessoas encarregadas de lidar com a acessibilidade da Web consultem este artigo.

Cinco verificadores de contraste fáceis de usar para profissionais de acessibilidade.

Há vários tipos de verificadores de contraste que são essenciais para que os designers e profissionais de acessibilidade verifiquem o contraste de seus sites e conteúdo da Web.

Então, aqui está,Verificadores de contraste típicos e fáceis de usarCinco dessas ferramentas são apresentadas nesta seção. Algumas ferramentas estão disponíveis em sites (navegadores), enquanto outras podem ser instaladas e usadas,Ambas as ferramentas estão disponíveis gratuitamente.para apresentar o sistema, portanto, fique à vontade para verificar o uso do sistema primeiro.

Nome da ferramenta	Recursos	Utilizando o meio ambiente
① WebAIM	Uma ferramenta que pode ser usada imediatamente após o acesso ao site; embora o site esteja em inglês, a interface do usuário é simples, direta e fácil de usar.	Navegador (web)
② ColorTester	As imagens podem ser arrastadas e soltas para verificar o contraste; como se trata de um sistema instalado, seu uso no local de trabalho pode ser restrito.	instalar (Windows / Mac)
③ AdobeColor	Apresenta uma função de verificação de contraste, bem como uma grande variedade de funções relacionadas a esquemas de cores, e pode ser vinculado a produtos da Adobe, como Photoshop, Illustrator e inDesign.	Navegador (web)
④ Verificador de contraste de cores WCAG	Instalada no Google Chrome e usada como uma extensão, essa ferramenta é particularmente útil para verificar o contraste de um site.	Navegador (web) (Extensão do Chrome)
⑤ ContrastGrid	Uma ferramenta que permite que os usuários verifiquem o contraste das cores definidas em um relance; vários códigos de cores podem ser definidos, facilitando o entendimento e a decisão de quais cores usar para pessoas que não são boas em esquemas de cores.	Navegador (web)

 

① WebAIM

Defina a cor do texto (Foreground) e a cor do plano de fundo (Background) e calcule a taxa de contraste,Garantir que os critérios das WCAG sejam atendidosAs cores podem ser especificadas usando um código de cores, um seletor de cores e o brilho pode ser ajustado; depois que uma cor é definida, a taxa de contraste é calculada em tempo real e as visualizações podem ser exibidas em texto normal, texto em negrito e objetos gráficos, como marcas de seleção.

Se cada resultado atende ao nível de conformidade pode ser visto rapidamente em "Aprovado" ou "Reprovado".A navegação é feita em inglês, mas é simples e direta.Portanto, você não precisará se preocupar com o uso geral.

Página oficial:WebAIM

② ColorTester

A taxa de contraste das duas cores é calculada e avaliada de acordo com os critérios da norma JIS X 8341-3:2010 (WCAG 2.0).Arraste e solte arquivos de imagem na janela para adivinhar e avaliar automaticamente as cores do primeiro plano e do plano de fundo da imagemÉ.

No entanto, a ferramenta é fabricada no Japão e é compatível com os sistemas operacionais Windows e Mac,A ferramenta precisará ser instaladaAs versões compatíveis com cada sistema operacional são Windows 8.1 ou posterior e Mac OS X 10.10 ou posterior; uma versão em inglês também está disponível.

Página oficial:ColorTester

③ Adobe Color

Essa ferramenta é fornecida pela Adobe, uma desenvolvedora e distribuidora de ferramentas para criadores, e tem várias funções úteis para atividades criativas, incluindo um verificador de contraste para verificar a acessibilidade.

No entanto, ele é semelhante a outros verificadores de contraste,Ele também sugere a melhor cor de contraste para a cor definida.Embora a ferramenta seja criada pela Adobe, ela pode ser usada sem instalação ou login, mas se você fizer loginFerramenta fácil de usar para designers que usam regularmente aplicativos da Adobe, pois pode ser integrada a outros produtos da Adobe.Deveria ser.

Página oficial:Adobe Color

④ Verificador de contraste de cores WCAG

Complementos (extensões) para o Google ChromeEssa ferramenta pode ser usada para extrair instantaneamente as cores usadas nas páginas de um site e avaliar o contraste de cada cor; ela pode ser verificada página por página, facilitando o uso para verificar sites na fase de teste ou para a manutenção de sites já em operação.

Clique em qualquer uma das cores exibidas no painel de controle lateral para obter um close-up da parte da página em que ela é usada,Sites de portais e outros sites ricos em informações podem ser facilmente verificados.。

Página oficial:WCAG Verificador de contraste de cores

⑤ Grade de contraste

Muitos verificadores de contraste se baseiam no método de especificar uma cor e verificar o contraste a cada vez, mas essa ferramentaUma paleta de cores (lista) é exibida e você pode selecionar a combinação de contrastes que deseja usar.Portanto, esse método é recomendado para iniciantes em design e para aqueles que não são bons em esquemas de cores.

Se você visitar o site oficial, já verá as combinações de cores padrão, conforme mostrado acima. Adicionar um código de cor à caixa à esquerda listará as combinações com as outras cores na paleta. para cada combinação de coresO nível de conformidade é rotulado, como "AA" ou "AAA", e as diferentes cores dos rótulos indicam se eles estão em conformidade ou não.Portanto, as combinações disponíveis também são óbvias em um piscar de olhos.

Página oficial:Grade de contraste

Depois de apresentar rapidamente cinco verificadores de contraste úteis, por que precisamos verificar o contraste em primeiro lugar?

Por que é necessária uma verificação de contraste?

Sobre a obrigação de fornecer acomodações razoáveis de acordo com a Lei de Discriminação por Deficiência revisada, que entrou em vigor em abril de 2024,O suporte à acessibilidade da Web também é uma medida essencial.Para responder a isso, primeiro é necessário examinar o site de vários ângulos para verificar se a acessibilidade do site da empresa foi alcançada.

Em particular, como os sites fornecem uma grande quantidade de informações que são obtidas visualmente, eles não são apenas para os deficientes visuais, mas também para aqueles que não são deficientes visuais.O site foi projetado para tornar o texto e as imagens reconhecíveis para usuários com baixa visão e idosos ou usuários com características de visão colorida?A acessibilidade do site na Web deve ser verificada e as melhorias devem ser feitas conforme necessário.

E um dos indicadores necessários para verificar isso é"Relação de contraste de cores".A taxa de contraste é uma medida da diferença de claridade ou escuridão entre duas cores na tela (geralmente as cores do primeiro plano e do plano de fundo). Essa taxa é uma representação numérica do brilho relativo das duas cores; quanto maior a taxa de contraste, mais fácil será distinguir as cores em geral,A taxa de contraste é expressa na faixa de 1:1 a 21:1, sendo que valores mais altos significam maior contraste = reconhecimento mais fácil.。

Agora, vamos analisar até que ponto as diferentes taxas de contraste realmente mudam a maneira como vemos as coisas, veja abaixo.

Diferenças de visibilidade devido à taxa de contraste

Além disso, a imagem acima foi borrada para dar uma ideia do que acontece quando as letras aparecem borradas, como no caso de pessoas com baixa visão.

Diferenças na aparência quando a imagem está embaçada.

Assim,Quando a taxa de contraste é alta, os limites de cor são mais fáceis de reconhecer, ou seja, mais legíveis, porque há uma diferença maior entre a cor de fundo e a cor geral da paisagem.Por exemplo, é fácil entender que, se as cores do texto e do plano de fundo forem 1:1, ambas serão da mesma cor e irreconhecíveis, ao passo que, se forem 21:1, serão exibidas em preto e branco e claramente reconhecíveis.Para garantir a acessibilidade da Web em sites com uma mistura de diferentes elementos, como texto e imagens, a taxa de contraste deve ser projetada com atenção aos detalhes.。

Portanto, o contraste entre o design de seus próprios sites é"Ele atende aos requisitos para garantir a acessibilidade da Web?A verificação do contraste é uma tarefa essencial para determinar oO "verificador de contraste" é uma ferramenta essencial para decisões quantitativas.Os requisitos de acessibilidade da Web serão explicados na próxima seção.

Três pontos de verificação de contraste.

Ao usar um verificador de contraste para verificar a taxa de contraste de um site ou conteúdo, você não deve usar seus próprios sentidos para decidir se ele é aceitável ou não.A verificação deve ser realizada de acordo com os padrões de acessibilidade da Web estabelecidos.Esta seção descreve três pontos-chave que devem ser considerados durante as verificações de contraste.

Ponto 1: Entenda as taxas de contraste que atendem aos padrões JIS.

Como mencionado anteriormente, a Lei de Discriminação por Deficiência revisada tornou obrigatório o fornecimento de acomodações razoáveis para todas as empresas, tornando a acessibilidade da Web uma obrigação para todas as empresas.

Há vários elementos que compõem um site, cada um dos quais tem seus próprios padrões de acessibilidade, todos definidos por um padrão internacional chamado WCAG 2.0 (Web Content Accessibility Guidelines 2.0) no JapãoPadrão JIS (JIS X 8341-3:2016)é disso que se trata.

Além disso, os níveis de realização desse padrão são definidos como níveis de conformidade de A a AAA, de acordo com o Ministério de Assuntos Internos e Comunicações,A acessibilidade da Web exige conformidade com AA ou AAA (recomendado)Ele é considerado um

Referência:Suporte de acessibilidade para sites etc. exigido das autoridades públicas (Ministério de Assuntos Internos e Comunicações).

E os padrões também são definidos para as taxas de contraste.

Relação de contraste para atender aos níveis de conformidade AA e AAA

nível de conformidade	Taxa de contraste necessária
AA	4,5:1 ou superior
AAA	7:1 ou mais

Em outras palavras, como um site para acessibilidade na Web,É necessária uma relação de contraste de pelo menos 4,5:1.Muitos verificadores de contraste calculam automaticamente a taxa de contraste, portanto, preste atenção a essa taxa e verifique-a.

Observe que a taxa de contraste AAA de 7:1 baseia-se em usuários cuja visão é reduzida para cerca de 20/80, e o W3C pressupõe que os usuários cuja visão é reduzida para além de 20/80 geralmente usam tecnologias assistivas para acessar o conteúdo.

A obtenção do AAA não é obrigatória, mas apenas recomendada,Se o site for destinado ao uso por usuários com características de baixa visão ou visão colorida que não tenham tecnologia assistiva, ele deverá ser projetado com uma taxa de contraste de 7:1 em menteDeveria ser.

Referência:Entenda o Padrão de Realização 1.4.6 | Comentário WCAG 2.0 (W3C)

Ponto 2: Preste atenção ao tamanho da fonte.

Embora tenha sido declarado no item (i) que a taxa de contraste precisa ser de pelo menos 4,5:1, na verdade há exceções a isso.Não é necessário satisfazer 4,5:1 nos seguintes casos

Exceções à conformidade com os padrões para a taxa de contraste

Exceção 1) Texto grande e em negrito.
Para texto grande ou em negrito (texto normal acima de 18 pontos ou 14 pontos em negrito),Taxa de contraste de 3:1atenderia ao critério, pois o texto grande é altamente visível e, portanto, um contraste ligeiramente menor é considerado menos problemático.

Exceção (ii) Texto e logotipos para fins decorativos.
O texto incidental para fins decorativos e os logotipos corporativos são excluídos desse requisito de taxa de contraste, pois são usados para fins de design e reconhecimento de marca e não são considerados meios de comunicação de informações.

Exceção (iii) Texto em imagens.
No entanto, as exceções incluem texto em fotografias e imagens,Ter uma taxa de contraste adequada, mesmo dentro da imagem, com relação ao texto que é importante para o fornecimento de informações.é recomendado.

Ponto 3) Deve-se levar em consideração também os usuários com características de visão de cores.

Até o momento, nos concentramos apenas nas taxas de contraste, mas, ao considerar a acessibilidade das cores, as taxas de contraste por si só não são suficientes, pois, como vimos, a taxa de contraste não é o único fator que pode ser considerado ao considerar a acessibilidade das cores,Consideração para usuários com características de visão de coresIsso ocorre porque ele também deve levar em conta

Por exemplo, abaixo está uma sequência de botões comumente encontrados em formulários de e-mail de sites etc. Para ambos os botões, a proporção de contraste entre a cor de fundo e a cor do texto é um esquema de cores em conformidade com AA.

Botões compatíveis com AA de taxa de contraste

É fácil pensar: "Bem, a taxa de contraste atende aos critérios, portanto a acessibilidade está garantida", mas ainda é muito cedo para dizer, pois esse botão temVisão de cores tipo D (dicromatopsia tipo 2)você verá o seguinte.

Visão de botões na visão de cores do tipo D

Assim,Os dois botões têm cores semelhantes e são difíceis de distinguir à primeira vistaIsso significa que não apenas a taxa de contraste, mas também as características de visão de cores precisam ser levadas em conta ao criar um esquema de cores.

Além disso, em termos de consideração para usuários com características de visão colorida,Assegure-se de que as informações não sejam transmitidas apenas com base nas diferenças de cor.Esse também é um ponto importante a ser considerado.

Com o UniWeb, o usuário pode alterar o contraste.

Se você não tiver os recursos para fazer uma verificação de contraste em seu próprio site, nossoFerramenta de acessibilidade UniWeb.A UniWeb recomenda a introdução de uma série de recursos de acessibilidade simplesmente adicionando uma única linha de código ao código-fonte do site.implementação no mesmo diaÉ uma ferramenta de plug-in que pode ser

Quais são os principais recursos do UniWeb?Várias funções de acessibilidade podem ser usadas ao navegar em sites no lado do usuário.Há um ponto: entre os recursos de acessibilidade a serem implementados está a capacidade de ajustar o contraste, permitindo que os usuários alternem entre "cor invertida", "contraste escuro" e "contraste claro" com um simples clique para aumentar a legibilidade.

Função de alteração de contraste UniWeb.

Além disso, a tela de gerenciamento mostraRelatórios de diagnóstico sobre a conformidade de um site com a acessibilidade da Web.O relatório mostra o nível de conformidade (A, AA, AAA) para cada item, bem como as modificações específicas no código para as áreas que exigem ação corretiva,É possível realizar uma operação eficiente sem a necessidade de procurar pontos de correção com várias ferramentas de verificação, etc.。

Tela de gerenciamento do UniWeb.

Canto inferior direito deste artigo.Clique no "ícone humano circular azul".Você também pode alternar entre contrastes e uma ampla gama de outras funções de acessibilidade.

resumo

Em sites com muitas informações obtidas por meio de recursos visuais,Garantir visibilidade e legibilidade para todos os usuáriosPortanto, é preciso entender as considerações necessárias para usuários com baixa visão, idosos e pessoas daltônicas e implementar um design acessível adequado em seu site.

Os verificadores de contraste são ferramentas muito úteis para obter um design acessível, embora muitos estejam incluídos em ferramentas pagas de verificação de acessibilidade da Web,As ferramentas gratuitas são suficientes apenas para o verificador de contraste.Portanto, comece verificando seu próprio site o mais rápido possível.

No entanto, este artigo se concentrou na validação da taxa de contraste dentro da acessibilidade da Web,Se você quiser saber mais sobre acessibilidade na Web, consulte os artigos anteriores deste site, bem como o Guia de Implementação de Acessibilidade na Web fornecido pela Digital Agency.。

Referência:Artigo anterior, "Quais medidas de acessibilidade da Web devem ser implementadas pelos gerentes de sites?"、Guia de Implementação de Acessibilidade na Web (Agência Digital).

Além disso, nosso UniWeb ofereceO diagnóstico gratuito do site de sua empresa também está disponível.Se você é uma empresa que está considerando o suporte à acessibilidade da Web para o seu site, é porque está implementando-o,Link abaixoSinta-se à vontade para se candidatar em

Avaliação gratuita de acessibilidade (UniWeb).

Verificador de contraste