Ajustar el color del texto según el brillo del fondo

Para lograr una legibilidad óptima a menudo es necesario ajustar el color del texto para que contraste con el fondo. En este caso, el efecto deseado es cambiar dinámicamente el color del texto o las imágenes según el nivel de brillo de los píxeles del fondo.

Enfoques para el ajuste del contraste

• Cálculo de luminosidad: Calcula el promedio ponderado de los canales de color (RGB) para determinar el nivel de brillo.
• Relación de contraste: Compara el brillo del texto y el fondo para garantizar un contraste suficiente para la accesibilidad visual.

Recursos disponibles

• W3C Contrast Checker: The World Wide Web Consortium ( W3C) proporciona un algoritmo estandarizado para calcular el brillo de un color y garantizar un contraste adecuado.
• Calcular el brillo del color: Explore recursos en línea que ofrecen funciones para cuantificar el brillo de un color determinado.

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 garantiza una selección de color de texto visualmente óptima según el brillo del fondo.