Adaptación de la apariencia del texto al brillo del fondo para lograr accesibilidad y estética

En los paisajes digitales actuales, garantizar la accesibilidad y el atractivo visual es de suma importancia. Un elemento crucial es el contraste entre el texto y el fondo, especialmente para usuarios con baja visión. Para solucionar este problema, los diseñadores suelen emplear técnicas que ajustan la apariencia del texto según el brillo del fondo.

Un enfoque implica el uso de complementos o scripts que cambian dinámicamente el color del texto o intercambian imágenes/iconos predefinidos. Estas herramientas normalmente calculan el brillo promedio de los píxeles cubiertos en el fondo del elemento principal y ajustan el texto en consecuencia. Por ejemplo, si el fondo es oscuro, el texto se volverá blanco o los íconos cambiarán a una versión más clara.

Además, estos scripts consideran casos en los que el elemento principal puede carecer de un fondo definido y realizan búsquedas recursivas. para el padre más cercano con antecedentes definidos.

Recursos disponibles

El World Wide Web Consortium (W3C) y otros expertos de la industria brindan valiosos recursos y recomendaciones sobre el contraste de color para accesibilidad:

• W3C: asegúrese de que las combinaciones de colores de primer plano y de fondo proporcionen suficiente contraste
• Cálculo del brillo percibido de un color

Implementación práctica

El algoritmo W3C proporciona un enfoque sencillo para calcular los contrastes de primer plano y fondo basándose en valores de color RGB. El brillo de un color se determina mediante la siguiente fórmula:

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

Donde R, G y B representan el rojo, componentes verde y azul del color, respectivamente.

Ejemplo de implementación

El siguiente código JavaScript demuestra la implementación del algoritmo W3C para ajustar el color del texto según el brillo del fondo. :

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);
}

Conclusión

Al utilizar complementos, scripts y las mejores prácticas de la industria, los diseñadores pueden automatizar el ajuste del color del texto y la apariencia de los íconos según el brillo del fondo. Este enfoque mejora la accesibilidad, mejora el atractivo visual y se alinea con las Pautas de Accesibilidad al Contenido Web (WCAG).