Base de connaissances
Abonné:
- Organisé par
-
-
Calcul du contraste entre 2 couleurs
-
Calcul du contraste entre 2 couleurs
Salut à tous,
Je profite de l’apparition il y a quelques jours de 2 nouvelles fonctions power FX pour vous partager une “petite” formule qui vous permettra de calculer le contraste entre 2 couleurs.
Alors ok ce n’est pas la formule qui sera la plus utile au monde, mais moi elle me permet d’afficher le contraste entre le choix des couleurs parmis celles de la charte graphique de l’entreprise, et ainsi de permettre un choix de couleur qui respecte les contrastes minimaux nécessaires à l’accessibilité.
Alors les 2 nouvelles formules power FX sont Hex2Dec(…) et Dec2Hex(…). La première converti une chaine représentant un nombre hexa en décimal, la seconde fait l’inverse. Je suis sur qu’elles auront pas mal d’usages, mais moi je m’en suis servi pour jouer un peu avec les couleurs et notamment pour calculer le contraste entre 2 couleurs.
Alors voici la formule, qui sera rendu plus lisible cette année certainement après l’arrivée des fonctions paramétrables.
// Calcul du contraste entre 2 couleurs selon la procédure du WCAG https://www.w3.org/TR/WCAG20-TECHS/G18.html#G18-procedurenRound(n With(n { //définition des 2 couleurs dont on souhaite analyser le contraste (en hexa sans le #)n hexColor1:"aaee33";n hexColor2:"bb11ff"n };n With(n {n c1: // décomposition de la 1ère couleur hexa en valeurs RGB décimalesn With(n {red:Int(Hex2Dec(hexColor1)/Hex2Dec("10000"))};n With(n {green:Int(Hex2Dec(hexColor1)/Hex2Dec("100")) - Hex2Dec("100")*red};n With(n {blue:Int(Hex2Dec(hexColor1)/Hex2Dec("1")) - Hex2Dec("10000")*red - Hex2Dec("100")*green};n {R:red;G:green;B:blue}n )n )n );n c2: // décomposition de la 2nde couleur hexa en valeurs RGB décimales n With(n {red:Int(Hex2Dec(hexColor2)/Hex2Dec("10000"))};n With(n {green:Int(Hex2Dec(hexColor2)/Hex2Dec("100")) - Hex2Dec("100")*red};n With(n {blue:Int(Hex2Dec(hexColor2)/Hex2Dec("1")) - Hex2Dec("10000")*red - Hex2Dec("100")*green};n {R:red;G:green;B:blue}n )n )n )n };n With(n {n L1: //calcul de la luminance de la première couleurn With(n {RsRGB:c1.R/255;GsRGB:c1.G/255;BsRGB:c1.B/255};n With(n {n RR:If(RsRGB<=0,03928; RsRGB /12,92 ; ((RsRGB +0,055)/1,055) ^ 2,4);n GG:If(GsRGB<=0,03928; GsRGB /12,92 ; ((GsRGB +0,055)/1,055) ^ 2,4);n BB:If(BsRGB<=0,03928; BsRGB /12,92 ; ((BsRGB +0,055)/1,055) ^ 2,4)n };n 0,2126 * RR + 0,7152 * GG + 0,0722 * BBn )n );n L2: //calcul de la luminance de la seconde couleurn With(n {RsRGB:c2.R/255;GsRGB:c2.G/255;BsRGB:c2.B/255};n With(n {n RR:If(RsRGB<=0,03928; RsRGB /12,92 ; ((RsRGB +0,055)/1,055) ^ 2,4);n GG:If(GsRGB<=0,03928; GsRGB /12,92 ; ((GsRGB +0,055)/1,055) ^ 2,4);n BB:If(BsRGB<=0,03928; BsRGB /12,92 ; ((BsRGB +0,055)/1,055) ^ 2,4)n };n 0,2126 * RR + 0,7152 * GG + 0,0722 * BBn )n )n };n //Calcul du contrasten (Max(L1; L2) + 0,05) / (Min(L1; L2) + 0,05)n )n )n );n 2n)PostID=EKeI1pemzK2De5B
-
0 Réponses
Désolé, aucune réponse n’a été trouvée.
Connectez-vous pour répondre.