Hoe plan je de kleuren van een virtueel huisdierapparaat zonder het contrast van het personage te verliezen
Behoud bij het plannen van kleurmogelijkheden voor een virtueel huisdierapparaat eerst het herkenbare silhouet en de belangrijkste kenmerken van het personage. Varieer daarna de achtergrond, accessoires en kleuraccenten eromheen. Behandel elke optie als een volledig schermontwerp: controleer hoe het huisdier afsteekt tegen de daadwerkelijke achtergrond, kijk of kleine kenmerken nog steeds opvallen en gebruik naast kleur ook vormen of markeringen om belangrijke details van elkaar te onderscheiden.
Begin met de kenmerken waaraan je het huisdier herkent
Maak een lijst van de kenmerken waaraan je het huisdier snel moet kunnen herkennen: bijvoorbeeld de omtrek, ogen, mond, oren, het schild of een kenmerkende markering. Welke kenmerken dat zijn, hangt af van het personage; er is geen universele set. Geef aan welke kenmerken in elke kleuroptie zichtbaar moeten blijven en welke decoratief mogen veranderen. Zo leg je vast waar het kleurenpalet voldoende contrast moet bieden.
Maak een eenvoudige versie van het personage in één kleur en controleer of de houding en omtrek nog herkenbaar zijn op het beoogde kijkformaat van het apparaat. Als een gekleurd vlak nodig is om de vorm of uitdrukking van het personage over te brengen, versterk dat kenmerk dan met een rand, tussenruimte of onderscheidende vorm. Dit is een ontwerpmethode, geen formele toegankelijkheidstest: zo ontdek je of één kleurtoon al het herkenningswerk doet.
Houd de kleuren van het personage gescheiden van de schermachtergrond
Bepaal eerst welke functie elke kleur heeft en kies daarna pas de kleurstalen. Reserveer kleuren voor de schermachtergrond, het hoofdlichaam van het huisdier, de omtrek of schaduw, gezichtsdetails en eventuele accenten, zoals kleding of voorwerpen in de leefomgeving. Voorkom dat meerdere functies vrijwel dezelfde helderheidswaarde krijgen. Een felgeel huisdier op een licht crèmekleurig scherm kan bijvoorbeeld zijn contour verliezen, ook al verschillen de tinten.
Controleer alle kleurcombinaties die naast elkaar voorkomen: het lichaam tegen de achtergrond, de omtrek tegen het lichaam en de ogen of mond tegen het gezicht. De W3C-richtlijnen voor betekenisvolle grafische objecten en interfacecomponenten gebruiken een contrastverhouding van 3:1 met aangrenzende kleuren als richtwaarde. Voor tekst geldt 4,5:1 voor gewone tekst en 3:1 voor grote tekst. Deze criteria zijn geschreven voor webcontent en certificeren dus geen fysiek apparaatscherm, maar ze bieden wel een nuttige referentie wanneer het scherm tekst of essentiële grafische details bevat. W3C: contrast voor niet-tekstuele content en W3C: contrast (minimum)
Houd kleuropties binnen een systeem op basis van functies
Stel een kleine set opties samen door telkens één functie te veranderen. Houd bijvoorbeeld het gezicht en de belangrijkste markeringen hetzelfde en bied verschillende lichaamskleuren aan, of behoud de lichaamskleur en varieer het achtergrondthema. Zo zie je makkelijker of een nieuwe optie de herkenbaarheid aantast en behoudt elk kleurenpalet een consistente opbouw.
In een praktisch kleurenpaletoverzicht kun je voor elke staal de functie, kleurwaarde en aangrenzende kleuren noteren. Neem minstens één lichte en één donkere achtergrondoptie op als beide gebruikt zullen worden, en test het huisdier op allebei. Als een lichaamskleur maar bij één achtergrond past, noteer die combinatie dan als beperking. Ga er niet van uit dat de staal overal uitwisselbaar is.
Deze aanpak op basis van functies is een redactionele aanbeveling, afgeleid van de noodzaak om daadwerkelijk aangrenzende kleurparen te testen. In de toegankelijkheidsrichtlijnen van Adobe wordt aangeraden conflicten in het kleurenpalet te controleren en de helderheid of RGB-waarden aan te passen wanneer kleuren moeilijk van elkaar te onderscheiden zijn. Adobe: Toegankelijke kleurkeuzes
Laat kleurtoon niet elk onderscheid bepalen
Als twee belangrijke markeringen alleen van kleur verschillen, controleer dan of je ze nog steeds uit elkaar kunt houden in grijstinten of met een simulatie van kleurenblindheid. Versterk een zwak onderscheid met een extra aanwijzing: gebruik verschillende vormen, contouren, patronen, posities of labels als dat bij het ontwerp past. De ontwerphandleiding van de Wereldgezondheidsorganisatie raadt aan de helderheid te variëren en kleuren te combineren met symbolen of eenvoudige patronen om verwarring te verminderen. De handleiding waarschuwt ook dat te veel patronen een ontwerp moeilijker leesbaar kunnen maken. WHO: Aandachtspunten voor toegankelijk ontwerpen
Houd extra aanwijzingen ingetogen. Een kleine streep of opvallende markering kan volstaan; meerdere concurrerende contouren, texturen en highlights kunnen de uitdrukking van het personage verhullen. Als een markering decoratief is en geen betekenis heeft, hoeft die geen afzonderlijk signaal over te brengen.
Test op het formaat en onder de omstandigheden waarin mensen het zien
Bekijk kleurvarianten op een weergave van het apparaatscherm, met het personage op het verwachte schermformaat. Inspecteer zowel het hele personage als kleine details, zoals pupillen, mondlijnen of dunne markeringen. Een kleurenpalet dat in uitvergrote ontwerpbestanden duidelijk oogt, kan op een kleiner scherm samenvloeien. Bekijk het scherm ook in grijstinten en gebruik een simulatie van kleurenblindheid als eerste controle. Simulaties kunnen mogelijke conflicten aan het licht brengen, maar vervangen niet de controle op het echte scherm en onder de beoogde kijkomstandigheden.
Gebruik voor elke variant een eenvoudige checklist met de opties ‘goedgekeurd’ of ‘aanpassen’: steekt het silhouet duidelijk af tegen de achtergrond? Zijn de belangrijkste uitdrukking en markeringen nog zichtbaar? Zijn essentiële elementen die naast elkaar staan te onderscheiden op basis van helderheid of een andere aanwijzing? Is alle tekst goed leesbaar op de achtergrond? De W3C merkt op dat kleurverlopen de contrastbeoordeling kunnen bemoeilijken. Test daarom het daadwerkelijke gebied achter een kenmerk in plaats van af te gaan op één kleurstaal. W3C: contrast voor niet-tekstuele content
Pas bij een afgekeurde versie eerst de helderheid of de omringende achtergrond aan. Zo behoud je vaak de gekozen kleurtoon van het personage en herstel je toch het contrast. Als het kenmerk nog steeds wegvalt, versterk dan de rand of verander de vorm. Controleer na elke wijziging opnieuw het hele scherm, want een betere kleurcombinatie op de ene plek kan een andere beïnvloeden.
Maak de definitieve keuze op basis van duidelijke afwegingen
Vergelijk de opties per functie en vraag niet simpelweg welk kleurenpalet ‘het beste’ is. Een sterk verzadigde lichaamskleur kan levendig ogen, maar concurreren met het gezicht. Een gedempte achtergrond kan de aandacht op het huisdier houden, maar tekst of pictogrammen moeilijk leesbaar maken. Kies de optie die de vereiste kenmerken van het personage behoudt en goed afsteekt tegen de rest van het scherm. Houd bij welke combinaties zijn afgewezen en waarom, zodat latere varianten dezelfde kleurencombinatie met weinig contrast niet opnieuw introduceren.
Het resultaat moet een set kleurkeuzes met duidelijke grenzen zijn: welke lichaamskleuren bij welke achtergronden passen, welke details hetzelfde blijven en welke verschillen een aanwijzing nodig hebben die niet op kleur berust. Zo krijgen ontwerpers ruimte om variatie aan te brengen en blijft het virtuele huisdier herkenbaar in alle daadwerkelijk aangeboden opties.