W celu świadczenia usług na najwyższym poziomie stosujemy pliki cookies. Korzystanie z naszej witryny oznacza, że będą one zamieszczane w Państwa urządzeniu. W każdym momencie można dokonać zmiany ustawień Państwa przeglądarki. Zobacz politykę cookies.

Czy wszystkie kolory w elementach aktywnych i w elementach graficznych, które niosą informację, mają wystarczający kontrast?

W badaniu sprawdź:

  • kontrast elementów aktywnych i kolorów, które je otaczają,
  • kontrast między kolorami niezbędnymi, aby zrozumieć zawartość elementu graficznego, a kolorami otaczającymi.

Na każdym ekranie aplikacji kontrast elementów aktywnych i kolorów, które je otaczają, ma spełniać co najmniej jeden z warunków (z wyjątkiem szczególnych przypadków):

  1. kontrast wynosi co najmniej 3:1.
  2. jest mechanizm, który pozwala użytkownikowi wyświetlać element aktywny w odpowiednim kontraście (co najmniej 3:1).

Na każdym ekranie aplikacji kontrast między kolorami niezbędnymi, by zrozumieć zawartość elementu graficznego, a kolorami otaczającymi, ma spełniać co najmniej jeden z warunków (z wyjątkiem szczególnych przypadków):

  1. kontrast wynosi co najmniej 3:1.
  2. jest mechanizm, który pozwala użytkownikowi wyświetlić element graficzny w odpowiednim kontraście (co najmniej 3:1).

Uwaga! Nie rób badania z tego pytania (szczególne przypadki) dla

  • nieaktywnych elementów interfejsu (np. dezaktywowany przycisk), na których nie można wykonać żadnych działań;
  • elementów zarządzanych przez system operacyjny, których nie można w prosty sposób zastąpić ani zmienić;
  • elementów aktywnych, w których kolor nie jest potrzebny, aby zidentyfikować lub zrozumieć funkcje (np. podkreślenie linków, które miałoby kontrast niższy niż 3:1, ale których tekst ma odpowiedni kontrast co najmniej 4,5:1);
  • elementów graficznych lub ich części, które nie niosą informacji lub zawierają alternatywę lub szczegółowy opis;
  • elementów graficznych lub ich części, które są częścią logotypu lub nazwy marki instytucji albo firmy;
  • elementów graficznych lub ich części, których wygląd jest ważny dla przekazu informacji, gdy to jest na przykład flaga, logotyp, zdjęcia osób, zrzut ekranu, wykres medyczny, mapa przedstawiająca rozkład temperatur itp.);
  • elementów graficznych lub ich części aktywnych, w których kontrast może się zmieniać w momencie, gdy przyjmują fokus lub gdy przemieszcza się nad nimi wskaźnik myszy i przyjmują w takim momencie mocniejszy kontrast (np. poszczególne elementy wykresów kołowych, które mogą się aktywować i w takim przypadku inne elementy wykresu stają się mniej widoczne i mają słaby kontrast).

Wytyczne WCAG 2.1 - 1.4.11 Kontrast elementów nietekstowych


Jak to sprawdzić?

Uwaga - linki otworzą się w nowej karcie przeglądarki


Jeśli używasz systemu iOS: Jeśli masz dostęp do kodu źródłowego aplikacji lub jesteś jej developerem, możesz użyć aplikacji Accessibility Inspector na urządzeniach MacOS. Aplikacja ma opcję Audyt. Możesz nią zrobić automatyczne testy niektórych widocznych na ekranie elementów. Możesz wykorzystać ją do szybkiego zbadania kontrastu. Ponieważ nie wykrywa ona wszystkich potencjalnych błędów kontrastu, uzupełnij badanie testami, które opisujemy poniżej.

Jeśli używasz systemu Android: Aby zrobić szybkie badanie kontrastu na ekranie, możesz użyć aplikacji Accessibility Scanner. Ponieważ nie wykrywa ona wszystkich potencjalnych błędów kontrastu, uzupełnij badanie testami, które opisujemy poniżej.

  1. Jeśli używasz systemu iOS: Wybierz kolejno: Ustawienia > Dostępność > Ekran i wielkość tekstu > Zwiększ kontrast albo, jeśli jest w aplikacji mechanizm zmiany kontrastu, włącz go.
  2. Jeśli używasz systemu Android: Jeśli w aplikacji, którą badasz, jest mechanizm ustawienia odpowiedniego kontrastu, włącz go.
  3. Znajdź na ekranie elementy graficzne, które niosą informację i dla każdego z nich określ:
    • które kolory są niezbędne, aby określić lokalizację elementu lub zrozumieć przekazywane informacje (może to być obramowanie, kolor ikony, kolor tła itp.),
    • które kolory wokół elementu (tła lub otaczające) mają wpływ na widoczność jego koloru lub kolorów.
  4. Znajdź na ekranie elementy aktywne, które mogą przybierać różny wygląd w różnych sytuacjach (naciśnięcie, gdy przyjmą fokus, gdy są aktywowane, zaznaczone itp.)
  5. Dla każdego takiego elementu aktywnego określ:
    • które kolory są niezbędne, aby określić lokalizację tego elementu lub zrozumieć przekazywaną informację oraz jego stan (może to być np. obramowanie, kolor ikony, kolor tła) dla każdego z możliwych stanów;
    • które kolory wokół tego elementu ( tła lub otaczające) mają wpływ na widoczność jego koloru lub kolorów.
  6. Włącz program Colour Contrast Analyser na komputerze
  7. Pobierz kolor tekstu oraz tła na urządzeniu mobilnym. Aby to zrobić:
    • wyświetl ekran urządzenia mobilnego na ekranie komputera;
    • pobierz zrzuty ekranu z elementami do zbadania i przenieś je na komputer.
  8. Sprawdź, czy kontrast między tymi kolorami to co najmniej 3:1

Jeśli tak jest, wynik badania jest pozytywny.

{"register":{"columns":[]}}