Innehållsförteckning
Tillgänglig design på Android handlar om att skapa appar som fungerar för alla genom Material Design principer. Här får du praktisk vägledning om färg, typografi, layout och interaktionsmönster som gör Android-appar tillgängliga enligt LPTT.
Material Design som grund
Material Design är Googles designsystem och din bästa utgångspunkt för tillgänglig Android-design. Systemet har tillgänglighetsprinciper inbyggda från grunden, vilket betyder att om du följer Material Design riktlinjer kommer du långt mot att skapa en tillgänglig app.
Designa med Material Components
Material Components är färdiga designelement som knappar, textfält, kort och navigationselement. Dessa komponenter har redan tillgänglighet inbyggd i både design och implementation. En Material Button har automatiskt rätt storlek för touch targets, korrekt kontrast och inbyggd stöd för TalkBack.
När du designar i Figma eller andra verktyg, använd Material Design UI Kit eller plugins som följer Material Design specifikationen. Detta säkerställer att dina designer matchar hur komponenter faktiskt fungerar i Android och att utvecklare kan implementera dem korrekt.
Custom komponenter kan vara nödvändiga för unikt varumärke eller specifik funktionalitet, men de kräver extra arbete för tillgänglighet. Innan du designar något helt nytt, fråga dig om du kan uppnå samma mål med Material Components stylad efter ditt varumärke. En Material Button kan få andra färger och typografi men behåller sin tillgängliga struktur.
Material You och adaptiv design
Material You (Material Design 3) introducerar dynamisk färg och mer personalisering. Detta är viktigt för tillgänglighet eftersom användare kan anpassa appar efter sina behov. Din design måste fungera med olika färgteman, inte bara det du designat.
Material Theme Builder genererar hela färgpaletter som automatiskt uppfyller kontrastkrav. Verktyget skapar varianter för ljust och mörkt tema, samt variants för olika UI-element. Använd detta verktyg tidigt i designprocessen för att säkerställa att dina färgval är tillgängliga.
Tänk på att användare kan välja Material You färgteman baserat på deras wallpaper. Din app kommer att se olika ut för olika användare, och det är okej – det är designat så. Säkerställ att din app fungerar med alla teman genom att testa med olika färgpaletter.
Konsekvens över plattformar
Om du designar för både iOS och Android, var medveten om plattformsskillnader. Android-användare förväntar sig Material Design patterns som Floating Action Buttons, Bottom Sheets och specifika navigationsmönster. Försök inte göra Android-appen identisk med iOS-versionen – respektera varje plattforms konventioner.
Gemensamma tillgänglighetsprinciper gäller båda plattformar: färgkontrast, touch target-storlekar, tydliga fokusindikatorer. Men implementationen skiljer sig. Android har 48dp minimum touch target medan iOS har 44pt. Båda är rätt för sin plattform.
Färg och kontrast
Färgval är fundamentalt för tillgänglighet. Dåliga färgkombinationer gör innehåll oläsligt för miljoner användare med synnedsättningar eller färgblindhet.
Kontrastkrav enligt WCAG 2.1 AA
LPTT kräver att appar följer WCAG 2.1 nivå AA, vilket innebär specifika kontrastkrav. Normal text (under 18sp eller 14sp fet) måste ha minst 4,5:1 kontrast mot bakgrunden. Större text (18sp eller större, eller 14sp fet eller större) behöver minst 3:1 kontrast.
För UI-komponenter som knappar, ikoner och viktiga grafiska element krävs 3:1 kontrast mot intilliggande färger. Detta inkluderar fokusindikatorer, knappramar och viktig information förmedlad genom grafik.
Testa dina färger med verktyg som Stark plugin för Figma eller Color Contrast Analyzer. Dessa verktyg visar omedelbart om kontrasten uppfyller WCAG-kraven och kan även simulera olika typer av färgblindhet. Testa tidigt – det är mycket enklare att justera färgpaletten i designfasen än att ändra hundratals skärmar senare.
Material Theme Builder för kontrastsäkra paletter
Material Theme Builder är ditt bästa verktyg för att skapa tillgängliga färgpaletter. Du väljer en primärfärg och verktyget genererar automatiskt en hel palett med färger som fungerar tillsammans och uppfyller kontrastkrav.
Verktyget skapar färger för olika roller: primary, secondary, tertiary, error, och variants av dessa för containers och text. Varje färg har automatiskt motsvarande färg för mörkt tema. Detta ger dig en komplett färgpalett som är tillgänglig i alla lägen.
Om du behöver använda specifika varumärkesfärger som inte uppfyller kontrastkrav, använd dem för stora element eller accenter men inte för text eller små ikoner. En låg-kontrast brand-färg kan fungera som bakgrund på en hero-sektion men inte för body text.
Färgblindhet och färganvändning
Cirka 8% av män och 0,5% av kvinnor har någon form av färgblindhet, med röd-grön färgblindhet som vanligast. Detta betyder att du aldrig kan förlita dig på enbart färg för att förmedla information.
Om du använder röd för fel och grön för success måste varje tillstånd även ha en ikon eller tydlig text. Ett success-meddelande ska inte bara vara grönt – det ska ha en checkmark-ikon eller texten ”Lyckades”. Ett felfält ska inte bara ha röd ram – det ska ha en error-ikon och tydlig feltext.
Grafer och diagram är särskilt utmanande. Använd olika mönster, former eller texturer utöver färg för att skilja dataserier. En stapeldiagram kan använda både färg och mönster (stripes, dots) för varje kategori. Linjer i ett linjediagram kan vara både olika färger och olika styles (solid, dashed, dotted).
Mörkt tema (Dark Theme)
Dark Theme är inte bara trendy – det är nödvändigt för många användare med ljuskänslighet, migrän eller synnedsättningar. Din app måste fungera lika bra i mörkt läge som i ljust.
Material Design har specifika riktlinjer för dark theme. Bakgrunder ska inte vara fullständigt svarta (#000000) utan mörkgrå (#121212) för att minska ögonbelastning och ge bättre kontrast för text. Elevation visas genom ljusare ytor istället för skuggor.
Färger behöver justeras för dark theme. En blå primärfärg som fungerar perfekt mot vit bakgrund kan behöva bli ljusare för att fungera mot mörk bakgrund. Material Theme Builder skapar dessa variants automatiskt, men om du har custom färger måste du testa och justera dem manuellt.
Testa alltid båda lägena under design. Många designers glömmer dark theme tills implementation, vilket leder till dålig kontrast eller oläsbara element. Designa för dark theme från start.
Typografi och textskalning
Text är fundamentalt för de flesta appar. Hur du hanterar typografi påverkar läsbarhet och tillgänglighet drastiskt.
Material Design type scale
Material Design 3 har en typografisk skala med roller som Display, Headline, Title, Body, Label. Varje roll har definierad storlek, vikt och användningsområde. Använd dessa roller konsekvent istället för att definiera egna textstorlekar slumpmässigt.
Display används för stora, dramatiska texter. Headline för sektionsrubriker. Title för kortare rubriker i listor eller kort. Body för löpande text. Label för knappar och små etiketter. Varje roll har tre storlekar (Large, Medium, Small) vilket ger flexibilitet.
När du designar i Figma, skapa text styles som matchar Material Design type scale. Detta gör det enkelt för utvecklare att implementera med Material Components och säkerställer att texten skalar korrekt när användare ändrar Font Size.
Font Size och textskalning
Android låter användare ändra Font Size i systeminställningar. Din design måste fungera när användare har skalat text till 200% eller mer av standard-storlek. Vid maximala inställningar kan text bli tre-fyra gånger större.
Designa inte med fasta textstorlekar i pixlar. Använd sp (scale-independent pixels) i Android-termer, vilket automatiskt anpassar sig till användarens inställningar. I dina designer, tänk på att all text kan bli mycket större.
Layout måste vara flexibel nog att hantera stora textstorlekar. Knappar med text kan behöva bli mycket bredare eller staplas vertikalt. Horisontella rader av element kan behöva bli vertikala. Testa dina designer med text skalad till maximum för att se var layouten går sönder.
Läsbarhet och radavstånd
Textstorlek är bara en del av läsbarhet. Line height (radavstånd), letter spacing (teckenavstånd) och radlängd påverkar också hur lätt text är att läsa. Material Design har rekommendationer för alla dessa.
Radavstånd ska vara cirka 1,5 gånger textstorleken för body text. För rubriker kan det vara något mindre. När text skalar upp måste radavståndet följa med för att behålla läsbarhet.
Radlängd ska vara cirka 40-60 tecken för optimal läsbarhet. På telefoner betyder detta att body text sällan ska sträcka sig helt från kant till kant utan ha padding eller margins. På större skärmar eller tablets kan du behöva använda spalter eller begränsa content-bredden.
Typografi för olika kontext
Olika typer av innehåll kräver olika typografiska behandling. Långa artiklar behöver större radavstånd och kortare radlängd än produktbeskrivningar. Listor kan ha tätare text än löpande paragraphs.
För långa texter (artiklar, blogginlägg), prioritera läsbarhet över kompakt layout. Användare kommer tacka dig för generöst radavstånd och lagom radlängd. För produktlistor eller dense information kan du vara något mer kompakt men aldrig på bekostnad av läsbarhet.
Var konsekvent med typografi genom hela appen. Samma typ av innehåll ska se likadant ut överallt. Detta hjälper användare förstå struktur och bygga mental modell av din app.
Touch Targets och interaktiva element
Storlek och placering av interaktiva element är avgörande för tillgänglighet, särskilt för användare med motoriska begränsningar.
Minimum 48×48 dp touch targets
Material Design och Android rekommenderar minst 48×48 dp för alla klickbara element. Detta motsvarar cirka 9mm fysiskt på de flesta enheter, vilket är tillräckligt stort för de flesta att träffa med finger.
48dp är minimum – större är ofta bättre. Primära knappar och ofta använda kontroller kan vara 56dp eller 64dp höga. Detta gör dem både lättare att träffa och visuellt betonar deras betydelse.
Den visuella storleken behöver inte alltid vara 48×48dp – det är den klickbara ytan som räknas. En 24×24dp ikon kan ha 48×48dp touch target genom padding. Men för tydlighetens skull är det ofta bättre om visuell och interaktiv storlek matchar.
Avstånd mellan touch targets
Knappar som ligger för nära skapar frustration när användare av misstag trycker på fel element. Material Design rekommenderar minst 8dp mellan touch targets, helst 16dp eller mer för kritiska actions.
Detta är särskilt viktigt i täta gränssnitt som listor med flera knappar per rad. Om varje lista-rad har ”Dela”, ”Redigera” och ”Radera”-knappar måste de ha tillräckligt avstånd för att användare inte råkar radera när de vill dela.
För destruktiva actions (radera, avbryt, logga ut) överväg extra avstånd från andra knappar eller placering bakom bekräftelsedialog. Användare ska inte kunna av misstag radera sitt konto för att knappen ligger tätt intill ”Spara”.
Floating Action Button (FAB)
FAB är en karakteristisk Material Design-komponent för primär action. Den är stor (56×56dp standard, 40×40dp mini) vilket gör den lätt att träffa. Placering i nedre högra hörnet är standard men kan justeras för enklare tillgång.
FAB ska användas för den mest frekventa, positiva actionen i en vy. I en e-postapp: ”Nytt meddelande”. I en anteckningsapp: ”Ny anteckning”. Använd inte FAB för sekundära eller destruktiva actions.
Tänk på att FAB kan blockera innehåll under den. Se till att användare kan scrolla förbi FAB för att nå allt innehåll. FAB bör också döljas eller minimeras när tangentbordet visas för att inte ta onödig plats.
Placering och ergonomi
Tänk på var på skärmen element placeras. På stora Android-telefoner är övre delen svår att nå med en hand. Placera viktiga, ofta använda kontroller inom ”thumb zone” – det område som är lätt att nå med tummen när man håller telefonen i en hand.
Bottom navigation bars och Bottom Sheets är perfekta för ofta använda kontroller eftersom de är lätt åtkomliga. Top app bars är bra för kontext och navigation men mindre viktiga actions där bör vara tillgängliga via overflow menu.
Destruktiva actions som ”Radera” eller ”Avbryt” ska inte placeras i lätt åtkomliga zoner där användare kan råka trycka på dem. Placera dem längre bort eller bakom bekräftelse.
Layout och anpassning
En app som bara fungerar i en fast layout vid en specifik textstorlek är inte tillgänglig. Din design måste vara flexibel och anpassa sig efter användarens behov och enhet.
Responsiv design för olika skärmstorlekar
Android-enheter finns i enormt många storlekar från små telefoner till stora tablets och foldables. Din design måste fungera på alla. Material Design använder breakpoints och adaptive layouts för att hantera detta.
På små skärmar (telefoner) används typiskt single-column layouts med navigation i bottom bar eller drawer. På medium skärmar (stora telefoner, små tablets) kan du introducera two-column layouts för vissa vyer. På stora skärmar (tablets) kan du visa master-detail views sida vid sida.
Designa explicit för minst tre breakpoints: compact (telefoner), medium (stora telefoner/små tablets) och expanded (tablets). Varje breakpoint kan kräva helt olika layouts – det räcker inte att bara skala upp.
Hantera textskalning och layout-anpassning
När användare ökar Font Size måste layouten anpassa sig. Horisontella rader av knappar måste kunna bli vertikala staplar. Sidopaneler kan behöva döljas för att ge plats åt större text. Information som visas i flera spalter kan behöva bli en spalt.
Bottom navigation bars med text under ikoner kan behöva förlora texten vid stora font sizes och endast visa ikoner. Tooltips eller long-press kan då visa labels. Detta är en acceptabel kompromiss för att passa in information på små skärmar.
Testa dina designer med Font Size satt till maximum i Android-inställningar. Använd Figma plugins eller manuellt skala upp text för att se hur layouten påverkas. Förbered utvecklare på att vissa element behöver omorganiseras radikalt vid stora textstorlekar.
Scrolling och content-längd
Innehåll som inte får plats vertikalt måste kunna scrollas. Detta låter självklart men många glömmer att kontrollera att scrolling faktiskt fungerar i alla scenarios, särskilt när tangentbord är synligt eller vid stora textstorlekar.
När tangentbord visas för textinmatning minskar tillgänglig skärmhöjd kraftigt. Formulär måste kunna scrollas så användare når alla fält även när tangentbordet tar halva skärmen. Det aktiva fältet ska automatiskt scrollas synligt.
Bottom Sheets och Dialogs måste också kunna scrollas om innehållet blir för långt vid större textstorlekar. En Terms of Service-dialog som är tre skärmlängder lång måste ha tydliga scrollindikatorer och smooth scrolling.
Portrait och landscape orientations
Om din app stödjer både portrait och landscape måste all funktionalitet vara tillgänglig i båda. Vissa användare med hjälpmedel kan vara begränsade till en specifik orientering.
Landscape mode ger mer horisontellt utrymme men mindre vertikalt. Navigation kan flyttas från bottom bar till side rail. Content kan visas i två kolumner istället för en. Master-detail views kan visa båda samtidigt istället för sekventiellt.
Designa explicit för landscape – anta inte att portrait-layouten bara kan roteras. Testa på faktiska enheter i båda orienteringar för att verifiera att allt fungerar och ser bra ut.
Visuell feedback och tillstånd
Användare måste få omedelbar, tydlig feedback på sina interaktioner. Detta gäller alla men är särskilt kritiskt för användare med synnedsättningar eller kognitiva funktionsnedsättningar.
Knapptillstånd och pressed states
Material Components har definierade states: enabled, pressed, focused, disabled. Varje state måste vara visuellt distinkt så användare förstår vad som händer.
Pressed state ska ge omedelbar feedback när användare trycker på en knapp. Material Design använder ofta en subtle färgändring eller ripple-effekt. Feedback ska komma inom millisekunder – försening skapar osäkerhet om trycket registrerades.
Disabled state måste vara tydlig men fortfarande läsbar. Många gör disabled-knappar för ljusa vilket gör texten oläslig. Sikta på minst 3:1 kontrast även för disabled elements så användare förstår vad knappen gör även om de inte kan trycka på den just nu.
Focused state är viktigt för tangentbordsnavigation och Switch Access. När ett element har fokus måste det vara tydligt visuellt markerat. Material Design använder ofta en outline eller subtle elevation-ändring.
Fokusindikatorer
Fokusindikatorer måste ha tillräcklig kontrast mot både elementet och bakgrunden runt det. En standard blå outline kan behöva justeras för att synas mot alla bakgrunder i din app.
Material Design 3 har förbättrade fokusindikatorer som automatiskt anpassar sig till olika bakgrunder. Om du designar custom fokusindikatorer, testa dem mot alla möjliga bakgrundsfärger i din app.
Fokusindikatorn ska röra sig logiskt genom gränssnittet i en ordning som matchar visuell layout och logisk struktur. Användare ska inte behöva hoppa fram och tillbaka över skärmen på oförutsägbara sätt.
Loading states och progress
Långsamma operationer måste kommuniceras tydligt. Användare behöver veta att något händer och ungefär hur lång tid det kan ta. Detta är särskilt viktigt för kognitiv tillgänglighet – osäkerhet skapar stress.
För korta operationer (under 2 sekunder) räcker en CircularProgressIndicator. För längre operationer använd LinearProgressIndicator med procent eller tidsuppskattning om möjligt. Material Design har tydliga riktlinjer för när och hur olika progress-indikatorer ska användas.
Skeleton screens är ett bra alternativ till traditionella spinners. De visar ungefär hur innehållet kommer se ut medan det laddas, vilket ger användare kontext och gör väntan känns kortare.
Errors måste kommuniceras tydligt med både färg, ikon och text. En röd bakgrund ensam är inte tillräckligt – visa en error-ikon och tydlig text som förklarar vad som gick fel och hur användaren kan åtgärda det.
Ikoner och symboler
Ikoner kan göra gränssnitt mer intuitivt och kompakt, men måste användas korrekt för att inte skapa förvirring.
Material Symbols
Material Symbols är Googles omfattande ikonbibliotek designat för Android. Symbolerna finns i olika styles (Outlined, Filled, Rounded, Sharp) och vikter. De skalar automatiskt och har variants optimerade för olika storlekar och tillgänglighetslägen.
Använd Material Symbols där möjligt eftersom de är välkända för Android-användare och optimerade för läsbarhet. Custom ikoner ska följa samma designprinciper: enkla, tydliga former utan onödiga detaljer som försvinner vid små storlekar.
Ikoner måste vara igenkännbara även vid 24×24dp. Testa dina ikoner vid olika storlekar och med blur-filter för att simulera nedsatt syn. Om ikonen blir oigenkännlig vid små storlekar, förenkla designen.
Ikoner med och utan text
Ikoner utan medföljande text är riskabla eftersom deras betydelse kan vara oklar. När du måste använda ikoner utan text, välj universellt förstådda symboler och testa med användare från olika bakgrunder.
Bottom navigation bars använder ofta ikoner med korta labels under. Detta är en bra balans mellan kompakt design och tydlighet. För toolbar-ikoner, överväg tooltips eller long-press för att visa beskrivningar.
Floating Action Buttons med Extended FAB-variant kan visa både ikon och text, vilket gör dem mycket tydligare än bara ikon. Använd Extended FAB när utrymme tillåter, särskilt för mindre självklara actions.
Färg i ikoner
Ikoner som använder färg för att förmedla betydelse måste också ha form- eller positionsskillnader. En röd varningsikon måste ha en distinkt form (som triangel med utropstecken) som skiljer den från en grön success-ikon även när färg saknas.
Monokroma ikoner är ofta säkrare eftersom de inte förlitar sig på färg. Men de måste fortfarande ha tillräcklig kontrast mot bakgrunden – minst 3:1 enligt WCAG.
Formulär och input
Formulär är ofta den viktigaste delen av appar omfattade av LPTT. Dåligt designade formulär kan göra tjänster fullständigt oanvändbara.
Labels och placering
Varje input-fält måste ha en tydlig, permanent synlig label. Material TextField har label inbyggd som flyttas upp ovanför fältet när användaren börjar skriva. Detta är bättre än placeholder text som försvinner.
Labels ska placeras ovanför fält, inte till vänster. Detta fungerar bättre vid olika skärmstorlekar och textskalningar. Vänster-placerade labels kan tvingas till flera rader eller trunkeras vid större textstorlekar.
För komplexa fält, ge extra instruktioner eller exempel som Helper Text under labeln. ”Födelsedatum” är en label, ”Format: YYYY-MM-DD” är helper text som tydliggör förväntningar.
Felhantering och validation
Felmeddelanden måste vara specifika, hjälpsamma och visuellt tydliga. Material TextField har inbyggt error state med röd färg, error-ikon och error text under fältet.
Visa fel i direkt anslutning till det felaktiga fältet, inte bara överst i formuläret. Error text ska vara specifik: inte ”Ogiltigt format” utan ”E-postadressen måste innehålla @”.
Använd inte bara röd färg för fel – lägg till error-ikon (oftast en utropstecken-ikon) och tydlig text. Material Components gör detta automatiskt, men om du designar custom fel-states måste du inkludera alla tre signaler.
Gruppering och flöde
Långa formulär ska delas upp i logiska sektioner med tydliga rubriker. Material Design använder ofta Dividers eller spacing för att separera sektioner, plus Text med Headline-style för sektionsrubriker.
Progress indicators för multi-step formulär är viktiga. StepperProgressIndicator visar tydligt ”Steg 2 av 4” vilket hjälper användare förstå hur mycket som återstår.
Gruppera relaterade fält visuellt med whitespace eller Cards. ”Kontaktinformation” ska vara tydligt separerad från ”Betalningsinformation” både visuellt och strukturellt.
Autofill och hjälp
Designa för autofill från start. När fält har rätt labels och input types kan Android erbjuda relevant autofill-data vilket gör formulär mycket snabbare att fylla i.
För känsliga fält som lösenord eller betalningsinformation, kommunicera säkerhet visuellt. Lock-ikoner, security badges eller kort text om kryptering bygger förtroende.
Hjälptexter kan förklara komplexa krav som lösenordsstyrka eller formatkrav. Men håll det kort – överväldigande text skapar kognitiv belastning. Visa extra hjälp via info-ikoner eller expanderbara sektioner vid behov.
Best practices för Android-designers
Sammanfattningsvis, här är nyckelpunkter för tillgänglig Android-design:
Följ Material Design – Det har tillgänglighet inbyggt och ger konsekvens som användare förväntar sig.
Testa färgkontrast tidigt – Använd Material Theme Builder och verifiera alla kombinationer mot WCAG-krav.
Designa för textskalning – Alla layouter måste fungera när text blir 200%+ större.
Respektera 48dp touch targets – Gör ofta använda knappar ännu större när möjligt.
Testa båda teman – Ljust och mörkt läge måste fungera lika bra.
Använd Material Symbols – De är välkända och optimerade för tillgänglighet.
Förmedla aldrig info bara med färg – Använd ikoner, text eller former också.
Gruppera relaterad information – Gör gränssnitt lättare att skanna och navigera.
Ge omedelbar feedback – Alla interaktioner ska bekräftas visuellt direkt.
Involvera användare – Testa designer med personer som använder hjälpmedel.
Relaterade resurser
För mer information om Android-design och tillgänglighet:
Skapa tillgängliga appar för Android – Översikt över Android-tillgänglighet och Material Design.
Android-tillgänglighet för utvecklare – Teknisk implementation av design-beslut.
Android-testning för tillgänglighet – Hur du testar dina designer med TalkBack och andra verktyg.
Google’s officiella resurser:
Med dessa principer och Material Design som grund kan du skapa Android-appar som är både vackra och tillgängliga för alla användare, uppfyller LPTT:s krav och levererar excellent användarupplevelse.