Använda hög färgkontrast för mer tillgänglig design

Webstandarder för färgkontrast

Färgkontrastförhållande mäter skillnaden i kontrast mellan två färger. Ju högre värdet är desto lättare är det att skilja objektet (text, bild, grafik) i förgrunden från bakgrunden.

Färger kan kontrast på många olika sätt, som i nyans, värde och mättnad. Färgkontrastförhållandet beräknas med en formel som tillhandahålls av W3C, den viktigaste internationella standardorganisationen för World Wide Web.

Det kan ta ett värde mellan 1: 1 (ingen kontrast alls, förgrunden och bakgrunden har samma färg) och 21: 1 (maximal kontrast som bara existerar mellan svart och vitt).

W3C: s senaste riktlinjer för webbåtkomståtkomst (WCAG) 2.0 ger webbutvecklare och innehållsskapare referensvärden för lägsta (nivå AA) och det förbättrade (nivå AAA) -värdet av acceptabelt färgkontrastförhållande.

Nivå AA kräver åtminstone 4,5: 1 förhållande för vanlig text, och 3: 1 för stor text. Det är mycket lättare att läsa stor text som undertexter, det är därför det behöver en lägre färgkontrast.

Om du vill nå nivå AAA som är den förbättrade nivån måste du utforma ditt färgschema med större försiktighet, eftersom det minst kräver 7: 1 kontrastförhållande för normal text, och 4,5: 1 för stor. Om en text är en del av en logotyp eller ett varumärke finns det inget minimikrav för färgkontrast på någon WCAG-nivå.

Vi kan bara ringa en webbplats visuellt tillgänglig om färgkontrastförhållandet mellan varje förgrundsobjekt och dess bakgrund når åtminstone nivå AA.

Fördelar med högfärgskontrastförhållande

Genom att säkerställa bättre läsbarhet engagerar du inte bara synskadade användare utan också människor som läser ditt innehåll på små skärmar som på en smartphone eller smartwatch, bland dåliga ljusförhållanden, och igen lägre kvalitetsmonitorer.

Människor läser också snabbare när det finns högre kontrast mellan texten och bakgrunden, så det kommer sannolikt att ta längre tid för dem att bli uttråkad med innehållet på webbplatsen.

Om du oroa dig för att tillämpa högre kontrastförhållande kommer att ha en negativ inverkan på designens estetik, måste du kolla in kontrastupprorets webbprojekt som visar att det i praktiken kan följa reglerna med hög kontrastförhållande fortfarande i attraktiva och coola mönster.

Appar för kontroll av färgkontrast

Det finns många bra gratis verktyg över hela webben som kan hjälpa designers att kontrollera färgkontrastförhållandet på deras hemsida.

Det enklaste sättet att testa din design för färgkontrast är att välja huvudfärgerna med antingen Photoshop eller en lämplig webbläsarutökning som den här för Firefox, och kopiera värdena till en av apparna nedan.

Det viktigaste att komma ihåg är att du alltid behöver jämföra förgrundsfärgen som textfärg till dess omgivande område (bakgrundsfärg).

1. WebAim Color Contrast Checker

WebAim (Web Accessibility In Mind) är en organisation som främjar webbtillgänglighet som erbjuder utvecklare en enkel men pålitlig färgkontrastkontroll bland många andra stora tillgänglighetsverktyg som Wave, en allmän tillgänglighetsutvärderingsapp som kan hjälpa dig utvärdera snabbt webbplatsens tillgänglighetsproblem.

WebAims Color Contrast Checker berättar om dina färger passerar WCAG AA och AAA testerna, både för normala och stora texter.

2. Snook Color Contrast Check

Jonathan Snook, som för närvarande arbetar som lead front end-utvecklare på Shopify, har varit värd för sitt praktiska färgkontrastkontrollverktyg i över ett decennium. Snook's app tillåter dig att ändra HSL- och RGB-värdena av förgrunden och bakgrundsfärgen en efter en genom att använda bekvämt räckvidd tills du når ett resultat som överensstämmer med WCAG 2.0-riktmärkena.

CheckMyColours

CheckMyColours skapad av Giovanni Scala kan du kontrollera färgkontrastförhållandet för alla förgrunds-bakgrundsfärgkombinationer på en levande hemsida.

Det beräknas ljusstyrka kontrastförhållande, ljusstyrka skillnad, och färgskillnad, och ger dig en fullständig rapport om resultaten. CheckMyColours rapport kan väsentligt underlätta din förståelse för hur du kan förbättra din webbplatss visuella tillgänglighet.

Färgscheman Designer

Color Scheme Designer är inte särskilt en färgkontrastkontroll, men ett verktyg för utforma kompletta färgscheman.

Vi inkluderar den i den här samlingen, eftersom den har en funktion som låter dig se hur ditt färgschema uppfattas av personer med olika typer av visuella funktionshinder. Du kan testa dina färger för fullfärgslindhet, protanopi, deuteranopi och många andra synproblem. Appen har en nyare version som heter Paletton som gör det möjligt att göra en mer sofistikerad synssimulering (du kan också testa för saker som elak LED-display eller svag CRT-skärm).

W3C ger dig också en enorm lista över verktyg för webbutvärderingsverktyg där du kan hitta många andra färgkontrastverktyg som det här hjälpmedelhjulet för tillgänglighet.

Tips för att skapa visuellt åtkomliga webbplatser

Om du vill skapa en visuellt tillgänglig webbplats är det alltid en bra idé att Undvik att använda färg ensam för att förmedla funktionalitet eller mening. Ikoner som ändrar sin färg baserat på deras nuvarande tillstånd är typiska exempel på detta.

Om det är möjligt, alltid utforma ytterligare visuella signaler som hjälper människor som ser färger annorlunda när man förstår funktionalitet.

Glöm aldrig att Var extra uppmärksam på färgkontrast av knappar, länkar och menyer, som de är sättet att navigera på din webbplats. Om användare inte kan navigera lätt på din webbplats kommer du snabbt att förlora dem. Tillgängliga färger för knapptryckningar är också avgörande för goda omräkningskurser.

Det är en bra arbetsflödesövning för att testa färgkontrastprocent så tidigt som möjligt i konstruktionsprocessen, eftersom det kommer vara svårt att övertyga din klient att ändra sidans färgschema senare på designprocessen.

Läs nu: Praktisk tillvägagångssätt för att välja webbplatsens färgschema