Contrastverhouding en leesbare tekst
Grijs #767676 op wit heeft 4.54:1 contrast en voldoet aan het WCAG-minimum voor gewone tekst. Eén stap lichter, #777777, geeft 4.48:1 en voldoet niet.
Sleep om te draaien. Scroll of knijp om te zoomen.
Relatieve luminantie
Om te bepalen of tekst leesbaar is gebruiken de Web Content Accessibility Guidelines geen tint of HSL-lichtheid, maar relatieve luminantie. Dat getal loopt van 0 voor zwart tot 1 voor wit en volgt hoeveel licht een kleur naar het oog stuurt. WCAG 2.2 definieert die in twee stappen. Eerst wordt elk kanaal door 255 gedeeld, zodat je een getal van 0 tot 1 krijgt, en daarna wordt de sRGB-kromme ongedaan gemaakt: bij maximaal 0.04045 deel je door 12.92; anders bereken je ((waarde + 0.055) / 1.055) tot de macht 2.4. Daarna worden de drie uitkomsten gewogen en opgeteld: L = 0.2126 R + 0.7152 G + 0.0722 B.
De gewichten verklaren veel. Groen draagt meer dan 70% van het totaal, blauw nauwelijks 7%. Daarom heeft zuiver blauw #0000ff een luminantie van maar 0.0722 en zuiver geel, rood plus groen, 0.9278. De specificatie vermeldt ook een stukje geschiedenis: vóór mei 2021 stond de grens op 0.03928, overgenomen uit een ouder document. Dat werd gecorrigeerd naar 0.04045. Volgens WCAG heeft die wijziging geen praktisch effect op de resultaten.
Contrastverhouding
De contrastverhouding vergelijkt luminanties: (L1 + 0.05) / (L2 + 0.05), met L1 lichter en L2 donkerder. De 0.05 staat voor een beetje strooilicht dat altijd het oog bereikt en houdt de verhouding voor zwart eindig. De verhouding loopt van 1:1, een kleur tegen zichzelf, tot 21:1, zwart op wit: (1 + 0.05) / (0 + 0.05) = 21. Voor #767676 op wit is de luminantie 0.1812, dus de verhouding is 1.05 / 0.2312 = 4.54.
Hier is de volledige berekening voor blauw #2273c3 uit hoofdstuk 2, rgb(34 115 195). Gedeeld door 255 zijn de kanalen 0.1333, 0.4510 en 0.7647. Alle drie liggen boven 0.04045 en gaan dus door de machtsformule: 0.0160, 0.1714 en 0.5457. Na weging komt 0.0034 van rood, 0.1226 van groen en 0.0394 van blauw. Samen is de luminantie 0.1654. Op wit is de verhouding 1.05 / 0.2154 = 4.87. Dit blauw voldoet dus aan AA voor gewone tekst op een witte pagina. Op zwart is het 0.2154 / 0.05 = 4.31, net te weinig.
De grenswaarden
WCAG 2.2 maakt van de verhouding grenzen voor voldoende of onvoldoende. Succescriterium 1.4.3 op niveau AA vraagt minstens 4.5:1 voor gewone en 3:1 voor grote tekst. Groot betekent minstens 18 punt of 14 punt vet; volgens WCAG ongeveer 1.5 em en 1.2 em vet bij gangbare tekstlettertypen. Criterium 1.4.6 op niveau AAA vraagt 7:1 en 4.5:1. Criterium 1.4.11 vraagt 3:1 voor de delen van knoppen, velden en pictogrammen die mensen moeten kunnen zien. Rood #ff0000 op wit geeft 4.00:1: goed voor grote koppen, niet voor gewone tekst. Blauw #0000ff geeft 8.59:1 en voldoet overal.
De formule geeft nog iets nuttigs. Een kleur met luminantie ongeveer 0.179 contrasteert even sterk tegen wit en zwart: circa 4.58:1. Is de kleur donkerder, dan leest witte tekst beter; is hij lichter, dan leest zwarte tekst beter. Het modelpaneel toont beide verhoudingen en noemt de betere keuze.
Contrastverhouding = (L1 + 0.05) / (L2 + 0.05). Gewone tekst vraagt 4.5:1, grote tekst 3:1, gewone tekst op AAA 7:1.
| AA, gewone tekst (1.4.3) | 4.5:1 |
| AA, grote tekst (1.4.3) | 3:1 |
| AAA, gewone tekst (1.4.6) | 7:1 |
| Pictogrammen en formulierranden (1.4.11) | 3:1 |
| Grote tekst | 18 pt of 14 pt vet |
| Zwart op wit | 21:1, het maximum |
- Relatieve luminantie: lineariseer elk kanaal, dan 0.2126 R + 0.7152 G + 0.0722 B.
- Contrastverhouding = (L1 + 0.05) / (L2 + 0.05), van 1:1 tot 21:1.
- AA: 4.5:1 gewone tekst, 3:1 grote tekst en interface-elementen. AAA: 7:1 gewone tekst.
- #767676 op wit geeft 4.54:1 en voldoet; #ff0000 geeft 4.00:1 en voldoet niet voor gewone tekst.
- Wat is de contrastverhouding van zwart op wit?
- Wat is de laagste contrastverhouding?
- Wat is de contrastverhouding van #767676 op wit, op 2 decimalen? (Luminantie 0.1812.)
- Welke minimale contrastverhouding vraagt WCAG 2.2 AA voor gewone tekst?
- Wat is de contrastverhouding van zuiver rood #ff0000 op wit, op 2 decimalen? (Luminantie 0.2126.)
- Rood #ff0000 op wit (4.00:1) is geschikt voor...
- Alleen grote koppen
- Gewone tekst op AA
- Gewone tekst op AAA
- Helemaal niets
- Welk kanaal weegt het zwaarst bij relatieve luminantie?
- Groen
- Rood
- Blauw
- Allemaal gelijk
- Wat telt als grote tekst bij WCAG?
- 18 pt of 14 pt vet
- 12 pt vet
- 16 px normaal
- Elke kop
- Welke verhouding vraagt WCAG voor pictogrammen en veldranden (1.4.11)?
- Gele tekst #ffff00 op wit heeft een verhouding van ongeveer 1.07:1. Wat betekent dat?
- Het is bijna onleesbaar
- Het voldoet aan AA
- Het voldoet aan AAA
- Het is het best mogelijke
- Welke grens gebruikte WCAG vóór mei 2021 in plaats van 0.04045?
- 0.03928
- 0.05
- 12.92
- 0.055
Bronnen van deze cursus (14)
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
- contrast ratio (L1 + 0.05) / (L2 + 0.05)
- range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
- 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
- W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
- OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
- OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
- Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
- The Newton Project (University of Oxford)
- Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
- History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
- LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
- RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
- University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).
Geraadpleegd: 2026-10-17