Kolory wybrane dla interfejsu aplikacji wpływają na jego czytelność i zrozumiałość. Odpowiedni poziom kontrastu kolorów ułatwia przeglądanie i rozumienie tekstu oraz obrazów.
Odpowiedni poziom kontrastu kolorów pomaga wszystkim użytkownikom – nie tylko użytkownikom z niepełnosprawnością wzrokową – przy korzystaniu z interfejsu w ekstremalnych warunkach oświetleniowych, np. w bezpośrednio padającym świetle słonecznym czy przy niskiej jasności wyświetlacza.
Implementacja
Podczas implementowania interfejsu użytkownika aplikacji określ kolory tła i pierwszego planu, zachowując wystarczający kontrast.
„Współczynnik kontrastu” to obliczona różnica między luminancją (intensywnością emitowanego światła) dwóch sąsiadujących ze sobą kolorów wyświetlanych na ekranie. Ten współczynnik ma zakres od 1 do 21 (często zapisywany w postaci 1:1 do 21:1). Większa wartość oznacza wyższy kontrast. Do obliczenia współczynnika kontrastu dwóch sąsiadujących ze sobą kolorów można użyć różnych narzędzi, takich jak kalkulator współczynnika kontrastu kolorów.
Jeśli do wyświetlania tekstu używasz elementu TextView, zdefiniuj kontrastujące ze sobą kolory tła i pierwszego planu, używając atrybutów android:textColor oraz android:background. Jeśli używasz elementu Text w Compose, zdefiniuj kontrastujące ze sobą kolory tła i pierwszego planu, używając parametru koloru oraz Modifier.background.
- Co najmniej 4,5:1 dla małego tekstu (poniżej 18 punktów w przypadku zwykłego lub 14 punktów w przypadku pogrubionego).
- Co najmniej 3,0:1 dla dużego tekstu (co najmniej 18 punktów w przypadku zwykłego lub co najmniej 14 punktów w przypadku pogrubionego).
Uwagi dotyczące kontrastu kolorów:
-
Jeśli używasz atrybutu
ImageViewlubImagedo renderowania treści graficznych albo ikon, upewnij się, że kontrast między kolorami pierwszego planu i tła jest zgodny z zalecanymi współczynnikami lub wyższy. - Współczynniki kontrastu są mierzone na podstawie postrzeganego koloru tła i pierwszego planu elementu ustawionego w warstwie nad innymi elementami. Jeśli kolor jest definiowany w formacie ARGB (wartości szesnastkowe #AARRGGBB), kolory przezroczyste (których wartość kanału alfa jest mniejsza niż 255) mają inny kolor postrzegany z powodu przenikania z treściami wyświetlanymi pod nimi.
- Wygładzanie czcionek i anti-aliasing mogą wypływać na postrzegany kolor niektórych zasobów – zwłaszcza o małej szerokości kreślenia. Aby zwiększyć czytelność, wybierz kombinację kolorów o większym współczynniku kontrastu lub zwiększ szerokość kreślenia treści.
Projektowanie
Projektując interfejs użytkownika, staraj się wybrać paletę z wystarczającym kontrastem dla sąsiadujących kolorów.
- W przypadku tekstu i ikon przestrzegaj wytycznych W3C dotyczących minimalnego współczynnika kontrastu.
- Rozważ dołączenie opcjonalnego motywu o wysokim kontraście, by umożliwić użytkownikom wybór kolorów dla podstawowej treści.
Więcej informacji znajdziesz w wytycznych dotyczących ułatwień dostępu w interfejsie Material Design, w sekcji poświęconej kolorom i kontrastowi.
Testowanie
Aby ręcznie sprawdzić kontrast kolorów w aplikacji:
- Otwórz aplikację.
- Zrób zrzut ekranu.
- W oprogramowaniu do wyświetlania lub edytowania obrazów użyj „narzędzia zakraplacza”, aby pobrać próbkę koloru ze zrzutu ekranu.
- Używając kalkulatora współczynnika kontrastu, oblicz współczynnik kontrastu sąsiadujących kolorów.
- Jeśli współczynnik kontrastu jest mniejszy niż określony w wytycznych W3C, zwiększenie kontrastu kolorów może mieć pozytywny wpływ na interfejs.
Narzędzia do automatycznego testowania na Androidzie mogą wykryć wiele problemów z kontrastem kolorów. Accessibility Scanner na Androida pozwala na ręczne przetestowanie aplikacji zainstalowanej na urządzeniu. Jeżeli chcesz przeprowadzać testy automatyczne, włącz sprawdzanie ułatwień dostępu w Espresso i Robolectric.