Kontraster

1. Inledning

På sidan om perceptuella principer berättade jag att hjärnan tycker om att försöka ordna de synintryck som kommer in. Där berättade jag att ögat skapar mönster i det den ser, vilket ibland ställer till problem.

På motsvarande sätt försöker ögats synceller ordna färgerna de tar in. Ögat är mer känsligt för vissa färger än andra, något som man kan lära sig att utnyttja. Vissa färgkombinationer skapar flimmer eller underliga och oönskade effekter, som man skall försöka undvika.

Den här sidan handlar således om kontraster, vad de är och hur de kan användas. En kontrast kan sägas vara en olikhet mellan två saker. Ett annat namn på sidan hade kunnat vara "Färgernas inbördes olikheter" eller "Färgernas inbördes påverkan".

Att ha kunskaper om kontraster är viktigt, eftersom färger uppträder lite olika, beroende på i vilket sammanhang de förekommer. Jag kommer att visa en hel del kontraster längre ner och hur de kan undvikas eller användas för att förstärka något.

Sidan bygger vidare på det du läste på "Färgsidan" och förutsätter att du känner till de begrepp jag tog upp där. Gå till Färgsidan >

Det du läser här kompletterar också flera andra sidor, bl.a sidorna "Formgivning och layout" och "Vad är kommunikation?", som båda handlar om kontraster i text och textproduktion. Läs mer på de sidorna >

2. Olika kontraster

Ett vanligt exempel på kontraster är våra trafikskyltar. De bygger ändå på kontraster mellan rena, starka färger. Förbudsskyltar är gulröda, eftersom ögat lätt ser dem och reagerar starkt. Upplysningsskyltar har oftast klara färger, också med stora kontraster. Påbud kan se lite olika ut, beroende på hur starkt de skall signalera. Här har jag valt ett vanligt exempel, som ögat lätt uppfattar.

Komplementkontraster

Komplementkontraster uppstår då motstående komplementfärgpar, t.ex rött och grönt, ligger nära varandra. Principen är densamma som för trafikskyltar, reklamskyltar och liknande. En vanlig bieffekt är att två så starka färger bredvid varandra kan ge upphov till flimmer. Det kan också uppstå en färgblandning som ger ett olikfärgat streck mellan kulörerna.

Gränskontraster

En annan typ av kontrast är gränskontraster, som innebär att färger med ungefär samma kulörton, upplevs som nära varandra och liggandes i mjuk övergång. Om färgerna separeras upplevs färgerna på ett helt annat sätt. Då tycker man att de är självständiga på ett mycket tydligare sätt.

Simultankontraster

Denna typ av kontrast innebär att ögat ökar skillnaderna mellan två färger, om de ligger för nära varandra. En färg får ofta en liten förskjutning i kulören, mot en komplementfärg. Ett exempel är brunt, som ser rödaktig ut mot en grön bakgrund och smutsig ut mot en röd. Detta beror på att rött och brunt ligger ganska nära varandra i kulörtonen och att rött och grönt är komplementfärger.

När vi tittar på den bruna färgen mot grön bakgrund vill ögat kompensera och tolkar den bruna som mera röd än den egentligen är. På motsvarande sätt vill ögat skapa en lite för stor kontrast mellan det bruna och det röda, vilket skapar känslan av smutsighet.

Ytkontraster

Dessa innebär, på liknande sätt som för simultankontraster, att en färg upplevs som olika beroende på den färg den gränsar till.

En blå färg ser lite olika ut mot en gul respektive röd bakgrund. I den översta vänstra bilden upplevs den blå färgen som mörkare än i den högra, trots att det är samma nyans. I det undre bildparet blir samma nyans av grå mörkare mot en ljus bakgrund.

I många fall uppstår även andra effekter. Mellan bilderna uppstår mörkare fält, trots att där är vitt. Du kan läsa mer om sådana på sidan om perceptuella principer. Läs mer här >

Kvantitetskontraster

Två olika kulörer som målas på en lika stor yta, kan ändå upplevas som olika stora. Anledningen är att kulörer ser olika stora ut beroende på deras inbördes ljushet. Ju mörkare en färg är desto mer plats förefaller den ta för ögat. Detta gäller inte bara mellan olika kulörer, som rött och gult, utan även mellan olika ljushet, som mörkgult och ljusgult.

Många forskare har intresserat sig särskilt för just kvantitetskontraster, eftersom olika färger uppfattas på väldigt olika sätt. Kvantitetskontraster är lite svåra att visa i bild, men här är ändå ett förslag.

Samma intensitet av tre olika kulörer på samma yta upplevs som olika stora. Visst känns den röda färgklicken större i bilden nedan? Anledningen är att olika kulörer upplevs som olika ljusa. Gul är t.ex ljusare än grön och röd.

Kvalitetskontrast

Förutom att man kan tala om färgernas kvantitet, brukar man också beskriva deras kvalitet. Då är det renheten och mättnadsgraden man avser. Kontrasten uppstår alltså mellan klara, ljusa och mättade färger å ena sidan, och daskiga, dunkla och mörka kulörtoner å den andra.

På webben brukar man skilja mellan de färger som är webbsäkra och de som inte är det. De förra kan presenteras som en enhetlig färg på skärmen, men de senare måste blandas till av olika färger. I bilden visar jag några kontraster, där den rena färgen är till vänster i de olika paren.

Kontraster mellan kallt och varmt

Man brukar säga att kalla färger är blågröna, medan varma färger är rödorange. Med "varm" och "kall" avser man färgernas temperatur. Vi upplever de kalla färgerna rent fysiskt som kallare och på motsvarande sätt med de varma. Det är alltså ingen slump att många vill ha en blå färg i sovrummet, där de skall sova gott och svalt, men en röd- eller gulaktig ton i rum där de skall vistas i och trivas.

Kontraster mellan mörkt och ljust

Sådana här kontraster uppstår inte bara mellan svart och vitt, utan också mellan mörkgult och ljusgult, etc.

Successiva kontraster

Dessa kontraster kallas med ett annat ord för "efterbilder" och uppstår då vi tittat länge på en färg eller form och sedan tittar bort. Motivet syns då fortfarande, men med andra färger. Effekten uppstår genom att ögats synceller successivt tröttas ut och därmed skapar en kompensation i hjärnan.

När stimulansen upphör sker en motreaktion, som gör att vi ser samma motiv inverterat. Ljusa färger brukar bli mörka och rött blir grönt. Ju intensivare färgerna är desto större blir effekten.

Bilden nedan ger en ganska tydlig effekt. Stirra på den svarta punkten i bilden under nån minut. Titta sedan upp på en bland yta, t.ex en vit vägg eller ett papper. Det som är grönt blir rött och tvärtom. Klicka på bilden för att se på den i ett separat fönster.

3. Hur man arbetar med kontraster

På många sidor i den här webresursen skriver jag att man skall använda sig av starka kontraster för att göra texter och illustrationer lätta att läsa. Men det finns självklart många undantag, där kontraster blir för stora och på så vis dåliga.

Å andra sidan kan en stor kontrast hjälpa alla som ser lite dåligt. Då kan en sån här liten detalj spela stor roll. Det gäller alltså att tänka på vem man har som målgrupp.

En liten kontrast passar inte för en liten textstorlek, men kan vara snyggt för rubriker. Här spelar naturligtvis också skärmens förmåga in, så man bör alltid testa sidorna även på en lite sämre skärm.

Fortsätter vi att titta på texter och färger, ser vi att kontrasten är ännu viktigare än inom gråskalan. Man kan med fördel använda mörk-ljus-kontraster, förslagsvis mellan två nyanser av samma färg. Det brukar bli bäst. I exemplet nedan har jag valt att arbeta med gult som bakgrundsfärg och sedan olika textfärger.

Det är oftast snyggare med mörk textfärg och ljusare bakgrund. Om man vill kan man ha en mörkbakgrund, men man måste då tänka på att sidan kommer att se tätare ut, med mindre utrymme mellan objekten på sidan (textsjok, bilder, rubriker, osv). Dessutom är det svårare att läsa texten på sidan. Man måste också ställa in utskriften rätt, så att inte sidan skrivs ut som den är, med mörkbakgrund och ljus text, något som slösar toner i onödan.

Här är ett par exempel på hur det ser ut, med en svart bakgrund. Intressant nog tycker de festa att kontrasten måste vara större om man har mörk bakgrund, jämfört med om man har en ljus. Man tycker att den ljusgrå färgen ser smutsig ut och vill ha en renare, vitare.

Ett tips är därför att använda mörk bakgrund enbart då man lägger upp fotografier. Då undviker man nämligen störande ljus och bilderna framträder skarpare. Ögat har här alltså enklare att ta in informationen om kontrasten är större.

Det går nästan alltid att blanda svart eller vitt med någon annan färg. Här har jag först fyra exempel på vanliga och helt ok blandningar:

Så fort vi överger svart eller vitt och blandar in ytterligare en färg, uppstår svårigheter. Plötsligt reagerar våra ögon olika eller vi upplever blandningen olika. Några tycker att rosa och rött inte går att blanda, medan andra tycker det är mycket snyggt. Likadant är det med andra färgkombinationer.

Därför brukar man säga att en färg med olika ljushet är ok. Man kan t.ex blanda mörkrött och ljusrött utan problem, liksom olika nyanser av blått och grönt. Här är några exempel på det:

Vill man använda sig av flera olika färger skall man se till att de inte är för starka. Två starka färger skapar lätt flimmer, som exemplet visar:

Färgerna blir mycket mindre störande om man tar ner den ena färgens styrka något:

Genom att lära sig grunderna om hur kontraster uppstår och sedan testa sig fram själv och jämföra olika färger, kan man ganska snart lära sig att undvika de dummaste felen och skapa intressanta effekter där man behöver det.

Ett bra ställe att börja leta färger på är på den webbsäkra paletten. Läs mer här >