Adapter l'apparence du texte à la luminosité de l'arrière-plan pour l'accessibilité et l'esthétique

Dans les paysages numériques d'aujourd'hui, garantir l'accessibilité et l'attrait visuel est de la plus haute importance. Un élément crucial est le contraste entre le texte et son arrière-plan, en particulier pour les utilisateurs malvoyants. Pour résoudre ce problème, les concepteurs emploient souvent des techniques qui ajustent l'apparence du texte en fonction de la luminosité de l'arrière-plan.

Une approche consiste à utiliser des plug-ins ou des scripts qui modifient dynamiquement la couleur du texte ou échangent des images/icônes prédéfinies. Ces outils calculent généralement la luminosité moyenne des pixels couverts dans l'arrière-plan de l'élément parent et ajustent le texte en conséquence. Par exemple, si l'arrière-plan est sombre, le texte deviendra blanc ou les icônes passeront à une version plus claire.

De plus, ces scripts prennent en compte les cas où l'élément parent peut ne pas avoir d'arrière-plan défini et effectuent une recherche récursive. pour le parent le plus proche ayant un parcours défini.

Ressources disponibles

Le World Wide Web Consortium (W3C) et d'autres experts du secteur fournissent des informations précieuses ressources et recommandations sur le contraste des couleurs pour l'accessibilité :

• W3C – Assurer que les combinaisons de couleurs de premier plan et d'arrière-plan offrent un contraste suffisant
• Calcul de la luminosité perçue d'une couleur

Mise en œuvre pratique

L'algorithme du W3C fournit une approche simple pour calculer les contrastes de premier plan et d'arrière-plan en fonction de la couleur RVB. valeurs. La luminosité d'une couleur est déterminée à l'aide de la formule suivante :

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

Où R, G et B représentent le rouge, composants vert et bleu de la couleur, respectivement.

Exemple Implémentation

Le code JavaScript suivant démontre l'implémentation de l'algorithme du W3C pour ajuster la couleur du texte en fonction de la luminosité de l'arrière-plan :

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

Conclusion

En utilisant des plugins, des scripts et les meilleures pratiques du secteur, les concepteurs peuvent automatiser l'ajustement de la couleur du texte et de l'apparence des icônes en fonction de la luminosité de l'arrière-plan. Cette approche améliore l'accessibilité, améliore l'attrait visuel et s'aligne sur les directives pour l'accessibilité du contenu Web (WCAG).