Teksty o niskim kontraście obniżają czytelność witryny dla wszystkich użytkowników, zwłaszcza dla osób z wadami wzroku. Narzędzia deweloperskie mogą automatycznie wykrywać problemy z niskim kontrastem i proponować lepsze kolory, aby je rozwiązać.
Za pomocą Narzędzi deweloperskich możesz:
- Poznaj problemy z kontrastem. Aby zobaczyć listę wszystkich problemów, skorzystaj z panelu Przegląd usług porównywania cen, karty Problemy (podgląd) lub raportu Lighthouse.
- Rozwiąż problemy z kontrastem. Aby poprawić współczynnik kontrastu, wyświetl problemy z etykietką w trybie inspektora i wybierz kolory sugerowane przez selektor kolorów.
- Emuluj zaburzenia widzenia. Spójrz na swoją witrynę tak, jak widzą ją użytkownicy.
Odkryj tekst o niskim kontraście
Aby wykryć tekst o niskim kontraście:
- Otwórz Narzędzia deweloperskie na stronie. W tym samouczku możesz użyć tej strony demonstracyjnej.
Listę wszystkich problemów z kontrastem możesz wyświetlić w jednym z 3 paneli:
Problemy z kontrastem w panelu Przegląd CSS
Aby uzyskać ogólne informacje:
- Otwórz Przegląd usług porównywania cen.
- Zobacz omówienie.
- Otwórz sekcję Kolory, przewiń do opcji Problemy z kontrastem i kliknij problem (jeśli występuje).
W tabeli Problemy z kontrastem najedź kursorem na element i kliknij link obok niego.
Rozwiąż problem zgodnie z opisem w sekcji Rozwiązywanie problemów z tekstem o niskim kontraście.
(Podgląd) Problemy z kontrastem na karcie Problemy
Aby wyświetlić listę problemów:
- Włącz raportowanie problemów z kontrastem na karcie Problemy:
- Otwórz Ustawienia > Funkcja eksperymentalna.
- Na pasku filtrów wyszukaj
contrast issue. - Zaznacz opcję Włącz automatyczne raportowanie problemów z kontrastem w panelu Problemy.
- W komunikacie u góry kliknij Załaduj ponownie Narzędzia deweloperskie.
- Otwórz kartę Problemy.
Rozwiń problemy z kontrastem znalezionych w Narzędziach deweloperskich, a następnie rozwiń tabelę elementów i kliknij link obok danego elementu.
Rozwiąż problem zgodnie z opisem w sekcji Rozwiązywanie problemów z tekstem o niskim kontraście.
Problemy z kontrastem w raporcie Lighthouse
Aby uruchomić raport:
- W Narzędziach deweloperskich otwórz
Więcej kart > Lighthouse. - Wygeneruj raport Lighthouse z tymi ustawieniami:
- Tryb: Nawigacja (domyślny)
- Kategorie: Ułatwienia dostępu
- Urządzenie: komputer
- Kliknij Analizuj wczytanie strony i poczekaj, aż Lighthouse wygeneruje raport.
- Przewiń w dół do sekcji Kontrast i na liście elementów kliknij link do wybranego elementu.
- Rozwiąż problem zgodnie z opisem w sekcji Rozwiązywanie problemów z tekstem o niskim kontraście.
Popraw tekst o niskim kontraście
Aby rozwiązać problem z niskim kontrastem:
- Znajdź problem z kontrastem i kliknij link do elementu w panelu Przegląd usług porównywania cen, na karcie Problemy lub w raporcie Lighthouse. W Narzędziach deweloperskich otworzy się panel Elementy i wybierze odpowiedni element.
Na przykład na tej stronie demonstracyjnej pierwszym elementem, którego dotyczy problem, jest h1.line1. W prawym górnym rogu Narzędzi deweloperskich kliknij
Zbadaj i najedź kursorem na element w widocznym obszarze. Narzędzia deweloperskie wyświetlają etykietkę tego elementu.
Zwróć uwagę na znak ostrzegawczy
obok wartości współczynnika kontrastu w etykiecie. Współczynnik kontrastu określa różnicę w jasności między kolorem pierwszego planu (kolorem tekstu) a kolorem tła.Otwórz Selektor kolorów obok deklaracji koloru tekstu elementu i w sekcji Selektor kolorów rozwiń sekcję Współczynnik kontrastu.
Selektor kolorów informuje, że współczynnik kontrastu nie spełnia poziomów AA lub AAA zgodnie z wytycznymi WebAIM.
Kliknij przycisk
Użyj sugerowanego koloru obok poziomu AAA. Selektor kolorów stosuje kolor tekstu zgodny ze wskazówkami dotyczącymi współczynnika kontrastu.
Aby wybrać kolor ręcznie, możesz też przeciągnąć okrąg w podglądzie cieni. Aby pozostać w AA lub AAA, wybierz kolor poniżej górnej lub dolnej linii.
Podobnie rozwiąż wszystkie problemy z kontrastem wykryte w panelu Przegląd usług porównywania cen, na karcie Problemy lub w raporcie Lighthouse.
Zapisz zmiany
Aby zapisać zmiany wprowadzone w Narzędziach deweloperskich:
- Skopiuj wszystkie zmiany CSS naraz i wklej je w kodzie
- Rozważ skonfigurowanie obszaru roboczego, w którym Narzędzia deweloperskie będą mogły zapisywać pliki bezpośrednio w Twoich źródłach.
Co dalej?
Więcej informacji:
- Ogólne informacje o ułatwieniach dostępu
- Ułatwienia dostępu w szczególności dotyczące koloru i kontrastu