Kontrast

Genveje

Tips til design

Typografi

Brug mange overskrifter. For at skabe overblik og struktur for brugeren.

Typografi

Farvekontrast

Når vi arbejder med farver er der en lang række kontraster vi kan bruge.

Komplementær kontrast
Varme-kulde kontrast
Styrke kontrast
Mæthedskontrast
Sort/hvid-farvekontrast

Komplementærfarve kontrast

Den komplementære farvekontrast er nok den bedst "kendte" af farvekontrasterne. Komplementær kontrast opstår, når vi bruger 2 farver fra hver sin side af en farvecirkel. Det klassiske eksempel er rød og grøn eller rød og magenta afhængigt af, hvilken farveteori man vælge at følge. Kontrasten mellem to komplementære farver er så kraftig, at f.eks. grøn tekst på rød baggrund, (eller omvendt) er meget svær at læse. Teksten vil optræde flimrende.

Når man arbejder med komplementærfarve kontrast skal man passe på ikke at overdrive. F.eks. ved at bruge store farveflader med komplementær farve overfor hinanden. Det kan give et meget hidsigt udtryk og være meget ubehageligt for øjnene.

Komplementærfarve kontrast. Skats hjemmeside

Skat 5-10-2008

Flot site fra skat, hvor flere kontraster er i spil. En af de fremtrædende er mellem komplementærfarverne gul og blå.

Samme farvekombination byder også på en varme-kulde kontrast mellem de to farver. Og endelig er der også en mæthedskontrast mellem dem. Den gule er klar og lysende, og den blå er støvet og grålig.

Læg også mæke til hvordan overskrifterne i venstre spalter er højrestillede. Et interessant eksempel på placeringskontrast.

Varme-kulde kontrast

Varme-kulde kontrast er den kontrast, der opstår mellem varme og kolde farver. Det klassiske eksempel på en varme-kulde kontrast er en varm rød favre overfor en kølig blå farve.

Men på en farvecirkel kan farver ligge meget tæt, og stadig have forskellig temperatur. Derfor kan denne kontrastform nogle gange være temmelig subtil. Et eksempel er rødlige nuancer, der kan skifte fra varm til kold, hvis man tilføre lidt blå til den røde farve.

Varme-kulde Kontrast. Danish Fashion Institute

Danish Fashion Institute 5-10-2008

Endnu en flot side med mange kontraster i spil. Varme-kulde kontrasten ses mellem den kolde blå kjole og den varme orange bjælke.

Der ses også en kontast mellem de organiske fonte i logo'et, og den stramme firkant som de er samlet i. At navnet så er ulæseligt på grund af fontene betyder vel mindre, da det tydeligvis er effekten og stemningen frem for læsbarheden, der er vigtig.

Læs mere om skrifttyper

Styrkekontrast

Styrkekontrasten (eller lys-mørke kontrast) bruger vi f.eks. i typografien. I forhold til tekst og baggrund, skal man passe på med kontraster på 100%. Altså helt sort på hvidt.

Så stærke kontraster kan være hårde for øjnene og virke flimrende. Derfor kan man med fordel istedet bruge: mørk grå på hvid, sort på lys grå, lys grå på sort etc.

Lys-mørke kontrasten ses også ofte brugt til at gøre mindre vigtige tekst/overskrifter mindre fremtrædende ved f.eks. at gøre dem lysere grå

Men lys-mørke kontrasten kan selvfølgelig også bruges på grafik og farver.

Vestas 6-10-2007

På Vestas hjemmeside ses en styrkekontrast mellem mørkeblå logo, menubjælke og banner foto, og så de lysere blå farver i højresides overskrifter. Også i de små billeder ses lysere blå nuancer

Ellers ses her også gode eksempler på størrelseskontrast. F.eks. mellem bannerbillede og små billeder nede på siden.

Mæthedskontrast

Mæthedskontrasten handler om, hvor farvemættede vores grafiske elementer er. økonomiske virksomheders hjemmesider holdes ofte i neutrale nuancer for at give virksomheden et afdæmpet og troværdigt image.

På sådanne sites kan man stor effekt skabe opmærksomhed ved at bruge nogle få stærkt farvede elementer. F.eks. i overskrifter, farvede listepunkter eller anden kraftig farvet grafik.

Udover blikfang og heiraki, vil anvendelse af få klare farve på denne kategori af websites, tilføre sitet noget dymamik.

Ilva 6-10-2007

Her ses en mæthedskontrast mellem de meget klare farver i Ilvas logo og den mere dæmpedede blå i banneret og de farvede bokse på bunden af sitet.

Placeringskontrast ses også på fotoet, hvor priserne er placeret i hver sit hjørne.

Og den varme røde farve i samme priser danner en varme-kulde kontrast til det kølige blå banner.

Sort-hvid/farve kontrast

Sort-hvid/farve kontrast er den kontrast, der opstår når man f.eks. sætter et sort/hvid foto sammen med et farvefoto. Nogle gange ses f.eks. en rollover effekt, hvor et sort/hvid foto får farver, når man kører cursoren over.

Eller hvis man i et website holdt i grå-skala nuancer, placerer nogle nogle stærkt farvede elementer.

Minder om mæthedskontrasten, men i sort/hvid-farve kontrasten er ene element altid holdt helt i gråtoner (farvemæthed på 0).

Sort-hvid/farve kontrast. Dansk Design Center

Dansk Design Center 5-10-2008

Måske lidt kedeligt side ophavet taget i betragtning. Ikke de vilde eller kraftige kontraster i spil her.

Men et godt eksempel på Sort-hvid/farve kontrast. Hvor en klar orange farve skaber opmærksomhed på et ellers gråt websted.

Og der ses da også en varme-kulde kontrast mellem de orange bjælker og de tre små blå billeder nederst på siden.

Farvekontraster. Grafisk oversigt

Komplementær kontrast

Farver der ligger overfor hinanden på farvecirklen er komplementære. De konkrete farver afhænger af den anvendte Farveteori. Her har jeg valgt at illustrere med blå gul kontrast.