De färger du väljer för appens gränssnitt påverkar hur lätt användarna kan läsa och förstå det. Med tillräcklig färgkontrast blir det lättare att läsa och förstå text och bilder.
Tillräcklig färgkontrast är inte bara till hjälp för användare med nedsatt syn, det hjälper alla som använder ett gränssnitt på enheter i svåra ljusförhållanden, som i direkt solljus eller på en skärm med låg ljusstyrka.
Implementering
Ange bakgrunds- och förgrundsfärger med tillräcklig färgkontrast när du implementerar användargränssnittet i en app.
Kontrastförhållandet är en beräkning av skillnaden i luminans, eller intensiteten i ljuset som avges, mellan två angränsande färger när de visas på en skärm. Förhållandet anges från 1 till 21 (ofta skrivet som 1:1 till 21:1), där högre siffror innebär högre kontrast. Det finns många verktyg tillgängliga för beräkning av kontrastförhållandet mellan två angränsande färger, till exempel denna färgkontrasträknare.
När du visar text med TextView definierar du förgrunds- och bakgrundsfärger med ett högt kontrastförhållande genom android:textColor och android:background. När du använder Text i Compose kan du använda färgparametern och Modifier.background för att definiera förgrunds- och bakgrundsfärger med ett högt kontrastförhållande.
W3C rekommenderar följande:
- Minst 4,5:1 för liten text (under 18 punkter för vanlig text eller 14 punkter för fetstil)
- Minst 3,0:1 för stor text (18 punkter och större för vanlig text eller 14 punkter och större för fetstil)
Anmärkningar om färgkontrast:
-
När du använder
ImageViewellerImageför att rendera grafiskt innehåll eller ikonografi ska du se till att kontrasten mellan förgrunds- och bakgrundsfärgerna uppfyller eller överstiger de rekommenderade förhållandena. - Kontrastförhållandet mäts utifrån den färg som visas i elementets förgrund och bakgrund i lager på andra element. Om du definierar färger i ARGB-format (hex-värden på #AARRGGBB) ska du tänka på att transparenta färger (färger med ett alfakanalvärde under 255) kan visas som en annan färg eftersom de blandas med innehållet som renderas under dem.
- Typsnittsutjämning och kantutjämning kan påverka vilken färg som visas för visst innehåll, särskilt innehåll med liten linjebredd. Du kan förbättra läsbarheten genom att välja en färgkombination med ett större kontrastförhållande eller öka innehållets linjebredd.
Design
När du utformar ett användargränssnitt rekommenderar vi att du väljer en palett med tillräcklig färgkontrast för intilliggande färger.
- Följ W3C-riktlinjerna för minsta kontrastförhållande, särskilt för text och ikonografi
- Vi rekommenderar att du erbjuder ett alternativt tema med hög kontrast eller låter användaren välja färger för huvudinnehållet
Mer information finns i Färg- och kontrastriktlinjer för Material Design.
Testning
Så här kontrollerar du färgkontrasten i en app manuellt:
- Öppna appen.
- Ta en skärmbild.
- Använd ett pipettverktyg i programvara för bildvisning eller bildredigering för att extrahera ett färgprov från skärmbilden.
- Beräkna kontrastförhållandet till angränsande färger med hjälp av en kontrasträknare.
- Om kontrastförhållandet är mindre än den som anges i W3C-riktlinjerna kan det vara en god idé att öka färgkontrasten i gränssnittet.
Androids automatiska testverktyg kan upptäcka många problem med färgkontrast. Vi rekommenderar att du använder tillgångstestaren för Android för att testa appen manuellt på enheten. För automatiska tester kan du aktivera tillgänglighetskontrollerna i Espresso och Robolectric.