Adaptando a aparência do texto ao brilho do fundo para acessibilidade e estética

Nos cenários digitais de hoje, garantir a acessibilidade e o apelo visual é de extrema importância. Um elemento crucial disto é o contraste entre o texto e o seu fundo, especialmente para utilizadores com visão subnormal. Para resolver isso, os designers geralmente empregam técnicas que ajustam a aparência do texto com base no brilho do fundo.

Uma abordagem envolve o uso de plug-ins ou scripts que alteram dinamicamente a cor do texto ou trocam imagens/ícones predefinidos. Essas ferramentas normalmente calculam o brilho médio dos pixels cobertos no plano de fundo do elemento pai e ajustam o texto de acordo. Por exemplo, se o fundo for escuro, o texto ficará branco ou os ícones mudarão para uma versão mais clara.

Além disso, esses scripts consideram casos em que o elemento pai pode não ter um fundo definido e pesquisam recursivamente para o pai mais próximo com um histórico definido.

Recursos disponíveis

O World Wide Web Consortium (W3C) e outros especialistas do setor fornecem recursos valiosos e recomendações sobre contraste de cores para acessibilidade:

• W3C - Certifique-se de que as combinações de cores de primeiro plano e de fundo forneçam contraste suficiente
• Calculando o brilho percebido de uma cor

Implementação prática

O algoritmo W3C fornece uma abordagem direta para calcular contrastes de primeiro e segundo plano com base em RGB valores de cores. O brilho de uma cor é determinado usando a seguinte fórmula:

brightness = (0.299 * R   0.587 * G   0.114 * B) / 1000

Onde R, G e B representam o vermelho, componentes verde e azul da cor, respectivamente.

Exemplo Implementação

O código JavaScript a seguir demonstra a implementação do algoritmo W3C para ajustar a cor do texto com base no brilho do fundo:

const rgb = [255, 0, 0];

// Randomly update colors for demonstration
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update RGB values
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // Calculate brightness using the W3C formula
  const brightness = Math.round(((parseInt(rgb[0]) * 299)  
                       (parseInt(rgb[1]) * 587)  
                       (parseInt(rgb[2]) * 114)) / 1000);

  // Set text and background colors based on brightness
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb('   rgb[0]   ','   rgb[1]   ','   rgb[2]   ')';
  $('#bg').css('color', textColour);
  $('#bg').css('background-color', backgroundColour);
}

Conclusão

Ao utilizar plug-ins, scripts e práticas recomendadas do setor, os designers podem automatizar o ajuste da cor do texto e da aparência dos ícones com base no brilho do fundo. Essa abordagem melhora a acessibilidade, melhora o apelo visual e se alinha às Diretrizes de Acessibilidade para Conteúdo da Web (WCAG).