Idag är en värld av inkluderande teknologi: webbplatser, applikationer och tekniska enheter designade för människor med olika typer av förmågor och funktionshinder. Så när du designar en webbplats inkluderar du funktioner som gör din design tillgänglig för så många människor som möjligt. Och det är här tillgänglighetsverktyg kommer in i bilden.
Istället för att skapa allt från grunden, här är en lista med bra tillgänglighetsverktyg för designers. Från att skapa färgscheman baserade på WCAG-standarder till att lägga till olika läslägen på din webbplats, dessa verktyg är ett måste för varje designer. Ta en titt på listan för att lära dig mer om varje verktyg i detalj.
1. Färgkontrastkontroll
Att tillämpa rätt färgkontrast på en webbplats är en viktig del av Webbplatsinnehållstillgänglighetsriktlinjerna (WCAG) och Americans with Disabilities Act (ADA).
Vissa synskadade användare har svårt att skilja bakgrunden från förgrunden på en webbsida, vilket gör det omöjligt för dem att läsa eller interagera med den; Det är här färgkontrastförhållanden spelar in.
WCAG 2.2 kräver ett färgkontrastförhållande på minst 4:5:1 för text, grafik och standardkomponenter för användargränssnitt. För stor text bör förhållandet vara minst 3:1.
Att ha färgkontrasten i åtanke under designprocessen hjälper dig att undvika tillgänglighetsproblem senare. Använder denna kontrastkontroll av Tillgänglighetskontroll kommer att se till att du uppfyller de nödvändiga kraven från början.
- Stöder: Webbläsare
- Färg Kontrast Checker Pris: Fri
- Premiumapp/prenumerationer? Nej
2. Stel
Stark är ett funktionsspäckat tillgänglighetsverktyg som hjälper webb- och mobildesigners att lägga till tillgänglighetsfunktioner i sina UI-designer så att deras design fungerar för alla. Oavsett om du designar en produkt från grunden eller uppdaterar ditt befintliga designsystem, ger det dig ett enkelt sätt att skapa tillgängliga produkter på alla nivåer.
En av de bästa sakerna med det här verktyget är att det integreras sömlöst med Figma, Sketch, Adobe XD och Google Chrome och stöder läsare under hela produktens livscykel. Några av tillgänglighetsfunktionerna som verktyget kan lägga till din design är kontraktskontroll, färgblindgenerator, snabb kontrastkontroll och många fler.
- Stöder: Figma, Adobe XD, Sketch
- Högt pris: Fri
- Premiumapp/prenumerationer? Ja (Kolla priser)
3. Colorsafe
För att göra din webbplats tillgänglig för användare med olika visuella förmågor erbjuder ColorSafe ett antal funktioner som är mycket enkla att integrera i din design. Det låter dig skapa visuellt vackra och funktionellt tillgängliga färgpaletter, samt text- och bakgrundskontrastförhållanden baserat på WCAG-riktlinjer.
Driften av detta verktyg är ganska enkel. Allt du behöver göra är att ange en bakgrundsfärg och bestämma stilen på din text så gör ColorSafe resten. När du väl har bestämt dig för kontrastförhållandet mellan texten och bakgrunden kan du applicera det på din design och testa resultaten.
- Stöder: Webbläsare
- ColorSafe Pris: Fri
- Premiumapp/prenumerationer? Nej
4. Kontrast
Precis som namnet antyder är Contrast ett tillgänglighetsverktyg som tar bort det manuella arbetet med att testa färgkontrastförhållandet och gör det snabbt och automatiskt. Skapad av två professionella designers som visste hur nödvändigt ett verktyg av denna typ var ur synvinkeln av användbarhet och estetik.
Eftersom det är ett lättanvänt verktyg, ger det dig exakt information om färgkontrast (kontrastpoäng) enligt WCGA-standarder och uppdaterar hela applikationen i en handvändning. Men i skrivande stund är den endast tillgänglig för macOS.
- Stöder: Mac OS
- Kontrastpris: 6,99 USD
- Premiumapp/prenumerationer? Ja
5. Färggranskning
Color Review är ett enkelt webbaserat verktyg som hjälper dig att fatta ett välgrundat beslut om vilka färger och färgkombinationer du ska använda i din design av användargränssnitt, särskilt när det gäller att skapa en design för människor som uppfattar färger annorlunda än andra.
Verktyget är byggt på basis av WCAGs visuella designstandarder och fungerar på två nivåer, det vill säga AA och den strängare AAA. Det finns också en Color Review-app tillgänglig för macOS, Windows, iPhone och Android med coola funktioner som swatches och ögondroppar och kräver att du registrerar dig för att få den.
- Stöder: Webbläsare
- Pris för färgrevision: Fri
- Premiumapp/prenumerationer? Nej
6. Av färger
Colorable är en webbaserad färgschemakontrasttestare som låter dig bestämma det lämpligaste kontrastförhållandet mellan bakgrund och text för din webbplats eller mobilapps gränssnittsdesign. Med ett godkänt/underkänt betyg baserat på WCAG:s riktlinjer för tillgänglighet kan du göra ditt användargränssnitt allmänt tillgängligt för användare, särskilt de med synnedsättning.
Med detta verktyg kan du ta en etablerad färgpalett och omedelbart få kontrastvärden i olika typer av kombinationer. För att använda den anger du helt enkelt en rad färgsträngar eller ett objekt med färgsträngar som värden och det kommer att returnera en lista med färgkombinationer för dessa färger tillsammans med deras WCAG-kontrastvärden.
- Stöder: Webbläsare
- Färgbart pris: Fri
- Premiumapp/prenumerationer? Nej
7. A11y-projektet
Genom att erbjuda en vacker, tillgänglig och inkluderande digital upplevelse, försvarar Project A11y värdet av att ge lika möjligheter när det kommer till design och teknik. Det hjälper dig att utveckla fullt tillgängliga produkter tack vare en mängd underbara resurser som bakgrunder, ikoner, färgpaletter och användbara guider.
Det bästa med det här verktyget är att det skapas och ständigt uppdateras av en gemenskap av begåvade människor. Dessutom finns det ett alternativ som hjälper dig att genomföra en tillgänglighetsrevision genom en omfattande checklista i enlighet med riktlinjer för tillgänglighet.
- Stöder: Webbläsare
- Priset för A11y-projektet: Fri
- Premiumapp/prenumerationer? Nej
8. Kontrastrutnät
När du arbetar med ett stort webb- eller mobilappdesignprojekt har du många val att göra när det gäller färgscheman. Contrast Grid är ett verktyg som låter dig testa olika kombinationer av förgrunds- och bakgrundsfärger.
Det webbaserade verktyget har ett enkelt gränssnitt där du manuellt kan ange olika färger som du vill använda som rader och kolumner och det kommer att skapa ett rutnät som uppfyller minimikraven för kontrast i WCAG 2.). Du kan sedan kopiera rutnätskoden till HTML eller CSS och till och med dela ditt rutnät på Twitter.
- Stöder: Webbläsare
- Pris för kontrastnät: Fri
- Premiumapp/prenumerationer? Nej
9. clrs.cc
Clrs.cc är ett slags bibliotek eller förråd av olika färgkombinationer som ger dig en god dos inspiration för att skapa ett tillgängligt användargränssnitt för personer som är färgblinda eller synskadade. Från en ljus bakgrund till en mörk bakgrund hittar du många intressanta alternativ för färgkombinationer.
Det finns totalt 90 färgkombinationer på sajten tillsammans med deras respektive kontrastvärden, samt AA- eller AAA-värden. Du kan välja vilken som helst av dessa bakgrunds- och textförhållanden eller helt enkelt blanda och matcha dem för att skapa dina egna.
- Stöder: Webbläsare
- Clrs.cc Pris: Fri
- Premiumapp/prenumerationer? Nej
10. Vem kan använda?
Vem kan använda är ett intressant verktyg som hjälper grafiska designers och webbdesigners att förstå hur olika färgkombinationer och kontraster påverkar människor med olika synskada. Att använda plugins som Chroma.js och Color-blind hjälper till att göra din design inkluderande för alla.
Med hänsyn till WCAG-rekommendationer har detta intuitiva verktyg en bakgrundsfärgväljare med skjutreglage och talar om kontrastförhållandet och WCAG-graderingen för varje färg. Dessutom kan du med varje färg se hur människor med olika typer av syn ser det tillsammans med en simulering.
- Stöder: Webbläsare
- Vem kan använda priset? Fri
- Premiumapp/prenumerationer? Nej
Kusin: färglåda
Colorbox är ett enkelt verktyg som låter dig skapa färgscheman för tillgängliga användargränssnitt som gör din webbplats användbar för synskadade användare. Du kan välja en eller flera färger och manuellt lägga till värden för nyans, mättnad och ljusstyrka.
Verktyget låter dig också importera färgkoder för korrekta färgmatchningsalternativ, ett alternativ för att exportera vald färginformation som färgkoder som du kan integrera i din webbdesign, samt dela webbadressen till färginformationen du väljer.
- Stöder: Webbläsare
- Pris för färglåda: Fri
- Premiumapp/prenumerationer? Nej
