Ajustando a cor do texto com base no brilho do plano de fundo

Alcançar a legibilidade ideal geralmente requer o ajuste da cor do texto para contrastar com o plano de fundo. Nesse caso, o efeito desejado é alternar dinamicamente a cor do texto ou das imagens com base no nível de brilho dos pixels de fundo.

Abordagens para ajuste de contraste

• Cálculo de luminosidade: Calcule a média ponderada dos canais de cores (RGB) para determinar o nível de brilho.
• Contraste Proporção: Compare o brilho do texto e do fundo para garantir contraste suficiente para acessibilidade visual.

Recursos disponíveis

• Verificador de contraste W3C: O World Wide Web Consortium (W3C) fornece um algoritmo padronizado para calcular o brilho de uma cor e garantir contraste.
• Cálculo do brilho da cor: Explore recursos online que oferecem funções para quantificar o brilho de uma determinada cor.

Algoritmo de contraste W3C

const rgb = [255, 0, 0];

function setContrast() {
  // Calculate brightness
  const brightness = Math.round(((parseInt(rgb[0]) * 299)  
                      (parseInt(rgb[1]) * 587)  
                      (parseInt(rgb[2]) * 114)) / 1000);
  // Set text color
  const textColour = (brightness > 125) ? 'black' : 'white';
  // Set background color
  const backgroundColour = 'rgb('   rgb[0]   ','   rgb[1]   ','   rgb[2]   ')';

  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

Este algoritmo garante uma seleção visualmente ideal da cor do texto com base no brilho do fundo.