Varför bör du undvika vibrerande färgkombinationer

I den här snabba artikeln lär du dig hur färgvibration påverkar läsbarheten i gränssnittet i samband med webb- och gränssnittsdesign.

Fet eller Garish?

Det finns en framväxande tendens bland gränssnittsdesigners att efterlikna de färgglada färgscheman som ofta finns i tryckdesign. Medan delvis på grund av ideologiska trender framträder denna impuls också från det nyfunna typografiska intervallet tillgängligt för den moderna webbdesignern, vilket uppmuntrar utskriftsliknande layouter och stor typ. Det är viktigt att notera skillnaderna mellan varje medium, vilket medför att vibrerande färg blir något mer tillåten i tryck, och mindre för webben.

Vibrerande färger på Frootis hemsida

I tryckning innebär det att man använder ett djärvt färgschema ofta skillnaden mellan att ignoreras på ett magasinställ och gör en försäljning. Å andra sidan har vi i användargränssnittet andra överväganden som har företräde framför att fånga användarens uppmärksamhet med våld, i synnerhet läsbarhet av text.

Vad är Vibration?

En av de främsta fenomenen som dyker upp ur djärva och mycket mättade färgscheman är en till synes "vibrerande" färg, en förekomst där kanterna av två direkt intilliggande färger verkar förena, blur och glöda, vilket ger en illusion av rörelse.

De yttre två proverna har text med vibrerande färg, medan mittenprovet har text med jämviktsvärde.

Josef Albers, den noterade färgteoretikern, varnade mot användandet av vibrerande färger i hans klassiker, Färginteraktioner:

"Denna initialt spännande effekt känns också aggressiv och ofta obehaglig för våra ögon. Man finner det sällan använt förutom en skrikande effekt i reklam, och som ett resultat är det obehagligt, ogillar och undviks. "

För att ett par färger ska ha låg sikt mot varandra är det nödvändigt att de är likvärdiga och har samma ljusstyrka. För att märkbart vibrera kommer emellertid färgerna i allmänhet att ha hög mättnad och vara komplementära till varandra, förskjutna ca 180º på färghjulet.

Blå (HSB 210, 99, 100) på rött (HSB 12, 99, 100)

I exemplet ovan kan de röda och blåa nyanserna hittas på motsatta sidor av färghjulet (om än inte direkt motsatt) och båda har en ljusstyrka på 100.

Spotify EDM

Spotify har blivit synonymt med djärva färgscheman, som används med stor effekt för att fånga uppmärksamhet. Ibland kan dessa kombinationer vara avskräckande, även om de inte vibrerar i den sanna meningen; till exempel knappen mot den lila bakgrunden i exemplet ovan. Användarnas ögon kommer att känna igen vad det är, men vissa kan kämpa för att bestämma formens yttre kanter. 

Läsbarhet

Gränssnitttexten hämmas väsentligt när den ställs i jämvikt, vibrerande färg. Jag anpassade valt dessa vibrerande färger:

När färgvibration uppstår är det element som störst påverkas av den glödande distorsionseffekten kanten mellan de två färgerna. Det är därför vibrationer är särskilt farliga i samband med användargränssnitt, små ikoner och andra detaljerade element som inte är tillräckligt stora för att kompensera för deras suddiga vibrerande kanter.

Här är samma uppsättning färgprover, den här gången som ses av någon med fullfärgslindhet:

Förutom de ofta irriterande vibrerande och suddiga färgerna för de som ser i fullfärg, med givna färger med lika luminans, kan de med färgblindhet sluta se någonting alls. Medan det finns olika nivåer av färgblindhet, är det bäst att spela det säkert när det gäller tillgänglighet.

Här är till exempel papperskorgen på Apple Watch inte synlig för personer med färgblindhet:

Färgsyn (vänster) mot färgblindhet (höger)

Slutsats

Vibrerande färger kan användas till bra effekt, men de uppvisar verkliga faror i användargränssnittet för användargränssnitt och kan tunghäftas om de inte medvetet beaktas före användning. Tänk på detta när du utformar!