Skip to main content

Hur kontrast bakgrund och förgrundsfärger i webbdesign

Akrylmålning: måla en bakgrund med vatteneffekter (April 2025)

Akrylmålning: måla en bakgrund med vatteneffekter (April 2025)
Anonim

Kontrast spelar en viktig roll för framgången med vilken webbplats som helst. Tillräcklig kontrast garanterar en användarupplevelse av hög kvalitet och lättare läsbarhet som kommer att bidra till en webbplatss långsiktiga framgång.

Webbplatser som är för låga i kontrast kan vara svåra att läsa och använda, vilket kommer att påverka webbplatsens framgång negativt. Dålig färgkontrast är ofta lätt att identifiera; ofta kan du helt enkelt titta på en sida i en webbläsare och se om det är svårt att läsa en text på grund av dåliga kontrasterande färgval.

Även om det kan vara lätt att bestämma vilka färger som inte fungerar bra, kan det vara svårt att bestämma vilka färger som fungerar bra i motsats till andra och inom utformningen av en webbplats. Detta diagram visar en mängd olika färger och hur de är bra de kontrasterar som förgrunds- och bakgrundsfärger. Du kan se några effektiva parningar såväl som en dålig parning som bör undvikas när du väljer färger för dina webbplatsprojekt.

Inte alla starka kontraster är goda kontraster

En sak du bör notera i diagrammet är hur några av dessa färger kan vara väldigt ljusa och visa vibrerande på en viss bakgrundsfärg, till exempel blå på svart, men de är märkta som dåliga kontrastval. Detta beror på att färgkombinationen trots sin kontrast fortfarande resulterar i text som är svår att läsa. Om du skulle skapa en sida i all blå text på svart bakgrund, skulle dina läsare uppleva ögonsträckan mycket snabbt.

Det finns regler och bästa metoder för kontrast, men som designer måste du alltid utvärdera dessa regler för att se till att de fungerar i din speciella instans.

Branding standarder och kontrasterande färgval

Kontrast är bara en av faktorerna att tänka på när du väljer färger för din webbplatss design. Vid val av färger kommer du troligtvis också att vara uppmärksam på varumärkesstandarderna för kunden, oavsett om det är ett företag, en annan organisation eller ens en person. Även om färgpaletter kan överensstämma med organisationens varumärkesriktlinjer, kan de inte översättas bra för onlinepresentation.

Till exempel, gula och ljusa gröna är fruktansvärt utmanande att använda effektivt på webbplatser. Om dessa färger finns i ett företags varumärkesriktlinjer, kommer de sannolikt att behöva användas som accentfärger bara, eftersom det är svårt att hitta färger som står i kontrast med heller.

På samma sätt, om dina varumärkeskvaliteter är svarta och vita, betyder det 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äsning väldigt osynlig upplevelse trots den inneboende styrkan hos kontrast 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 alternativ för kontrast och läsbarhet.

Onlineverktyg

Förutom din egen designavkänning finns det några onlineverktyg som du kan använda för att testa din webbplatss färgval. CheckMyColors.com testar alla dina webbplatsens färger och rapporterar om kontrastförhållandet mellan element på sidan.

Dessutom, när du 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 riktlinjer för webbinnehålls accessibility (WCAG).