sRGB begrijpen in contrastberekening

1. Wat is sRGB?

sRGB (Standard Red Green Blue) is de standaard kleurruimte voor het web, gedefinieerd door de internationale standaard IEC 61966-2-1. In 1996 gecreëerd door HP en Microsoft, werd sRGB ontworpen om een consistente kleurervaring te bieden op monitoren, printers en digitale camera's. WCAG 2.2 schrijft sRGB voor als de referentiekleurruimte voor het berekenen van relatieve luminantie en contrastverhoudingen. Dit betekent dat elke contrastberekening de sRGB-transferfunctie moet gebruiken voor vergelijkbare resultaten. De keuze voor sRGB zorgt ervoor dat toegankelijkheidsmetingen consistent zijn ongeacht welke tool de berekening uitvoert.

2. De sRGB-transferfunctie

Beeldschermen stralen licht niet evenredig uit aan de opgeslagen kleurwaarden. Een pixelwaarde van 128 (van 255) produceert niet de helft van het licht van een pixel op 255. Deze niet-lineaire relatie heet gamma-encoding, en de sRGB-transferfunctie is de specifieke curve die dit omkeert. Voor nauwkeurige contrastberekening moet elk kleurkanaal (R, G, B) eerst worden gelineariseerd. De sRGB-specificatie definieert een stuksgewijze functie: waarden gelijk aan of onder 0,04045 worden gedeeld door 12,92, terwijl hogere waarden de formule ((waarde + 0,055) / 1,055) tot de macht 2,4 gebruiken. Deze linearisatiestap is cruciaal. Zonder zou middentonen significant onjuiste luminantiewaarden produceren.

3. sRGB vs andere kleurruimtes

Moderne beeldschermen ondersteunen steeds vaker bredere kleurruimtes zoals Display P3 (Apple-apparaten) en Adobe RGB (professionele fotografie). Deze ruimtes kunnen levendigere kleuren weergeven dan sRGB. Echter, WCAG-contrastberekeningen gebruiken altijd sRGB, zelfs wanneer het scherm een breder gamut ondersteunt. Kleuren gespecificeerd in CSS met P3 of andere ruimtes worden voor contrastmeting omgezet naar hun sRGB-equivalenten. Dit is een bewuste keuze: sRGB biedt een universele baseline. In de praktijk betekent dit dat een kleurenpaar dat het WCAG-contrast in sRGB doorstaat, ook leesbaar zal zijn op displays met een breder gamut. Als u ontwerpt in Display P3 of Adobe RGB, controleer altijd uw contrastverhoudingen met de op sRGB gebaseerde WCAG-formule.

4. Praktische implicaties voor ontwerpers

Het begrijpen van sRGB is op meerdere manieren belangrijk voor dagelijks ontwerpwerk. Ten eerste: specificeer uw ontwerpkleuren altijd als sRGB hex-waarden (#RRGGBB) voor webprojecten — dit is wat browsers standaard renderen en wat toegankelijkheidstools evalueren. Ten tweede: wees u ervan bewust dat kleurwaarden uit ontwerptools zoals Figma of Sketch mogelijk andere kleurprofielen gebruiken. Zorg bij het exporteren voor webgebruik dat u in het sRGB-kleurprofiel werkt. Ten derde: de sRGB-gammacurve betekent dat contrastveranderingen niet lineair zijn. Kleine aanpassingen aan zeer donkere of lichte kleuren hebben een groter effect op de contrastverhouding. Werk met de contrastchecker open om real-time veranderingen te zien.

Probeer dit voorbeeld →