Todos devem conseguir ler o seu texto

É importante que o texto possa ser visto e seja legível. Se você deseja que seus visitantes compreendam isso, eles precisam ser capazes de lê-lo.

O bom contraste de texto garante que todos possam ver o texto em relação ao plano de fundo em que ele se encontra.

Nem todos veem cores da mesma forma. WCAG definiu requisitos específicos de contraste nas Diretrizes de WCAG 2,1 AA para garantir que o texto fique legível para todos. Siga esses requisitos e nossas práticas recomendadas de contraste para corrigir ou evitar problemas de contraste.

O Ally segue os requisitos de contraste para verificar se há contraste suficiente entre a cor do texto e a cor do fundo. O contraste ruim é um problema importante. Problemas importantes afetam a acessibilidade e, embora não sejam graves, precisam de atenção.

Use o Ally para encontrar texto com baixo contraste

Use o relatório de acessibilidade do Ally para descobrir e corrigir os problemas de acessibilidade no seu site. Use o link fornecido para o relatório e faça login. Abra o relatório e veja a lista de problemas na tabela Problemas de acessibilidade.

A tabela Problemas de acessibilidade está nas guias Visão geral e Domínio. Comece na guia Domínio para ver os problemas específicos de um domínio. 

É um problema importante ter texto com contraste fraco. Use a guia Importante na tabela Problemas de acessibilidade para visualizar a lista com os principais problemas. Selecione os problemas com problemas de contraste.

Se você começar pela guia Visão geral, selecione o problema e, em seguida, o domínio com o problema.

Os problemas de contraste podem começar com o documento ou HTML na lista.

Na lista de problemas de contraste no domínio, selecione o indicador de pontuação ao lado de um item com o problema. O painel de comentários do editor de conteúdo é aberto.

Visualizar o texto com baixo contraste

O painel de comentários do Ally mostra uma visualização do conteúdo, bem como comentários detalhados e suporte para ajudar você a corrigir seus problemas de acessibilidade. Use a visualização para ver o texto com baixo contraste.

A visualização destaca em qual lugar do documento os problemas específicos de acessibilidade podem ser encontrados. Os destaques exibem todas as ocorrências de um tipo de problema por vez. Por exemplo, se o texto tiver um baixo contraste, os destaques mostrarão cada lugar em que esse problema específico ocorre.

Ferramentas de visualização

Use as ferramentas acima da visualização para explorar os problemas de seu documento.

  • Navegue pela visualização do documento página por página.
  • Veja quantas vezes um problema específico aparece no documento.
  • Alterne entre os destaques do problema.
  • Oculte ou exiba os destaques.
  • Aumente ou diminua o zoom do conteúdo da visualização.
  • Se o problema estiver em um documento anexado, faça o download do arquivo original.

Siga as etapas guiadas do Ally para corrigir contraste fraco

O Ally pressupõe que você tenha conhecimento básico de HTML e de como usar o sistema de gerenciamento de conteúdo (CMS). Para seguir as etapas guiadas, você precisa saber como editar uma página web em HTML ou código-fonte no seu CMS.

Ally também presume que você tenha permissão para atualizar a cor em seu site web. Geralmente, a cor é definida no guia de estilo de um site e pode refletir a configuração temática. Antes de fazer qualquer alteração, verifique o guia de estilo do site. 

Junto com a visualização, o Ally oferece uma orientação passo a passo sobre como corrigir o problema. O Ally organiza esses comentários em uma árvore de decisão. Tudo o que você precisa fazer é ler as orientações e responder às solicitações. Descubra o que é o problema, por que ele é importante e como corrigi-lo adequadamente.

Selecione Como corrigir o contraste para seguir as etapas guiadas.

Maneiras de corrigir problemas de contraste

Quando o texto tem baixo contraste, isso significa que não há contraste de cores suficiente entre o texto e o plano de fundo em que ele se encontra.

As etapas guiadas do Ally explicam como alterar a cor do texto. Você também pode alterar a cor de fundo. 

Antes de fazer qualquer alteração, verifique o guia de estilo do site. A cor é frequentemente relacionada à marca e deve ser alterada com cautela.

As etapas guiadas do Ally também explicam como fazer as atualizações no código de HTML de origem das páginas individuais web. Os CMS podem variar. Alguns CMS têm um editor de Rich Text (RTE) que pode fornecer formas amigáveis para você estilizar o texto. Com o RTE, você pode escolher o estilo predefinido para títulos, cores, fontes, imagens e assim por diante. No entanto, nem todo CMS fornece um RTE e requer edições no código-fonte com HTML. Às vezes, HTML e RTE também estão disponíveis.

Em caso de problemas de contraste recorrente, você pode querer atualizar o modelo. As atualizações de modelo exigem determinados conhecimentos de HTML e CSS e podem depender da configuração temática do seu site. 

Visite w3schools para saber mais sobre HTML e CSS

Cor HEX ou RGB

HEX e RGB são diferentes formas de definir cores.

  • RGB define a cor pela quantidade de vermelho (R), verde (G) e azul (B) usada. Por exemplo, um tom de vermelho pode ser definido como RGB (253, 2, 2).
  • HEX é um formato hexadecimal que define uma cor pelos valores de vermelho, verde e azul em uma combinação de seis letras e números. Hexadecimais começam com o número ou o símbolo de hashtag (#). Por exemplo, o mesmo tom de vermelho seria definido como #fd0202.

Hexadecimal é a maneira mais comum de definir cores em páginas da web.

Práticas recomendadas de contraste de texto

Existem muitos ajustes fáceis que você pode realizar para melhorar a legibilidade do texto.

  • Use fontes com traços largos.
  • Use uma fonte com tamanho mínimo de 12px. Se estiver usando uma fonte com traços finos, use no mínimo 16px.
  • Use fontes “finas” somente em fundos escuros.
  • Use texto claro em fundos escuros.
  • Use texto escuro em fundos claros.
  • Evite as seguintes combinações de cores:
    • Verde e vermelho
    • Verde e marrom
    • Azul e roxo
    • Verde e azul
    • Verde claro e amarelo
    • Azul e cinza
    • Verde e cinza
    • Verde e preto

Não tem certeza de que seu texto possui contraste suficiente?  Use o Colour Contrast Analyser da The Paciello Group para verificar seu conteúdo.

Por que o contraste do texto é importante?

Um texto com contraste fraco pode ser difícil de ler em muitas situações.

  • Quando projetado em sala
  • Para alunos com daltonismo
  • Em um dispositivo móvel com uma luz brilhante ou reflexo na tela
  • Em monitores de baixa qualidade

O contraste fraco pode causar cansaço visual, torna o conteúdo difícil de descobrir e escanear, e causa frustração.

Um contraste bom significa que todos podem ver o texto claramente e proporciona uma experiência geral melhor durante a leitura de seu conteúdo.