Kontraster är väldigt viktigt och ändå är det något som jag ofta ser missas på hemsidor, sociala medier och i annan design. En dålig (låg) kontrast gör att dina texter blir svåra att läsa och det påverkar både användarupplevelsen och tillgängligheten.
Om en besökare måste anstränga sig för att läsa din text är risken stor att de snabbt ger upp och lämnar sidan. Dessutom kan låg kontrast göra din hemsida otillgänglig för personer med synnedsättning eller lässvårigheter. Google värderar också tillgänglighet högt, vilket innebär att dåliga kontraster kan påverka din SEO negativt.
Men det här är enkelt att åtgärda! I det här inlägget går jag igenom vad bra och dålig kontrast är, hur du kan kontrollera dina kontraster och hur du ser till att kontrasterna är bra.
För att dina texter ska vara tydliga och läsbara behöver de tillräcklig kontrast mot bakgrunden. Ju högre kontrast, desto lättare är det att läsa, men det finns en gräns. En extremt hög kontrast som vit text på svart bakgrund eller tvärtom, kan bli ansträngande för ögonen vid längre läsning. Därför är det oftast bättre att använda en mörkgrå text på en ljus bakgrund istället för helt svart på vitt. Men detta är för ett annat inlägg 🙂
För att säkerställa att din hemsida är tillgänglig för så många som möjligt finns det internationella riktlinjer, kallade WCAG (Web Content Accessibility Guidelines). Enligt dessa riktlinjer bör text och bakgrund ha ett kontrastförhållande på
Jag rekommenderar att hålla dig till 4.5 och jag använder själv 4.5 som gräns när jag skapar färgpaletter till grafiska profiler för att den ska vara så användbar som möjligt.
Det vanligaste problemet jag ser är att man använder vit text på en ljus bakgrund. Kanske är syftet att man vill skapa en mjuk, inbjudande känsla men det är inte det resultatet man får. Istället blir det otydligt och svårläst och det tror jag inte är känslor du vill förmedla.
Dåliga kontraster:
Svart ger givetvis en hög kontrast men kan också ge ett hårt intryck. Du kan behålla ett mjukare intryck genom att använda dig av mörkare nyanser av samma färg.
Här är exempel med bra kontraster, den nedre raden är med svart text och den övre med mörkare nyanser av bakgrundsfärgen:
Text ovanpå en bild kan vara riktigt snyggt, men det kan också skapa problem med kontrasten särskilt på mindre skärmar. På en del bilder kan du kanske justera texten så att den hamnar på en mer enfärgad del av bilden, där den är lätt att läsa, åtminstone på datorskärm.
Men på mindre enheter kan bilden skalas om, och de enfärgade områdena försvinner eller blir mindre synliga. Det gör att texten kanske hamnar på en helt annan del av bilden där kontrasten är otillräcklig och därmed blir svårare att läsa.
För att undvika detta problem kan du:
Det finns olika verktyg som du kan använda för att kolla kontraster. Om du använder ex. Chrome kan du högerklicka på din hemsida och välja Inspektera. Genom att sedan hålla pilen över texter får du se hur kontrasten är.
Ett annat bra gratis verktyg är WebAIM Contrast Checker, här kan du enkelt jämföra bakgrundsfärg och textfärg. Du kan även använda det för att hitta en nyans med tillräcklig kontrast.
Gå till WebAIM Contrast Checker (öppnas i ny flik)
Använder du Canva kan du via Arkiv -> Tillgänglighet -> Kontrollera design tillgänglighet enkelt se om dina designer du skapar där har tillräckliga kontraster.
En bra kontrast är viktig både för dina besökare och din SEO. Den gör din design mer läsbar, professionell och tillgänglig för alla!
Jag hjälper dig gärna ta fram en grafisk profil till ditt företag, läs mer om min tjänst Grafisk profil
