Teksty o niskim kontraście powodują, że witryna jest mniej czytelna 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, które pomogą Ci je rozwiązać.
Za pomocą Narzędzi deweloperskich możesz:
- Wykryj problemy z kontrastem. Aby zobaczyć listę wszystkich problemów, użyj panelu Przegląd usługi porównywania cen, karty Problemy (wersja testowa) lub Lighthouse.
- Rozwiązywanie problemów z kontrastem. Wyświetl problemy z etykietką w trybie inspektora i wybierz kolory sugerowane przez Selektor kolorów, aby poprawić współczynnik kontrastu.
- Emulowanie wad wzroku. Spójrz na swoją witrynę tak, jak widzą ją użytkownicy.
Odkrywanie tekstu o niskim kontraście
Aby wykryć tekst o niskim kontraście:
- Otwórz Narzędzia deweloperskie na swojej stronie. Możesz też skorzystać z tej strony demonstracyjnej w tym samouczku.
Listę wszystkich problemów z kontrastem możesz wyświetlić w jednym z 3 paneli:
Problemy z kontrastem w panelu Przegląd CSS
Aby zobaczyć przegląd:
- Otwórz Przegląd CSS.
- Zobacz podsumowanie.
- Otwórz sekcję Kolory, przewiń do Problemy z kontrastem i kliknij problem, jeśli taki występuje.
W tabeli Problemy z kontrastem najedź kursorem na element i kliknij znajdujący się obok niego link.
Rozwiąż problem w sposób opisany w sekcji Naprawianie tekstu o niskim kontraście.
(Podgląd) Problemy z kontrastem na karcie Problemy
Aby zobaczyć listę problemów:
- Włącz raportowanie problemów z kontrastem na karcie Problemy:
- Otwórz Ustawienia > Eksperymentalne.
- Na pasku filtrów wyszukaj
contrast issue. - Zaznacz Włącz automatyczne raportowanie problemów z kontrastem w panelu Problemy.
- W oknie u góry kliknij Załaduj ponownie Narzędzia deweloperskie.
- Otwórz kartę Problemy.
Rozwiń problemy z kontrastem znalezione w Narzędziach deweloperskich, a następnie rozwiń tabelę elementów i kliknij link obok elementu.
Rozwiąż problem w sposób opisany w sekcji Naprawianie tekstu 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 elementu, którego dotyczy problem.
- Rozwiąż problem w sposób opisany w sekcji Naprawianie tekstu o niskim kontraście.
Poprawianie tekstu o niskim kontraście
Aby rozwiązać problem z niskim kontrastem:
- Znajdź problem z kontrastem i kliknij link do elementu w panelu CSS – przegląd, na karcie Problemy lub w raporcie Lighthouse. W Narzędziach deweloperskich przejdziesz do panelu Elementy i wybierzesz odpowiedni element.
Na przykład na tej stronie demonstracyjnej pierwszy element, którego dotyczy problem, to h1.line1. Kliknij
Zbadaj w prawym górnym rogu Narzędzi deweloperskich i najedź kursorem na element w widocznym obszarze. Narzędzia deweloperskie pokazują etykietkę tego elementu.
Obok wartości współczynnika kontrastu w etykietce znajduje się znak ostrzegawczy
. Współczynnik kontrastu mierzy różnicę w jasności między kolorem pierwszego planu (koloru tekstu) a kolorem tła.Otwórz Selektor kolorów obok deklaracji koloru tekstu elementu, a następnie w sekcji Selektor kolorów rozwiń sekcję Współczynnik kontrastu.
Selektor kolorów informuje, że współczynnik kontrastu nie jest zgodny z poziomami AA lub AAA określonymi w wytycznych 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.
Jeśli chcesz ręcznie wybrać kolor, możesz też przeciągnąć okrąg w podglądzie odcieni. Aby utrzymać się na poziomie AA lub AAA, wybierz kolor odpowiednio poniżej górnej lub dolnej linii.
Podobnie rozwiąż wszystkie problemy z kontrastem, które znajdziesz w panelu CSS, na karcie Problemy lub w raporcie Lighthouse.
Zapisz zmiany
Aby zapisać zmiany wprowadzone w Narzędziach deweloperskich:
- Skopiuj wszystkie zmiany w CSS naraz i wklej je do kodu.
- Rozważ skonfigurowanie obszaru roboczego, w którym Narzędzia deweloperskie będą mogły zapisywać pliki bezpośrednio w źródłach.
Co dalej?
Więcej informacji:
- Ogólne informacje o ułatwieniach dostępu
- Szczególnie ważne są ułatwienia dostępu związane z kolorami i kontrastem.