Vad är WCAG-förhållandet? Varför du bör implementera det i dina designs

Web Content Accessibility Guidelines (WCAG) är riktlinjer för tillgänglighet för digital design och webbdesign. Att följa dessa riktlinjer säkerställer att färgerna är tillräckligt kontrasterande för att hjälpa personer med synnedsättning att se och läsa dina mönster ordentligt. Detta går också hand i hand med typografisk storlek, för att säkerställa dess läsbarhet tillsammans med färgerna.

I en värld som borde vara mer inkluderande, kommer att lägga till tillgängliga element i dina designs bara lyfta ditt arbete och låta dig dela det med fler människor.

Vad är WCAG-förhållandet?

WCAG står för Riktlinjer för tillgänglighet till webbinnehåll. WCAG hjälper alla som designar eller skapar för webben eller internet att säkerställa att deras design når tillgänglighetsmålen. Detta innebär att dina mönster kan avnjutas och användas av alla, utan att utesluta personer med synnedsättning eller andra funktionshinder när det är möjligt.

WCAG-förhållandet anger minimiförhållandena för att nå målets tillgänglighet. Detta inkluderar färgkontrast och textstorlek, som båda säkerställer att de med synnedsättning har en bättre chans att se, interagera med och använda dina mönster. Att nå WCAG-förhållandet hjälper inte bara dem med synnedsättning, utan det ökar också användarupplevelsen för alla webbanvändare.

De World Wide Web Consortium utvecklar standarder för webbutveckling. Även om det inte finns några fasta regler för webbtillgänglighet, sätter WCAG en standard att följa som alla webbdesigners bör följa.

Vid testning av kontrastförhållanden föreslår WCAG betyget A till AAA. En A-klassificering visar de lägsta kontrastnivåerna. AA är kontrastnivåer i mellanområdet med ett förhållande på 4,5:1 – som anses vara det lägsta förhållandet. Slutligen är AAA den högsta kontrastnivån. Om du designar för alla är dina kontrastnivåer bäst mellan AA och AAA.

Varför är WCAG-förhållandet viktigt i grafisk design och webbdesign?

Grafisk design och webbdesign ska inte bara få information att se vacker ut. Informationsdesign informerar massorna – det här innebär att göra din information tillgänglig för alla. WCAG-implementering säkerställer tillgängliga design för personer med synnedsättning, dyslexi, neurodivergens eller något som påverkar någons syn eller läsförmåga.

Webb- och digitaldesign – såväl som programmering – har redan etablerade tillgänglighetsfunktioner på plats. Till exempel, Windows tillhandahåller användbara tillgänglighetsverktyg för användare, och det är redan vanligt för de flesta YouTube-videor att erbjuda undertexter eller bildtexter. Men vi kan alltid förbättra tillgängligheten.

Global design skapar bättre design. Ju fler människor som kan engagera sig i din design, desto mer framgångsrik är den och desto större räckvidd har den. Det är inte bara bra för dig som designer att nå fler människor, utan det är också bättre för världen att färre människor utesluts.

Att designa med WCAG-förhållandet och tillgänglighetsfunktioner i dina mönster kommer att ha positiva effekter på färgpaletter, typografival och textstorlekar. Du skulle inte medvetet designa något svårt att läsa, så varför skulle du inte inkludera fler sätt att skapa design med bättre läsbarhet för alla människor?

Implementera WCAG-förhållandet i dina konstruktioner

Det finns ställen där du kan kontrollera WCAG-förhållandet i dina mönster, som detta kontrastkontroll hemsida. Men du bör börja med att implementera tillgängliga designfunktioner i ditt arbete ändå utan att förlita dig på att kontrollera mot det absoluta minimum.

Det bör noteras att kontrastriktlinjerna inte gäller logotypdesign. Detta beror på att logotyper presenteras i varierande storlekar och ofta mot olika bakgrunder. Det skadar dig dock inte att överväga WCAG-förhållandet när du designar logotyper.

Färger med hög kontrast

Att använda färger med hög kontrast är ett enkelt sätt att lägga till inkludering till dina mönster. Färger som kontrasterar mot varandra hjälper dem med synnedsättning och färgblindhet att se dina mönster bättre. Inte nog med det, utan även människor utan synfel kommer bättre att se – och engagera sig i – din design.

Har du någonsin försökt läsa en ljusrosa text på en ljusgrön bakgrund? Det är nästan omöjligt. Men en mörkblå text på ljusgul bakgrund är mycket lättare att se och läsa.

Färger med hög kontrast fungerar bäst när du placerar text på en färgbakgrund eller om du använder små banor i dina illustrationer. Khroma är en AI-färgpalettgenerator som kommer med en inbyggd kontrastkontroll – en av många fantastiska AI-verktyg för att hjälpa ditt grafiska designarbetsflöde.

Ett bra sätt att kontrollera kontrasten är att vända din design till gråskala. Om du kan separera färgerna och förstå designen i svart och grått, bör det översättas väl i dina valda färger också.

Textstorlek

Tillsammans med textfärger som kontrasteras tillräckligt mot bakgrundsfärger, bör din text vara tillräckligt stor för att lätt kunna läsas. WCAG-förhållandet för stor textstorlek är 3:1.

Textstorleken är inte lika för all typografi, så lita inte på en 12-punktsstorlek – vilket vanligtvis ses som minimistorleken för standardläsbarhet – för alla typsnitt. Testa dem själv eller med användartestare genom att visa eller skriva ut design i verklig storlek. Om dina färger inte kontrasteras så bra, kommer större text att underlätta läsbarheten, som en lösning.

Fontläsbarhet

Det säger sig självt, men typsnitten du väljer i dina designs måste vara lättlästa. Dekorativa typsnitt, kursiva typsnitt eller handritade typsnitt har ofta problem med läsbarheten. Heavy metal-band är kända för att använda i sig svårlästa typsnitt för sina bandlogotyper, till exempel.

Du bör också överväga kerning och spårning när du använder din text för små mönster. Bokstavsavstånd kan också påverka ords avsedda läsbarhet.

Inkluderande tillgänglighetsfaktorer

Medan endast färgkontrast, teckenstorlek och läsbarhet för text i webbdesign beaktas i WCAG-förhållanden, bör du göra alla dina webb- och grafiska mönster med inkludering i åtanke.

Om du är en webbdesigner som arbetar med en programmerare eller kodare, se till att du är det använder HTML-tekniker som underlättar webbtillgänglighet. Det finns också tillgänglighetsfunktioner i Canva för att utöka räckvidden för dina designs med din publik.

Du bör inte bara stanna vid minimikraven för WCAG-kvoterna; om du har kontroll över att lägga till alt-text till bilder, bildtexter till ljud- eller videofiler, eller till och med användbar formulering av text för hyperlänkar – som läses upp av skärmläsare – du bör gå över och bortom. Att inkludera tillgänglighetsfunktioner utesluter inte någon publik – det bjuder bara in fler personer.

Att designa med WCAG-förhållandet förbättrar design för alla

Standarderna för webbdesign kommer från World Wide Web Consortium, en gemenskap som hjälper till med bästa praxis över hela webben. Konsortiet utvecklade riktlinjerna för tillgänglighet för webbinnehåll, som webbdesigners bör följa. Detta ger en kvotstandard för synlighetskontroller vid design för webben.

Att följa dessa riktlinjer och förhållandestandarder innebär att dina webbdesigner kan nås av fler människor.