Idag \u00e4r en v\u00e4rld av inkluderande teknologi: webbplatser, applikationer och tekniska enheter designade f\u00f6r m\u00e4nniskor med olika typer av f\u00f6rm\u00e5gor och funktionshinder. S\u00e5 n\u00e4r du designar en webbplats inkluderar du funktioner som g\u00f6r din design tillg\u00e4nglig f\u00f6r s\u00e5 m\u00e5nga m\u00e4nniskor som m\u00f6jligt. Och det \u00e4r h\u00e4r tillg\u00e4nglighetsverktyg kommer in i bilden.<\/p>\n
Ist\u00e4llet f\u00f6r att skapa allt fr\u00e5n grunden, h\u00e4r \u00e4r en lista med bra tillg\u00e4nglighetsverktyg f\u00f6r designers. Fr\u00e5n att skapa f\u00e4rgscheman baserade p\u00e5 WCAG-standarder till att l\u00e4gga till olika l\u00e4sl\u00e4gen p\u00e5 din webbplats, dessa verktyg \u00e4r ett m\u00e5ste f\u00f6r varje designer. Ta en titt p\u00e5 listan f\u00f6r att l\u00e4ra dig mer om varje verktyg i detalj.<\/p>\n
Att till\u00e4mpa r\u00e4tt f\u00e4rgkontrast p\u00e5 en webbplats \u00e4r en viktig del av Webbplatsinneh\u00e5llstillg\u00e4nglighetsriktlinjerna (WCAG) och Americans with Disabilities Act (ADA). <\/p>\n
Vissa synskadade anv\u00e4ndare har sv\u00e5rt att skilja bakgrunden fr\u00e5n f\u00f6rgrunden p\u00e5 en webbsida, vilket g\u00f6r det om\u00f6jligt f\u00f6r dem att l\u00e4sa eller interagera med den; Det \u00e4r h\u00e4r f\u00e4rgkontrastf\u00f6rh\u00e5llanden spelar in. <\/p>\n
WCAG 2.2 kr\u00e4ver ett f\u00e4rgkontrastf\u00f6rh\u00e5llande p\u00e5 minst 4:5:1 f\u00f6r text, grafik och standardkomponenter f\u00f6r anv\u00e4ndargr\u00e4nssnitt. F\u00f6r stor text b\u00f6r f\u00f6rh\u00e5llandet vara minst 3:1. <\/p>\n
Att ha f\u00e4rgkontrasten i \u00e5tanke under designprocessen hj\u00e4lper dig att undvika tillg\u00e4nglighetsproblem senare. Anv\u00e4nder denna kontrastkontroll av Tillg\u00e4nglighetskontroll<\/a> kommer att se till att du uppfyller de n\u00f6dv\u00e4ndiga kraven fr\u00e5n b\u00f6rjan. <\/p>\n Stark \u00e4r ett funktionssp\u00e4ckat tillg\u00e4nglighetsverktyg som hj\u00e4lper webb- och mobildesigners att l\u00e4gga till tillg\u00e4nglighetsfunktioner i sina UI-designer s\u00e5 att deras design fungerar f\u00f6r alla. Oavsett om du designar en produkt fr\u00e5n grunden eller uppdaterar ditt befintliga designsystem, ger det dig ett enkelt s\u00e4tt att skapa tillg\u00e4ngliga produkter p\u00e5 alla niv\u00e5er.<\/p>\n En av de b\u00e4sta sakerna med det h\u00e4r verktyget \u00e4r att det integreras s\u00f6ml\u00f6st med Figma, Sketch, Adobe XD och Google Chrome och st\u00f6der l\u00e4sare under hela produktens livscykel. N\u00e5gra av tillg\u00e4nglighetsfunktionerna som verktyget kan l\u00e4gga till din design \u00e4r kontraktskontroll, f\u00e4rgblindgenerator, snabb kontrastkontroll och m\u00e5nga fler.<\/p>\n F\u00f6r att g\u00f6ra din webbplats tillg\u00e4nglig f\u00f6r anv\u00e4ndare med olika visuella f\u00f6rm\u00e5gor erbjuder ColorSafe ett antal funktioner som \u00e4r mycket enkla att integrera i din design. Det l\u00e5ter dig skapa visuellt vackra och funktionellt tillg\u00e4ngliga f\u00e4rgpaletter, samt text- och bakgrundskontrastf\u00f6rh\u00e5llanden baserat p\u00e5 WCAG-riktlinjer.<\/p>\n Driften av detta verktyg \u00e4r ganska enkel. Allt du beh\u00f6ver g\u00f6ra \u00e4r att ange en bakgrundsf\u00e4rg och best\u00e4mma stilen p\u00e5 din text s\u00e5 g\u00f6r ColorSafe resten. N\u00e4r du v\u00e4l har best\u00e4mt dig f\u00f6r kontrastf\u00f6rh\u00e5llandet mellan texten och bakgrunden kan du applicera det p\u00e5 din design och testa resultaten.<\/p>\n Precis som namnet antyder \u00e4r Contrast ett tillg\u00e4nglighetsverktyg som tar bort det manuella arbetet med att testa f\u00e4rgkontrastf\u00f6rh\u00e5llandet och g\u00f6r det snabbt och automatiskt. Skapad av tv\u00e5 professionella designers som visste hur n\u00f6dv\u00e4ndigt ett verktyg av denna typ var ur synvinkeln av anv\u00e4ndbarhet och estetik.<\/p>\n Eftersom det \u00e4r ett l\u00e4ttanv\u00e4nt verktyg, ger det dig exakt information om f\u00e4rgkontrast (kontrastpo\u00e4ng) enligt WCGA-standarder och uppdaterar hela applikationen i en handv\u00e4ndning. Men i skrivande stund \u00e4r den endast tillg\u00e4nglig f\u00f6r macOS.<\/p>\n Color Review \u00e4r ett enkelt webbaserat verktyg som hj\u00e4lper dig att fatta ett v\u00e4lgrundat beslut om vilka f\u00e4rger och f\u00e4rgkombinationer du ska anv\u00e4nda i din design av anv\u00e4ndargr\u00e4nssnitt, s\u00e4rskilt n\u00e4r det g\u00e4ller att skapa en design f\u00f6r m\u00e4nniskor som uppfattar f\u00e4rger annorlunda \u00e4n andra.<\/p>\n Verktyget \u00e4r byggt p\u00e5 basis av WCAGs visuella designstandarder och fungerar p\u00e5 tv\u00e5 niv\u00e5er, det vill s\u00e4ga AA och den str\u00e4ngare AAA. Det finns ocks\u00e5 en Color Review-app tillg\u00e4nglig f\u00f6r macOS, Windows, iPhone och Android med coola funktioner som swatches och \u00f6gondroppar och kr\u00e4ver att du registrerar dig f\u00f6r att f\u00e5 den.<\/p>\n Colorable \u00e4r en webbaserad f\u00e4rgschemakontrasttestare som l\u00e5ter dig best\u00e4mma det l\u00e4mpligaste kontrastf\u00f6rh\u00e5llandet mellan bakgrund och text f\u00f6r din webbplats eller mobilapps gr\u00e4nssnittsdesign. Med ett godk\u00e4nt\/underk\u00e4nt betyg baserat p\u00e5 WCAG:s riktlinjer f\u00f6r tillg\u00e4nglighet kan du g\u00f6ra ditt anv\u00e4ndargr\u00e4nssnitt allm\u00e4nt tillg\u00e4ngligt f\u00f6r anv\u00e4ndare, s\u00e4rskilt de med synneds\u00e4ttning.<\/p>\n Med detta verktyg kan du ta en etablerad f\u00e4rgpalett och omedelbart f\u00e5 kontrastv\u00e4rden i olika typer av kombinationer. F\u00f6r att anv\u00e4nda den anger du helt enkelt en rad f\u00e4rgstr\u00e4ngar eller ett objekt med f\u00e4rgstr\u00e4ngar som v\u00e4rden och det kommer att returnera en lista med f\u00e4rgkombinationer f\u00f6r dessa f\u00e4rger tillsammans med deras WCAG-kontrastv\u00e4rden.<\/p>\n Genom att erbjuda en vacker, tillg\u00e4nglig och inkluderande digital upplevelse, f\u00f6rsvarar Project A11y v\u00e4rdet av att ge lika m\u00f6jligheter n\u00e4r det kommer till design och teknik. Det hj\u00e4lper dig att utveckla fullt tillg\u00e4ngliga produkter tack vare en m\u00e4ngd underbara resurser som bakgrunder, ikoner, f\u00e4rgpaletter och anv\u00e4ndbara guider.<\/p>\n Det b\u00e4sta med det h\u00e4r verktyget \u00e4r att det skapas och st\u00e4ndigt uppdateras av en gemenskap av beg\u00e5vade m\u00e4nniskor. Dessutom finns det ett alternativ som hj\u00e4lper dig att genomf\u00f6ra en tillg\u00e4nglighetsrevision genom en omfattande checklista i enlighet med riktlinjer f\u00f6r tillg\u00e4nglighet.<\/p>\n N\u00e4r du arbetar med ett stort webb- eller mobilappdesignprojekt har du m\u00e5nga val att g\u00f6ra n\u00e4r det g\u00e4ller f\u00e4rgscheman. Contrast Grid \u00e4r ett verktyg som l\u00e5ter dig testa olika kombinationer av f\u00f6rgrunds- och bakgrundsf\u00e4rger.<\/p>\n Det webbaserade verktyget har ett enkelt gr\u00e4nssnitt d\u00e4r du manuellt kan ange olika f\u00e4rger som du vill anv\u00e4nda som rader och kolumner och det kommer att skapa ett rutn\u00e4t som uppfyller minimikraven f\u00f6r kontrast i WCAG 2.). Du kan sedan kopiera rutn\u00e4tskoden till HTML eller CSS och till och med dela ditt rutn\u00e4t p\u00e5 Twitter.<\/p>\n Clrs.cc \u00e4r ett slags bibliotek eller f\u00f6rr\u00e5d av olika f\u00e4rgkombinationer som ger dig en god dos inspiration f\u00f6r att skapa ett tillg\u00e4ngligt anv\u00e4ndargr\u00e4nssnitt f\u00f6r personer som \u00e4r f\u00e4rgblinda eller synskadade. Fr\u00e5n en ljus bakgrund till en m\u00f6rk bakgrund hittar du m\u00e5nga intressanta alternativ f\u00f6r f\u00e4rgkombinationer.<\/p>\n Det finns totalt 90 f\u00e4rgkombinationer p\u00e5 sajten tillsammans med deras respektive kontrastv\u00e4rden, samt AA- eller AAA-v\u00e4rden. Du kan v\u00e4lja vilken som helst av dessa bakgrunds- och textf\u00f6rh\u00e5llanden eller helt enkelt blanda och matcha dem f\u00f6r att skapa dina egna.<\/p>\n Vem kan anv\u00e4nda \u00e4r ett intressant verktyg som hj\u00e4lper grafiska designers och webbdesigners att f\u00f6rst\u00e5 hur olika f\u00e4rgkombinationer och kontraster p\u00e5verkar m\u00e4nniskor med olika synskada. Att anv\u00e4nda plugins som Chroma.js och Color-blind hj\u00e4lper till att g\u00f6ra din design inkluderande f\u00f6r alla.<\/p>\n Med h\u00e4nsyn till WCAG-rekommendationer har detta intuitiva verktyg en bakgrundsf\u00e4rgv\u00e4ljare med skjutreglage och talar om kontrastf\u00f6rh\u00e5llandet och WCAG-graderingen f\u00f6r varje f\u00e4rg. Dessutom kan du med varje f\u00e4rg se hur m\u00e4nniskor med olika typer av syn ser det tillsammans med en simulering.<\/p>\n Colorbox \u00e4r ett enkelt verktyg som l\u00e5ter dig skapa f\u00e4rgscheman f\u00f6r tillg\u00e4ngliga anv\u00e4ndargr\u00e4nssnitt som g\u00f6r din webbplats anv\u00e4ndbar f\u00f6r synskadade anv\u00e4ndare. Du kan v\u00e4lja en eller flera f\u00e4rger och manuellt l\u00e4gga till v\u00e4rden f\u00f6r nyans, m\u00e4ttnad och ljusstyrka.<\/p>\n Verktyget l\u00e5ter dig ocks\u00e5 importera f\u00e4rgkoder f\u00f6r korrekta f\u00e4rgmatchningsalternativ, ett alternativ f\u00f6r att exportera vald f\u00e4rginformation som f\u00e4rgkoder som du kan integrera i din webbdesign, samt dela webbadressen till f\u00e4rginformationen du v\u00e4ljer.<\/p>\n\n
<\/span>2. Stel<\/a><\/span><\/h4>\n
\n
<\/span>3. Colorsafe<\/a><\/span><\/h4>\n
\n
<\/span>4. Kontrast<\/a><\/span><\/h4>\n
\n
<\/span>5. F\u00e4rggranskning<\/a><\/span><\/h4>\n
\n
<\/span>6. Av f\u00e4rger<\/a><\/span><\/h4>\n
\n
<\/span>7. A11y-projektet<\/a><\/span><\/h4>\n
\n
<\/span>8. Kontrastrutn\u00e4t<\/a><\/span><\/h4>\n
\n
<\/span>9. clrs.cc<\/a><\/span><\/h4>\n
\n
<\/span>10. Vem kan anv\u00e4nda?<\/a><\/span><\/h4>\n
\n
<\/span>Kusin: f\u00e4rgl\u00e5da<\/a><\/span><\/h4>\n
\n