Comprendre le sRGB dans le Calcul du Contraste

1. Qu'est-ce que le sRGB?

sRGB (Standard Red Green Blue) est l'espace colorimétrique par défaut du web, défini par la norme internationale IEC 61966-2-1. Créé en 1996 par HP et Microsoft, sRGB a été conçu pour fournir une expérience couleur cohérente sur les moniteurs, imprimantes et appareils photo numériques. WCAG 2.2 impose sRGB comme espace colorimétrique de référence pour le calcul de la luminance relative et des ratios de contraste. Cela signifie que chaque calcul de contraste doit utiliser la fonction de transfert sRGB pour produire des résultats comparables. Le choix de sRGB garantit que les mesures d'accessibilité sont cohérentes quel que soit l'outil utilisé.

2. La Fonction de Transfert sRGB

Les écrans n'émettent pas de lumière proportionnellement aux valeurs de couleur stockées. Une valeur de pixel de 128 (sur 255) ne produit pas la moitié de la lumière d'un pixel à 255. Cette relation non linéaire s'appelle l'encodage gamma, et la fonction de transfert sRGB est la courbe spécifique qui l'inverse. Pour calculer le contraste avec précision, chaque canal de couleur (R, G, B) doit d'abord être linéarisé. La spécification sRGB définit une fonction par morceaux : les valeurs inférieures ou égales à 0,04045 sont divisées par 12,92, tandis que les valeurs supérieures utilisent la formule ((valeur + 0,055) / 1,055) élevée à la puissance 2,4. Cette étape de linéarisation est critique. Sans elle, les couleurs de tons moyens produiraient des valeurs de luminance significativement incorrectes.

3. sRGB vs Autres Espaces Colorimétriques

Les écrans modernes prennent de plus en plus en charge des espaces colorimétriques plus larges comme Display P3 (appareils Apple) et Adobe RGB (photographie professionnelle). Ces espaces peuvent représenter des couleurs plus vives que sRGB. Cependant, les calculs de contraste WCAG utilisent toujours sRGB, même quand l'écran supporte un gamut plus large. Les couleurs spécifiées en CSS avec P3 ou d'autres espaces sont mappées vers leurs équivalents sRGB pour la mesure du contraste. C'est un choix délibéré : sRGB fournit une base universelle. En pratique, une paire de couleurs qui passe le contraste WCAG en sRGB sera également lisible sur les écrans à gamut plus large. Si vous concevez en Display P3 ou Adobe RGB, vérifiez toujours vos ratios avec la formule WCAG basée sur sRGB.

4. Implications Pratiques pour les Designers

Comprendre le sRGB est important pour le travail de design quotidien. Premièrement, spécifiez toujours vos couleurs en valeurs hexadécimales sRGB (#RRGGBB) pour les projets web — c'est ce que les navigateurs affichent par défaut et ce que les outils d'accessibilité évaluent. Deuxièmement, sachez que les valeurs de couleur des outils comme Figma ou Sketch peuvent utiliser des profils différents. Lors de l'export pour le web, assurez-vous de travailler dans le profil sRGB. Troisièmement, la courbe gamma sRGB signifie que les changements de contraste ne sont pas linéaires. De petits ajustements sur des couleurs très foncées ou très claires ont un effet plus important sur le ratio que le même ajustement sur des couleurs moyennes. Travaillez avec le vérificateur de contraste ouvert pour voir les changements en temps réel.

Essayer cet exemple →