Dina varumärkesfärger har en stark känslomässig inverkan, men hur ser de ut för webbplatsbesökare som är synskadade, färgblinda eller möter miljöfaktorer som gör synligheten svår?
Färg- och kontrastnivåer är avgörande för kommunikation, och att få dessa detaljer helt rätt är avgörande för den tillgänglighetsinriktade designern.'
Färguppfattningsstörningar är vanligare än man kan tro. Så i det här inlägget kommer vi att prata om hur personer med funktionsnedsättningar som nedsatt syn, dyslexi och färgblindhet interagerar med webben.
Innehållsförteckning
Hur använder jag en färgkontroll för att förbättra tillgängligheten för min webbplats?
Det här avsnittet är faktiskt ganska enkelt, även om det kräver lite ansträngning. Du måste använda WebAIMs online Contrast Checker-verktyg. WebAIM är en ideell organisation baserad vid Utah State University med uppdraget att förbättra webbtillgängligheten över hela världen.
Ange helt enkelt din förgrundsfärg (t.ex. färgen på din text eller ikoner) och bakgrundsfärg som hexadecimala värden (även kända som hexvärden), som specificeras i html eller CSS, och kontrastförhållandekontrollen kommer att informera dig om förhållandet är tillräckligt. Kom ihåg att det minsta kontrastförhållandet du bör eftersträva är 4.5 till 1. Svart text på vit bakgrund har ett kontrastförhållande på 21 till 1, så du har ett stort spelrum.
5 verktyg för att skapa en webbfärgpalett som alla kan se
1. WebAIM Color Contrast Checker
Ange hex-färgerna för förgrunden och bakgrunden. Utdata visar AA- och AAA-kompatibilitet för normal och stor text, tillsammans med en exempelmening. Med skjutreglagen kan du ändra saker tills du hittar en bra kombination.
Styrkor
- Enkelt verktyg med ett gränssnitt som är lätt för ögonen.
- Detta är ett trevligt, enkelt verktyg för nybörjare och inte bara designers.
svagheter
- Kan inte jämföra mer än två färger, bara två.
- Reglaget för ljushet är inte ett bra sätt att välja färger. Det är svårt att säga hur attraktiva färger är i denna enkla display.
2. Kontrastkontroll för WCAG
Ange hex-färgerna för förgrunden och bakgrunden. Visar AA- och AAA-kompatibilitet för normal och stor text bredvid ett prov av Lorem Ipsum-text. Du kan också ladda upp en bild. En palett med 9 färger väljs automatiskt åt dig. Sedan kan du jämföra varje färg som antingen förgrunds- eller bakgrundsfärg.
Styrkor
- Enkelt verktyg med ett användarvänligt gränssnitt.
- Att ha förmågan att göra paletter från bilder.
svagheter
- Paletten väljs automatiskt och du kan ändra den ytterligare med färgväljaren, men dessa ändringar sparas inte tillbaka i paletten. Man måste kopiera och klistra in informationen i ett nytt dokument.
3. Färgkub
Ange färgerna för paletten, var och en på sin egen rad. Utdata visar exempelbokstäver med kontrastförhållanden jämfört med AA-standarder för små och stora teckensnitt. Tre kolumner visar kontrast med en vit bakgrund, en svart bakgrund och en uppsättning märkesfärger som är de "mest läsbara från tillgängliga."
Styrkor
- Lätt för ögonen Användargränssnittet (UI) är välorganiserat och statusen godkänt/underkänd/kant är lätt att se.
svagheter
- Uppfyller inte de standarder som fastställts av AAA.
- Gör inte alla möjliga färgkombinationer, och det är först inte klart att så är fallet.
4.) Åtta former Kontrastrutnät
Ange palettfärger. Du kan också ge varje färg ett namn. Appen skapar ett bord med alla möjliga kombinationer av färger. Det finns tre storlekar av plattor. Det finns visuella signaler för AA och AAA godkänd/misslyckad/kant och effektivt kontrastförhållande. Kolumner och rader kan flyttas runt i appen genom att dra och släppa. Tabelldata kan sparas, exporteras och delas.
Styrkor
- Det finns många användbara funktioner som hjälper till med analysen av hela paletter.
svagheter
- Det är svårare att lära sig än andra verktyg som är lättare att använda.
- Inte rätt sätt att jämföra bara två färger.
- Inte bra för att ta reda på hur färger går ihop.
- Lite överväldigande att se på, men det är mycket information som visas.
5. Färgsäker
Skriv in bakgrundsfärgen. Välj typsnittets familj, storlek och vikt. Välj AA eller AAA som standard. Visar den valda färgen och dess hex-kod, samt ett prov och det effektiva kontrastförhållandet. De stora miniatyrerna av möjliga förgrundsfärger med tillräckligt med kontrast är den bästa delen. Du kan välja att titta på dem alla eller bara vissa färggrupper (grönt, blått, lila, etc.)
Styrkor
- Med ett gränssnitt som är lätt för ögonen är det lätt att hitta en kombination av färger som ser bra ut och fungerar bra.
- Det här är ett användbart verktyg om du inte redan har en varumärkesfärgpalett eller om du vill lägga till en som du redan har för webben.
svagheter
- Du kan bara jämföra förgrunds- och bakgrundsfärger åt gången.
- Du måste kopiera och klistra in färger i ett separat dokument om du vill spara dem.
- Gå ut och gör saker för alla!
När du väl vet hur du använder dessa verktyg kan du upptäcka att du behöver mer än ett för ett projekt. Kanske är Color Cube det bästa sättet att visa en kund vad du har lärt dig om tillgänglighet. Kanske kommer du att använda WebAIMs verktyg hela tiden för att göra snabba stickprovskontroller.
Slutsats
Med hjälp av tipsen, riktlinjerna och verktygen vi just pratade om kan du ge din webbplats färger och etiketter med hög kontrast. Detta kommer att göra det lättare för personer med nedsatt syn, dyslexi och färgblindhet att läsa din webbplats och ditt innehåll. Bli inte förvånad om din allmänna publik också tycker att det är lättare att använda din webbplats.
