Artikel
Een toegankelijk kleurenpalet extraheren uit een afbeelding
Een foto of merkasset bevat vaak het zaad van een volledig kleursysteem. Dat zaad extraheren, het vormgeven tot een bruikbaar palet, en het vervolgens verifiëren tegen toegankelijkheidsstandaarden vereist drie afzonderlijke stappen. Dit artikel behandelt elk van hen in volgorde: hoe paletextractie onder de motorkap werkt, hoe kleuren te selecteren en aan te passen voor praktisch gebruik, hoe contrast te controleren tegen WCAG-drempelwaarden, en hoe paren te ontdekken die voor kleurenblinde gebruikers samenklappen.
Hoe een palet wordt geëxtraheerd: pixelsampling en kleurkwantisatie
Elke digitale afbeelding is een raster van pixels, elk met een kleurwaarde in een ruimte zoals RGB. Een paletextractor inspecteert niet elke pixel afzonderlijk: een foto van 2 megapixel bevat 2 miljoen datapunten, wat traag te verwerken zou zijn en duizenden licht verschillende tinten zou opleveren in plaats van een bruikbare set. In plaats daarvan samplet de tool het pixelraster met een regelmatig interval en verzamelt een representatieve subset. Die subset wordt vervolgens ingevoerd in een kleurkwantisatie-algoritme. De meest gebruikte aanpak groepeert vergelijkbare kleuren samen met een clusteringmethode, ook wel median-cut of k-means-stijl partitionering genoemd. Het algoritme plaatst elk gesamplete pixel in een van een vast aantal emmers op basis van kleurovereenkomst, en berekent vervolgens de gemiddelde kleur van elk emmer. Het resultaat is een kleine lijst, doorgaans 4 tot 16 kleuren, die samen de dominante visuele tinten in de afbeelding vertegenwoordigen. Kleuren die alleen in kleine geïsoleerde gebieden voorkomen, kunnen worden gemist, wat normaal gedrag is en geen fout.
Van ruwe dominante kleuren naar een bruikbaar palet
De ruwe uitvoer van een paletextractor is een lijst van kleuren gerangschikt op frequentie, maar frequentie alleen maakt geen palet. Een foto van een bos geeft verschillende groenen terug die te gelijkaardig zijn om in een UI als afzonderlijke accenten te gebruiken. Het praktische werk is selecteren en aanpassen. Begin met het identificeren van één kleur als je primaire kleur: de kleur die het meest onderscheidend en het minst neutraal is. Zoek uit de overige kleuren naar maximaal twee die contrasteren met de primaire kleur en met elkaar. Die worden je accenten. Al het andere, inclusief de onverzadigde tinten die de extractor vaak teruggeeft uit schaduwen en middentonen, kan dienen als neutrale kleuren voor achtergronden en randen. Zodra je deze ruwe structuur hebt, zul je bijna zeker individuele waarden moeten aanpassen. De color-converter tool laat je elke kleur bekijken in hex, RGB en HSL. HSL is hier bijzonder nuttig: je kunt de tint constant houden en de helderheid of verzadiging aanpassen om een nauwere of lossere familie te maken zonder de kleurfamilie te verlaten.
Contrast controleren: WCAG-drempelwaarden voor leesbare tekst
Zodra je kandidaatkleuren hebt voor tekst en achtergrond, moet je controleren of de combinatie leesbaar is. De Web Content Accessibility Guidelines (WCAG) definiëren een contrastverhouding voor dit doel. De verhouding vergelijkt de relatieve luminantie van twee kleuren: een waarde van 1:1 betekent geen contrast (dezelfde kleur op dezelfde kleur), en 21:1 is het maximum (zwart op wit). WCAG 2.1 Niveau AA vereist een verhouding van ten minste 4,5:1 voor gewone tekst, en 3:1 voor grote tekst (18pt of 14pt vet). Niveau AAA stelt hogere drempelwaarden van 7:1 en 4,5:1 respectievelijk. Je hoeft de luminantie niet met de hand te berekenen. Het kernpunt is dat een kleurpaar dat er goed uitziet voor jou bij goed licht mogelijk onder de 4,5:1 valt op een scherm, en de richtlijn bestaat juist voor dat geval. Na het extraheren en aanpassen van kleuren, test elk tekst-op-achtergrond-paar dat je van plan bent te gebruiken. Een middeltoon grijs dat goed leest op wit kan volledig mislukken op een lichtbeige achtergrond uit je geëxtraheerde palet.
Kleurenblindheid: simuleren hoe paren eruit zien voor getroffen gebruikers
Ongeveer 1 op 12 mannen en 1 op 200 vrouwen hebben een bepaalde vorm van kleurvisiedeficiëntie. Het meest voorkomende type is deuteranopie (verminderde gevoeligheid voor groen), gevolgd door protanopie (verminderde gevoeligheid voor rood). Tritanopie (verminderde gevoeligheid voor blauw-geel) is zeldzamer. Voor elk type mapt het visuele systeem bepaalde golflengten naar dezelfde waargenomen kleur die niet-getroffen kijkers als afzonderlijk zien. Het praktische probleem voor een palet is dat twee kleuren die er onder normale visie duidelijk anders uitzien, voor een kleurenblinde gebruiker kunnen samenklappen tot dezelfde toon, waardoor ze nutteloos worden voor het weergeven van onderscheid, bijvoorbeeld alleen rood en groen gebruiken om succes en fout aan te geven. Het uitvoeren van een kleurenblindheidsimulatie toont je hoe het palet eruitziet wanneer de getroffen kanalen worden samengedrukt. De paren die samenklappen tot een bijna identiek grijs of bruin zijn de paren om te heroverwegen: verhoog ofwel het helderheidsverschil tussen hen zodat het contrast behouden blijft, zelfs zonder het tint-onderscheid, of voeg een secundaire aanwijzing toe (vorm, label, patroon) zodat kleur niet het enige signaal is.
Lokaal doen: color-palette, color-blindness en color-converter
Alle drie de stappen die in dit artikel worden beschreven, kunnen worden voltooid zonder je afbeelding of merkkleuren naar een server te sturen. De color-palette tool draait volledig in de browser: je sleept een afbeelding erop, de tool samplet de pixels lokaal en geeft de dominante kleuren terug als hex-waarden. Er wordt geen bestand verzonden. De color-converter tool accepteert een hex-code en toont dezelfde kleur in RGB en HSL zodat je gerichte aanpassingen kunt maken aan helderheid of verzadiging terwijl je in dezelfde tintfamilie blijft. Zowel de hex als de geconverteerde waarden bestaan alleen op de pagina. De color-blindness tool werkt andersom: je sleept een afbeelding erop en de tool rendert deuteranopie-, protanopie- en tritanopie-simulaties van die afbeelding, berekend in de browser. Wil je een palet controleren in plaats van een foto, exporteer of maak dan eerst een schermafbeelding van je kleurstalen en sleep die in de simulator. Door de drie tools in volgorde te gebruiken, extraheren uit de afbeelding, aanpassen in color-converter, en vervolgens een afbeelding van de kleurstalen exporteren en verifiëren in color-blindness, wordt de volledige workflow gedekt die hierboven is beschreven. Je afbeelding blijft gedurende het hele proces op je apparaat, wat belangrijk is als de bronafbeelding niet-gepubliceerde branding of de nog niet uitgebrachte identiteit van een klant bevat.
Tools in dit artikel
- Kleurpalet-extractorHaal dominante kleuren uit een afbeelding als HEX-stalen. Kopieer elke kleur. Geen upload.
- KleurenblindheidsimulatorSimuleer protanopie, deuteranopie, tritanopie en achromatopsie op een afbeelding. Geen upload.
- KleurconverterConverteer kleuren tussen HEX, RGB, HSL, HSV en CMYK. WCAG-contrastchecker inbegrepen. Geen upload.
- KleurschemageneratorGenereer complementaire, analoge, triadische, tetradische en monochromatische paletten uit een basiskleur. Geen upload.
Veelgestelde vragen
Hoeveel kleuren geeft een paletextractor doorgaans terug?
De meeste tools geven standaard tussen 5 en 16 kleuren terug, hoewel velen je het aantal laten instellen. Minder kleuren teruggeven betekent dat het algoritme meer pixels moet groeperen, wat afzonderlijke maar vergelijkbare tinten kan samenvoegen. Meer kleuren teruggeven kan bijna-duplicaten produceren die moeilijk afzonderlijk te gebruiken zijn. Voor een UI-palet is 6 tot 8 kleuren doorgaans een praktisch startpunt.
Kan een uit een afbeelding geëxtraheerd palet automatisch voldoen aan het WCAG-contrast?
Niet automatisch. Dominante kleuren in een foto zijn vaak middeltonen met een gemiddelde luminantie, die de neiging hebben verhoudingen te produceren in het bereik van 2:1 tot 3:1 ten opzichte van elkaar. Voldoen aan de drempelwaarde van 4,5:1 voor gewone tekst vereist doorgaans het verlichten van achtergrondwaarden of het donkerder maken van tekstwaarden dan de ruwe extractie biedt. De extractie geeft je een startpunt; de contrastcontrole vertelt je hoeveel aanpassing nodig is.
Houdt de WCAG-contrastverhouding rekening met kleurenblindheid?
Gedeeltelijk. De WCAG-luminantieformule is gebaseerd op relatieve helderheid, niet op tint, dus een paar met hoog contrast dat voldoet aan 4,5:1 zal over het algemeen onderscheidbaar blijven voor kleurenblinde gebruikers omdat het helderheidsverschil behouden blijft. Twee kleuren met vergelijkbare luminantie maar verschillende tinten, zoals rood en groen op dezelfde helderheid, kunnen echter een op luminantie gebaseerde contrastcontrole doorstaan terwijl ze voor deuteranopen nog steeds niet te onderscheiden zijn. Het uitvoeren van een kleurenblindheidsimulatie is de juiste manier om tint-differentiatie afzonderlijk van de contrastverhouding te controleren.