Så planerar du färger på virtuella husdjursenheter utan att förlora karaktärens kontrast
När du planerar färgalternativ för en virtuell husdjursenhet bör du först bevara karaktärens tydliga silhuett och viktiga särdrag. Variera sedan bakgrund, tillbehör och palettens accentfärger. Se varje alternativ som en komplett skärmdesign: kontrollera hur husdjuret framträder mot den faktiska bakgrunden, säkerställ att små detaljer fortfarande syns och använd både form och markeringar, inte bara färg, för att skilja viktiga detaljer åt.
Börja med delarna som gör husdjuret igenkännbart
Lista de drag som en betraktare snabbt behöver kunna identifiera: kanske konturen, ögonen, munnen, öronen, skalet eller en signaturmarkering. Listan beror på karaktären; det finns ingen universell uppsättning särdrag. Markera vilka drag som måste förbli synliga i varje färgalternativ och vilka som kan ändras dekorativt. Det blir palettens kontrastplan.
Skapa en enkel version av karaktären i en enda färg och kontrollera om posen och konturen fortfarande går att urskilja i enhetens avsedda visningsstorlek. Om karaktärens form eller uttryck förmedlas genom en färgad fläck, förstärk det draget med en avgränsning, mellanrum eller tydlig form. Det här är en designmetod, inte ett formellt tillgänglighetstest: den hjälper dig att upptäcka när en kulör står för hela igenkänningen.
Skilj karaktärens färger från skärmens bakgrund
Bestäm färgernas funktioner innan du väljer färgrutor. Avsätt roller för skärmens bakgrund, husdjurets huvudkropp, dess kontur eller skugga, ansiktsdetaljer och valfria accenter som kläder eller föremål i dess miljö. Undvik att flera roller får liknande ljushetsvärden. Ett knallgult husdjur mot en ljus skärm i gräddvitt kan till exempel förlora sin kontur, trots att kulörerna skiljer sig åt.
Kontrollera alla färgkombinationer som kommer att ligga intill varandra: kroppen mot bakgrunden, konturen mot kroppen samt ögonen eller munnen mot ansiktet. W3C:s riktlinjer för betydelsebärande grafiska objekt och gränssnittskomponenter använder kontrastförhållandet 3:1 mot intilliggande färger som riktmärke. Riktlinjerna för text anger 4,5:1 för vanlig text och 3:1 för stor text. Kriterierna är skrivna för webbinnehåll och intygar därför inte att en fysisk enhets skärm är tillgänglig, men de ger en användbar referens när skärmen innehåller text eller viktiga grafiska detaljer. W3C: kontrast för annat än text och W3C: kontrast (minimum)
Håll färgalternativen inom ett system baserat på roller
Skapa en liten uppsättning alternativ genom att ändra en roll i taget. Du kan till exempel låta ansiktet och viktiga markeringar vara oförändrade och erbjuda flera kroppsfärger, eller behålla kroppsfärgen och ändra bakgrundstemat. Då blir det lättare att avgöra om ett nytt alternativ försämrar igenkänningen, samtidigt som varje palett får en konsekvent struktur.
På ett praktiskt palettblad kan du anteckna varje färgrutas roll, färgvärde och närliggande färger. Ta med minst ett ljust och ett mörkt bakgrundsalternativ om båda ska användas och testa sedan samma husdjur mot vart och ett. Om en kroppsfärg bara fungerar mot en viss bakgrund bör du anteckna kombinationen som en begränsning, i stället för att anta att färgrutan passar överallt.
Det här rollbaserade tillvägagångssättet är en redaktionell rekommendation som bygger på behovet av att testa verkliga färgpar sida vid sida. Adobes tillgänglighetsvägledning beskriver hur man kontrollerar konflikter i paletten och justerar ljusstyrka eller RGB-värden när färger kan vara svåra att skilja åt. Adobe: tillgängliga färgval
Låt inte kulören stå för alla skillnader
Om två viktiga markeringar bara skiljer sig åt i färg bör du kontrollera om de fortfarande går att skilja åt i gråskala eller med en simulering av färgseende. Förstärk en svag skillnad med en annan ledtråd: använd olika former, konturer, mönster, placeringar eller etiketter där det passar designen. Världshälsoorganisationens designhandbok rekommenderar att variera ljusstyrkan och kombinera färger med symboler eller enkla mönster för att minska förvirring. Den varnar också för att för många mönster kan göra en design svårare att läsa. WHO: överväganden för tillgänglig design
Håll de extra ledtrådarna återhållsamma. En liten rand eller en särskiljande fläck kan räcka; flera konkurrerande konturer, texturer och högdagrar kan dölja karaktärens uttryck. Om en markering är dekorativ snarare än betydelsebärande behöver den inte förmedla en egen signal.
Testa i den storlek och under de förhållanden som människor kommer att se
Granska färgvarianterna på en återgivning av enhetens skärm, med karaktären i den förväntade storleken på skärmen. Titta både på hela karaktären och på små detaljer som pupiller, munlinjer eller tunna markeringar. En palett som ser tydlig ut i förstorade designfiler kan flyta ihop på en mindre skärm. Förhandsgranska också skärmen i gråskala och använd en simulering av färgseende som hjälp vid den första kontrollen. Simuleringar kan visa möjliga konflikter, men de ersätter inte kontroller av den verkliga skärmen och de avsedda visningsförhållandena.
Använd ett enkelt formulär för varje variant med alternativen godkänd eller ändra: Skiljer sig silhuetten tydligt från bakgrunden? Syns fortfarande de viktiga uttrycken och markeringarna? Går viktiga närliggande element att skilja åt med hjälp av ljusstyrka eller någon annan ledtråd? Är eventuell text fortfarande läsbar mot bakgrunden? W3C påpekar att toningar kan försvåra kontrastbedömningen. Testa därför den faktiska ytan bakom ett drag i stället för att förlita dig på ett enda färgrutevärde. W3C: kontrast för annat än text
Om en version inte klarar kontrollen bör du först justera ljusheten eller den omgivande bakgrunden. Det bevarar ofta karaktärens valda kulör och återställer samtidigt tydligheten. Om draget fortfarande försvinner bör du förstärka dess avgränsning eller ändra dess form. Kontrollera hela skärmen igen efter varje ändring, eftersom en förbättring av ett färgpar kan påverka ett annat.
Gör det slutliga valet med tydliga avvägningar
Jämför alternativen utifrån deras roller i stället för att fråga vilken palett som helt enkelt är ”bäst”. En starkt mättad kroppsfärg kan kännas livfull men konkurrera med ansiktet; en dämpad bakgrund kan rikta uppmärksamheten mot husdjuret men göra text eller ikoner svåra att se. Välj alternativet som bevarar de viktiga karaktärsdragen och förblir läsbart intill resten av skärmen. Anteckna vilka kombinationer du har valt bort och varför de inte fungerade, så att senare varianter inte återinför samma kontrastsvaga färgkombination.
Resultatet bör vara en uppsättning färgval med tydliga gränser: vilka kroppsfärger som fungerar mot vilka bakgrunder, vilka detaljer som förblir oförändrade och vilka skillnader som behöver en ledtråd utöver färgen. Det ger formgivare utrymme att skapa variation samtidigt som det virtuella husdjuret förblir igenkännbart i alla alternativ som faktiskt erbjuds.