Atualizar contraste de cor do texto
Todos devem ser capazes de ler seu texto
É importante que o texto possa ser visto e seja legível. Se você quiser que seus visitantes entendam, eles devem ser capazes de ler.
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. O WCAG definiu requisitos específicos de contraste nas diretrizes WCAG 2.2 AA para assegurar que o texto seja 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. Questões graves impactam a acessibilidade e, embora não sejam graves, exigem atenção.
Use o Ally para encontrar texto com baixo contraste
Use o Relatório de acessibilidade do Ally para descobrir e corrigir 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.
Dica
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 aba Importante na tabela Questões de Acessibilidade para visualizar a lista de questões principais. Clique nos problemas relacionados ao contraste.
Dica
Se você começar pela guia Visão geral, clique no problema e em seguida no domínio com o problema.
Dica
Os problemas de contraste podem começar com o documento ou HTML na lista.
Na lista de problemas de contraste no domínio, clique no indicador de pontuação ao lado de um item com problema. O painel de comentários do editor de conteúdo se abre.
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 que pontos 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 do seu documento.
Navegue pela visualização do documento página por página.
Veja quantas vezes um problema específico é exibido 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, baixe o arquivo original.
Siga as etapas orientadas do Ally para corrigir contraste fraco
Importante
O Ally pressupõe que você tenha conhecimento básico de HTML e de como utilizar o sistema de gerenciamento de conteúdo (CMS). Para seguir as etapas orientadas, você precisa saber como editar uma página web em HTML ou código-fonte no seu CMS.
Importante
O Ally também assume que você tem permissão para atualizar a cor no seu web site. 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.
Clique em Como corrigir o contraste para seguir as etapas orientadas.
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 orientadas do Ally explicam como alterar a cor do texto. Você também pode alterar a cor de fundo.
Importante
Antes de fazer qualquer alteração, verifique o guia de estilo do site. A cor geralmente está relacionada à configuração temática e deve ser alterada com cautela.
As etapas orientadas 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 ter formas amigáveis para você estilizar o texto. Com RTEs, você pode escolher o estilo pré-definido para títulos, cores, fontes, imagens e assim por diante. No entanto, nem todo CMS fornece um RTE e exige 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. Atualizações de templates exigem certo conhecimento de HTML e CSS e podem depender da configuração temática do seu site.
Dica
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) utilizada. 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 símbolo da 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 utilizando 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
Dica
Não tem certeza se seu texto tem contraste suficiente? Use o Analisador de Contraste de Cor do 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 digitalizar, e causa frustração.
Um bom contraste significa que todos podem ver o texto claramente e desfrutam de uma experiência geral melhor ao ler seu conteúdo.