Hur man väljer kontrasterande färger för mer läsbara webbplatser

Vad du ska veta

Använd diagrammet i den här artikeln för att bestämma de bästa kombinationerna av bakgrunds- och förgrundsfärger för webbsidesdesign.
Använd ett onlineverktyg som CheckMyColors.com för att testa din webbplatss färger och rapportera om kontrastförhållandet mellan elementen på sidan.

Använd ett verktyg som t.ex. ContrastChecker.com för att testa dina val mot riktlinjerna för webbinnehålls tillgänglighet.

Den här artikeln förklarar hur man effektivt skapar kontrast mellan bakgrunds- och förgrundsfärger i webbdesign.

Hur man skapar stark kontrast
Vissa färger kan vara ljusa och visa sig levande på en viss bakgrundsfärg eller, som blått på svart, men de är dåliga kontrastval. Om du skulle skapa en sida i helt blå text på en svart bakgrund, till exempel, skulle dina läsare uppleva ansträngda ögon mycket snabbt.
Studera diagrammet nedan för att få en känsla av den bästa bakgrunden/förgrunden kombinationer.
Lifewire / Jeremy Girard
Det finns regler och bästa praxis för kontrast, men som designer måste du alltid utvärdera dessa regler för att säkerställa att de fungerar i just ditt fall.
Använd onlinekontrastkontrollverktyg
Förutom din egen designkänsla, prova några onlineverktyg för att testa din webbplatss färgval. CheckMyColors.com kommer att testa alla färger på din webbplats och rapportera om kontrastförhållandet mellan elementen på sidan.
Dessutom, när man tänker på färgval bör du också överväga webbplatsens tillgänglighet och personer som har former av färgblindhet. WebAIM.org kan hjälpa till med detta, liksom ContrastChecker.com, som kommer att testa dina val mot riktlinjerna för webbinnehålls tillgänglighet.
Varför är kontrast viktigt?
Stark kontrast spelar en viktig roll för framgången för alla webbsidors design. Tillräcklig kontrast säkerställer en kvalitetsanvändarupplevelse och enklare läsbarhet som kommer att bidra till en webbplatss långsiktiga framgång. Webbplatser som har för låg kontrast kan dock vara svåra att läsa och använda, vilket kommer att ha en negativ effekt på alla webbplatsers effektivitet.
Medan det kan vara lätt att avgöra vilka färger som inte fungerar bra tillsammans, det är en svårare fråga att avgöra vilka färger som kombineras effektivt, både i motsats till andra och inom designen av en webbplats.
Varumärkesstandarder och kontrasterande färgval

Kontrast är bara en av de faktorer att tänka på när du väljer färger för din webbplats design. När du väljer färger måste du sannolikt också vara uppmärksam på varumärkesstandarderna för kunden, oavsett om det är ett företag, annan organisation eller till och med en individ. Även om färgpaletter kanske överensstämmer med en organisations varumärkesriktlinjer, kanske de inte översätts bra för onlinepresentation.

Till exempel är gula och ljusa gröna fruktansvärt utmanande att använda effektivt på webbplatser. Om dessa färger finns i ett företags varumärkesriktlinjer kommer de sannolikt endast att behöva användas som accentfärger, eftersom det är svårt att hitta färger som kontrasterar bra med någondera. På samma sätt, om ditt varumärkes färger är svart och vitt, betyder detta stor kontrast, men om du har en webbplats med långa mängder text kommer en svart bakgrund med vit text att göra läsningen väldigt ansträngande för ögonen trots den inneboende kontraststyrka mellan svart och vitt. I det här fallet är det lämpligt att invertera färgerna med svart text på en vit bakgrund. Det kanske inte är så visuellt intressant, men det är ett mycket bättre val av kontrast och läsbarhet.