Fargene du velger for grensesnittet i appen din, påvirker hvor enkelt det er for brukerne å lese og forstå innholdet. Med stor nok fargekontrast blir det enklere å lese og forstå tekst og bilder.
I tillegg til å gjøre det enklere for brukerne med nedsatt synsevne hjelper tilstrekkelig fargekontrast alle brukere når de ser et grensesnitt på enheter under ekstreme lysforhold, for eksempel i direkte sollys eller på en skjerm med lav lysstyrke.
Implementering
Når du implementerer brukergrensesnittet for en app, bør du spesifisere bakgrunns- og forgrunnsfarger med tilstrekkelig fargekontrast.
«Kontrastforhold» er den beregnede forskjellen i luminans, eller avgitt lysintensitet, mellom to nabofarger når de vises på en skjerm. Dette forholdet er fra 1 til 21 (skrives ofte som 1 : 1 til 21 : 1), der høyere tall betyr høyere kontrast. Det finnes mange tilgjengelige verktøy for beregning av kontrastforholdet mellom to nabofarger, for eksempel denne kalkulatoren for fargekontrastforhold.
Når du bruker TextView til å vise tekst, må du bruke android:textColor og android:background for å definere forgrunns- og bakgrunnsfarger med høyt kontrastforhold. Når du bruker Text i Compose, må du bruke fargeparameteren og Modifier.background for å definere forgrunns- og bakgrunnsfarger med høyt kontrastforhold.
- minst 4,5 : 1 for liten tekst (under 18 punkter for vanlig skrift eller 14 punkter for fet skrift)
- minst 3,0 : 1 for stor tekst (18 punkter eller mer for vanlig skrift eller 14 punkter eller mer for fet skrift)
Merknader om fargekontrast:
-
Når du bruker
ImageViewellerImagetil å gjengi grafisk innhold eller ikonografi, må du sørge for at kontrasten mellom forgrunns- og bakgrunnsfargene overholder eller overskrider de anbefalte forholdene. - Kontrastforhold måles basert på den synlige fargen i for- og bakgrunnen til et element, når det legges oppå andre elementer. Hvis du definerer farger i et ARGB-format (heksadesimalverdier på #AARRGGBB), må du være oppmerksom på at gjennomsiktige farger (farger med en verdi under 255 for alfakanaler) kan ha en annen synlig farge, da de blandes med innholdet som gjengis bak dem.
- Anti-aliasing og utjevning av skrifttype kan påvirke den synlige fargen for noe innhold, spesielt innhold med liten strøkbredde. For å forbedre lesbarheten, velg en fargekombinasjon med større kontrastforhold eller øk strøkbredden på innholdet.
Design
Du bør velge en palett med tilstrekkelig fargekontrast for nabofarger når du utformer et brukergrensesnitt.
- Følg W3Cs retningslinjer for minste kontrastforhold for tekst og ikonografi spesielt.
- Vurder å bruke et tema med høy kontrast som et alternativ, eller la brukeren velge farger for hovedinnholdet.
Du finner mer informasjon om farger og kontrast i retningslinjene for Material Design-tilgjengelighet.
Testing
Slik sjekker du fargekontrasten i en app manuelt:
- Åpne appen.
- Ta en skjermdump.
- Bruk et «pipetteverktøy» i en programvare for bildevisning eller -redigering for å trekke ut farger fra skjermdumpen.
- Bruk en kalkulator for kontrastforhold for å fastslå kontrastforholdet til nabofarger.
- Hvis kontrastforholdet er mindre enn det som er definert i W3Cs retningslinjer, kan du med fordel øke fargekontrasten til grensesnittet.
Med Androids automatiserte testverktøy kan du oppdage ulike problemer med fargekontrasten. Vurder å bruke tilgjengelighetsskanneren for Android for manuell testing av appen din på en enhet. Hvis du vil utføre automatisk testing, slår du på tilgjengelighetssjekking i Espresso og Robolectric.