Tillgänglighet är en viktig fråga. Ett vanligt missförstånd är att det bara handlar om att anpassa för medmänniskor med funktionsvariationer. Det är fel. En tillgänglig webb är bra och enkel för alla.
Hur lite vi än vill erkänna det försämras vår syn ofta när vi blir äldre. För att inte tala om hur vanligt olika grader av synfel är bland befolkningen i allmänhet.
Varför är tillgänglighet viktigt?
Testa att ta ett steg bak från din skärm. Slut ögonen lite, precis så att synen blir lite sämre när ögonfransarna stör.
Hur enkelt är att det att och använda din webbplats nu? Kan du läsa allt?
Visst blev det mycket svårare?
Från vår webbanalys kan vi inte få fram hur många personer med någon form av svårighet som använder vår webbplats, och hur det går. Låt oss uppskatta effekten av för dålig färgkontrast:
- 15% av befolkningen i världen har någon form av funktionsvariation.
- Ungefär 4% av befolkningen har nedsatt syn och cirka 0,6% är blinda.
- Mellan 7-12% av män och mindre än 1% av kvinnor har försämrat färgseende (eller färgblindhet).
- Nedsatt syn ökar med åldern. Hälften över 50 år har någon form av nedsatt syn.
- Befolkningen åldras. Snabbast växande gruppen är 60+.
- Över 40 behöver en majoritet någon form av hjälpmedel som läsglasögon för att se små objekt eller text.
Ändå faller vi för ofta i fällan att designa för någon slags perfekt syn. Särskilt när det kommer till färgvalen.
De mest accepterade riktlinjerna för tillgänglighet på webben, Web Content Accessibility Guidelines (WCAG) 2.0, ställer krav på färgkontrast.
Offentlig sektor använder dessa riktlinjer som obligatoriskt krav, och fler och fler företag inser vikten av dem.
När det gäller färger säger den vanligast använda nivån, WCAG 2.0 Level AA följande om färgkontrast:
The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.
Vad är rätt färgkontrast för webben?
När du skall välja färger behöver du alltså ha lite koll på hur stor kontrast som är läsbar för en majoritet.
Intuitivt vet vi att grått på svart är svårläst. Likaså märker vi snabbt att vitt på gult är svårt. Men någonstans märker du en flytande gräns där du själv kommer känna att det är ”tillräckligt stor kontrast”. I detta läge är det bra att utgå från statistik istället för personlig känsla. Du kanske har bättre syn än de flesta?
Enligt WCAG 2.0 AA vill du ha en kontrastratio på minst 4.5:1. Enklast är att ta hjälp av ett verktyg för att se om dina tänka färger har tillräckligt med kontrast mot varande. Ett sådant är WebAIM Color Contrast Checker.
Brödtext mot en vit bakgrund är ett av de vanligaste designbesluten. Många tjänster väljer text som är alldeles för ljusgrå.
Låt oss testa tre olika exempelfärger för text, mot en vid bakgrund (#FFFFFF).
- Mörkgrå text (
#333333) - Mellangrå text (
#666666) - Ljusgrå text (
#999999)
Som du ser, och kanske förväntade dig, klarar inte ljusgrå text kontrasterandet mot en vit bakgrund.
Du kan också använda verktyget till att hitta en färg som passar. Välj bara att mörka färgen så ger den dig den närmsta färgen som klarar kontastkraven.
Du kommer då märka att färgen #757575 mot en vit bakgrund är den ljusaste textfärg vi kan använda både i normal textstorlek och en lite större storlek för att klara av WCAG 2.0 nivå AA.
När du testar dina färger kan du komma att märka att vissa färger fungerar fint för exempelvis större text (rubriker) men inte för brödtext.
Har din webbplats tillräcklig färgkontrast?
Till hjälp finns en rad olika simulatorer och verktyg för att vi utan nedsatt syn skall kunna uppleva hur det ser ut med nedsatt syn.
NoCoffee Vision Simulator
Kan användas för att simulera försämrat färgseende på webbplatser via Google Chrome.
Chromatic Vision Simulator & VisionSim
Två olika mobilappar (gratis) som både kan simulera olika typer av synnedsättningar.
Chromatic: iOS | Android
VisionSim: iOS
Summering
När du väljer färger för en design, använd de verktyg som finns för att få rätt kontrast mellan förgrundsfärg och bakgrundsfärg.
Nedsatt syn är inte absolut. Som mycket annat är det en relativ skala. Bra färgkontrast och en metodik kring färgvalet som tar hänsyn till de med nedsatt syn gynnar alla.
Glöm inte bort att använda simulatorer emellanåt för att påminna dig om hur andra upplever webbplatsen, tjänsten eller appen som du designar.
Testa kontrasten i dina färgval. Du kommer snabbt att märka att små justeringar kan göra stor skillnad.
Framförallt, se till att bygga in sådana här tester i arbetsflödet. När du väl har blivit van vid att kolla kontrasten kommer du per automatik att börja välja färger som håller bättre ihop. Du skapar dig en intuitiv känsla.
