Texto corrido legível: comprimento da linha, espaçamento entre linhas e contraste

O que é

O comprimento da linha (largura da mancha de texto) é o número de caracteres por linha. O espaçamento entre linhas (entrelinha) é a distância de uma linha de base à seguinte. A razão de contraste é a relação de luminância entre o texto e o fundo. As WCAG 2.2 indicam valores para os três. O critério de sucesso 1.4.8 «Visual Presentation» (AAA) exige, para blocos de texto: no máximo 80 caracteres por linha (40 para escritas CJK), sem texto justificado, espaçamento entre linhas de pelo menos 1,5 vez dentro dos parágrafos, espaçamento entre parágrafos pelo menos 1,5 vez maior que o espaçamento entre linhas, e ampliação até 200 por cento sem rolagem horizontal. O critério 1.4.12 «Text Spacing» (AA) exige que nenhum conteúdo nem função se perca quando o usuário define o espaçamento entre linhas em pelo menos 1,5 vez o tamanho da fonte, o espaçamento entre parágrafos em 2 vezes, o espaçamento entre letras em 0,12 vez e o espaçamento entre palavras em 0,16 vez. O critério 1.4.3 «Contrast (Minimum)» (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 linha ao voltar ao início da seguinte; entrelinha apertada faz as linhas se confundirem; contraste fraco torna o texto ilegível sob luz solar e para quem tem visão reduzida. São falhas comuns que tornam desagradável até um conteúdo bem estruturado, e são baratas de corrigir.

Como aplicar

• Limite a coluna de texto com max-width em ch (por exemplo, max-width: 65ch). Um ch é a largura de avanço do dígito 0 da fonte, de modo que o limite escala com a fonte; em uma fonte proporcional, costumam caber numa linha mais caracteres do que o valor em ch, por isso conte os caracteres de uma linha de exemplo em relação ao limite de 80, em vez de presumir.
• Defina line-height como número sem unidade (1.5 ou mais para texto corrido, menos para títulos grandes), para que escale com a fonte; aumente-o para linhas longas e fontes com altura-x grande.
• Use rem para tamanhos de fonte e em/rem para espaçamentos, para que o zoom do navegador e as configurações de tamanho de fonte tenham efeito; não use alturas fixas em pixels em contêineres de texto, para que o texto com espaçamento alterado não transborde.
• Verifique cada par texto-fundo em relação a 4,5:1, incluindo texto de placeholder, texto sobre imagens e os dois esquemas de cores; títulos grandes podem ter 3:1.
• Alinhe o texto corrido à esquerda (no início da linha); texto justificado sem hifenização gera rios de espaço em branco, e o 1.4.8 menciona expressamente evitar o texto justificado.

Armadilhas

Fontes de traço fino perdem contraste nas telas, mesmo quando a razão de cores é atendida. line-height em px não escala com o texto. Truncar com text-overflow: ellipsis esconde conteúdo quando os usuários aumentam os espaçamentos. Ferramentas de contraste medem apenas cor; uma imagem de fundo irregular precisa de uma superfície opaca ou desfocada atrás do texto.