Catégorie INSPIRATIONS

La vigie du numérique #020

Author Marjorie Gaboriau Published on 3 min de lecture

Dans cette veille, on prend de la hauteur et on vous partage tous les mois les inspirations de notre équipe, les pistes de réflexions, les idées nouvelles, mais aussi nos trucs et astuces sur l’UX, l’UI et le développement web.

Site Internet

Drake Related

drake

Le site internet du rappeur Drake où les utilisateurs plongent dans son univers, au sens propre, puisqu’ils sont invités à se balader chez lui et découvrir ainsi tous ses articles en vente.

Expérience web

WikiSoundData

À ce jour, Wikipedia existe en près de 300 langues et pour un total d’envrion 28 000 000 articles. Stephen LaPorte et Mahmoud Hashemi ont voulu montrer l’évolution de cet outil par un moyen simple : la mise en musique graphique. Chaque mise à jour utilisateur, selon son volume et sa pertinence, génère une image et un son déterminé. Un expérience envoûtante.

Expérience interactive

Chasing Stars in Shadow – Joon Moon

Pourtant vieille de 2021, cette installation interactive nous fait toujours autant rêver.

Outil

Pollinator Pathmaker

Un outil pour voir le monde comme les insectes pollinisateurs et réfléchir à l’organisation de ses espaces verts avec un biais cognitif différent.

Outil

Topo Export

TopoExport est une application permettant de créer des cartes en utilisant les données open source de l’IGN. L’outil ainsi de télécharger des fonds de plans 2D et des topographies 3D aux formats les plus courants.

Ressources

Iconscout

Outil

Atmos

Un outil pour créer facilement des palettes de couleurs.

Dev Tips du mois

Noir ou blanc ? Assurer une lisibilité optimale sur une couleur configurable par l’utilisateur

Dans les interfaces que nous développons nous sommes fréquemment confronté à des textes ayant en arrière plan une couleur configurable par l’utilisateur. Cela peut conduire à un problème de lisibilité, la couleur du texte n’étant pas assez contrasté avec la couleur de fond.

Pour y remédier, une solution pratique est de calculer la luminosité relative de la couleur de fond afin de choisir la couleur de texte la mieux adaptée (blanche ou noire). Afin d’obtenir cette valeur nous utiliserons la formule présente dans https://www.w3.org/TR/WCAG21/#dfn-relative-luminance provenant des règles d’accessibilité WCAG 2.1.

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

  • R, G et B représentent les valeurs de chaque composante couleur (rouge, vert et bleu) de la couleur en question, exprimées en décimales dans l’intervalle [0, 1].
  • L exprime la luminosité relative de la couleur, où L = 0 représente le noir et L = 1 représente le blanc.

Ce qui donne une fois convertie en Typescript:

const getLuminance = (r: number, g: number, b: number) => {
  const [lumR, lumG, lumB] = [r, g, b].map((value) => {
		
    const sRGB = value / 255;

    return sRGB <= 0.03928 ? sRGB / 12.92 : ((sRGB + 0.055) / 1.055) ** 2.4;
  });

  return 0.2126 * lumR + 0.7152 * lumG + 0.0722 * lumB;
};Langage du code : JavaScript (javascript)

Cette formule permet ensuite de choisir la couleur la plus adaptée :

const textColor = useMemo(() => {
		// hexToRGB return an object with value for red, green and blue
		// https://learnersbucket.com/examples/interview/convert-hex-color-to-rgb-in-javascript/
    const rgb = hexToRGB(hexColor);
    const luminance = getLuminance(rgb?.red, rgb?.green, rgb?.blue);
    return luminance < 0.5 ? "#FFFFFF" : "#000000";
  }, [hexColor]);Langage du code : JavaScript (javascript)

Comparer deux couleurs :

Pour obtenir le contraste entre deux couleurs il suffit d’utiliser la fonction suivante :

Contrast Ratio = (Luminance1 + 0.05) / (Luminance2 + 0.05) où 0.05 a pour rôle d’évite les problème de division par zéro :

const calculateContrast = (hexColor1: string, hexColor2: string) => {
  const rgbColor1 = hexToRGB(hexColor1);
  const rgbColor2 = hexToRGB(hexColor2);

  const luminance1 = getLuminance(
    rgbColor1.red,
    rgbColor1.green,
    rgbColor1.blue
  );
  const luminance2 = getLuminance(
    rgbColor2.red,
    rgbColor2.green,
    rgbColor2.blue
  );

  // contrastRatio = (Luminance1 + 0.05) / (Luminance2 + 0.05)
  const contrastRatio =
    (Math.max(luminance1, luminance2) + 0.05) /
    (Math.min(luminance1, luminance2) + 0.05);
  return contrastRatio;
};Langage du code : JavaScript (javascript)

Vous trouverez notre exemple ici : https://codesandbox.io/s/keep-text-readable-8yqqfh?file=/src/App.tsx

Et la même chose en CSS https://codepen.io/Hancock123/pen/vYLxowG (par un gentil développeur inconnu)

WCAG Contrast : https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

Vous devriez aussi aimer