Texto corrido legível: medida, altura de linha e contraste

O que é

Measure (medida) é o comprimento de uma linha em caracteres. Leading (altura de linha) é a distância de uma linha de base até a seguinte. A razão de contraste é a relação de luminância entre o texto e o fundo. A WCAG 2.2 define valores numéricos para os três. O critério 1.4.8 Visual Presentation (AAA) estabelece, para blocos de texto: largura de no máximo 80 caracteres ou glifos (40 para CJK), texto não justificado, espaçamento entre linhas de pelo menos uma vez e meia dentro dos parágrafos, com espaçamento entre parágrafos pelo menos 1,5 vez maior que o espaçamento entre linhas, e texto redimensionável até 200 % sem rolagem horizontal. O critério 1.4.12 Text Spacing (AA) exige que nenhum conteúdo ou função seja perdido quando o usuário sobrescreve a altura de linha para pelo menos 1,5 vez o tamanho da fonte, o espaçamento entre parágrafos para 2 vezes, o espaçamento entre letras para 0,12 vez e o espaçamento entre palavras para 0,16 vez. O critério 1.4.3 Contrast (AA) exige 4,5:1 para texto e 3:1 para texto grande, que o documento define como cerca de 18 pontos, ou 14 pontos em negrito.

Por que importa

Linhas longas demais fazem o olho perder a posição ao voltar para o início da linha seguinte; uma entrelinha apertada faz as linhas se misturarem; contraste baixo é ilegível sob a luz do sol e para quem tem visão reduzida. São essas as falhas que mais frequentemente tornam desagradável a leitura de um conteúdo que, de resto, está bem estruturado, e são baratas de corrigir.

Como aplicar

• Limite a coluna de texto com max-width em unidades ch (por exemplo max-width: 65ch). Um ch é a largura de avanço do glifo 0 da fonte, de modo que o limite acompanha a fonte; em uma fonte proporcional, uma linha comporta mais caracteres do que o seu valor em ch, então conte os caracteres de uma linha de amostra em relação ao teto de 80 caracteres, em vez de presumir.
• Defina line-height como número sem unidade (1.5 ou mais para o texto corrido, menos para títulos grandes), para que ele escale com a fonte; aumente-o para linhas longas e para fontes com altura-x elevada.
• Use rem para tamanhos de fonte e em/rem para espaçamentos, de modo que o zoom do navegador e as configurações de tamanho de fonte do usuário funcionem; evite alturas fixas em pixels nos contêineres de texto, para que o texto reespaçado não transborde.
• Verifique cada par texto/fundo em relação a 4,5:1, incluindo texto de placeholder, texto sobre imagens e ambos os esquemas de cores; títulos grandes podem usar 3:1.
• Alinhe o texto corrido à esquerda (ao início); a justificação sem hifenização produz "rios" de espaço em branco, e o critério 1.4.8 menciona explicitamente o texto não justificado.

Armadilhas

Pesos de fonte finos perdem contraste nas telas mesmo quando a razão de cores é aprovada. line-height em px não escala com o texto. Truncar com text-overflow: ellipsis esconde conteúdo quando o usuário aumenta o espaçamento. As ferramentas de contraste medem apenas a cor; uma imagem de fundo carregada exige um fundo sólido ou desfocado atrás do texto.