Vill du ha det visuellt tilltalande eller läsbart? Det ena behöver inte utesluta det andra men ofta ser jag hemsidor där man uppenbart har lagt fokus på det visuella. Mjuka toner med varandra med låga kontraster, det blir ofta väldigt fint men har man en synnedsättning (eller kanske en dålig skärm) så kan det bli svårt att ta till sig innehållet.
Färgkontraster är en faktor i webbdesign som påverkar både läsbarhet och tillgänglighet för din webbplats. Att strunta i kontraster kan göra att du förlorar besökare och potentiella kunder, för att de inte kan ta till sig innehållet på ett effektivt sätt. Här är några viktiga punkter att tänka på när du jobbar med din hemsida:
- Använd ljus text på mörk bakgrund och tvärt om: Att ha tillräcklig kontrast mellan text och bakgrund är avgörande för hur texten kommer uppfattas. Detta gör texten tydlig och läsbar för alla, inklusive de med synnedsättningar.
- Överväg färgblindhet: Det är ganska många procent som lider av någon form av färgblindhet. Använd därför inte enbart färg för att koda information. Använd också mönster, text eller andra visuella element. Du kan läsa mer om färgblindhet hos 1177.se.
- Testa din webbplats: Det är viktigt att testa din webbplats för färgkontraster. Det finns onlineverktyg och tillägg till webbläsaren som kan hjälpa dig att bedöma om dina färgval är lämpliga. Längre ner i inlägget visar jag ett av verktygen du kan använda dig av.
- Länkar med bra kontrast: Se till att dina länkar sticker ut genom att använda en färg som skiljer sig från omgivande text. Detta hjälper besökarna att identifiera klickbara element. Du kan göra länkarna ännu tydligare genom att använda understräck.
- Tillgänglighet är viktigt: Genom att skapa en tillgänglig hemsida släpper du in flera, du gör internet tillgängligt för fler helt enkelt! När du följer tillgänglighetsriktlinjer, som WCAG (Web Content Accessibility Guidelines), blir din webbplats användbar för alla.
- Typsnitt: Självklart är det inte bara färgerna som påverkar hur läsbar din text blir, vilket typsnitt och vilka inställningar man har för denna har också stor påverkan (det kommer ett inlägg om det framöver).
Hur testar jag mina färger?
För att testa om färgerna du använder/tänker använda har rätt kontraster kan du använda detta verktyget:
https://webaim.org/resources/contrastchecker/
Om dina färger inte uppfyller kraven kan du med reglarna testa justera och se om du med mindre justeringar kan få de mer passande.
På bilden kan ni se de färger jag använder mig av och vilket kontrastförhållande de har.
Genom att uppmärksamma färgkontraster på din webbplats kan du skapa en bättre användarupplevelse och nå en bredare publik. Att göra din webbplats mer tillgänglig är inte bara rätt sak att göra, det är också bra för din verksamhet. Så se till att dina färgval är inte bara estetiskt tilltalande utan också funktionella och inkluderande.
Dessutom, sökmotorerna gillar användarvänlighet!
