Zwiększ czytelność witryny

Sofia Emelianova

Teksty o niskim kontraście utrudniają czytanie witryny wszystkim użytkownikom, a w szczególności osobom z wadami wzroku. Narzędzia deweloperskie mogą automatycznie wykrywać problemy z niskim kontrastem i sugerować lepsze kolory, które pomogą Ci je rozwiązać.

Za pomocą Narzędzi deweloperskich możesz:

• Wykrywanie problemów z kontrastem Aby uzyskać listę wszystkich problemów, użyj panelu Przegląd CSS, karty Problemy (wersja podglądowa) lub raportu Lighthouse.
• Rozwiązywanie problemów z kontrastem Wyświetl problemy w trybie inspektora za pomocą etykietki i wybierz kolory sugerowane przez selektor kolorów, aby poprawić współczynnik kontrastu.
• Emuluj ślepotę barw. Sprawdź witrynę z perspektywy użytkowników.

Odkrywanie tekstu o niskim kontraście

Aby znaleźć tekst o niskim kontraście:

1. Otwórz Narzędzia deweloperskie na stronie.

2. Wyświetl wszystkie problemy z kontrastem w jednym z 3 paneli:

   • Przegląd usługi porównywania cen
   • (Wersja testowa) Problemy
   • Lighthouse

Możesz poeksperymentować, otwierając nasz CodePen.

Problemy z kontrastem w panelu Przegląd CSS

Aby uzyskać ogólne informacje:

1. Otwórz Przegląd CSS.
2. Przechwytywanie przeglądu
3. Otwórz sekcję Kolory, przejdź do Problemy z kontrastem i kliknij problem, jeśli występuje.

4. W tabeli Problemy z kontrastem najedź kursorem na element i kliknij link obok niego.

   

5. Rozwiąż problem zgodnie z opisem w sekcji Naprawianie tekstu o niskim kontraście.

(Podgląd) Problemy z kontrastem na karcie Problemy

Aby uzyskać listę problemów:

1. Włącz raportowanie problemów z kontrastem na karcie Problemy:
   1. Otwórz Ustawienia > Eksperymentalne.
   2. Na pasku filtrowania wyszukaj contrast issue.
   3. Wybierz Włącz automatyczne raportowanie problemów z kontrastem w panelu Problemy.
   4. W wyświetlonym u góry okienku kliknij Reload DevTools (Ponownie załaduj Narzędzia deweloperskie).
2. Otwórz kartę Problemy.

3. Rozwiń problemy z kontrastem znalezione przez Narzędzia deweloperskie, a następnie rozwiń tabelę elementów i kliknij link obok elementu.

   

4. Rozwiąż problem zgodnie z opisem w sekcji Naprawianie tekstu o niskim kontraście.

Problemy z kontrastem w raporcie Lighthouse

Aby uruchomić raport:

1. W Narzędziach deweloperskich otwórz Więcej kart > Lighthouse.

2. Wygeneruj raport Lighthouse z tymi ustawieniami:

   • Tryb: nawigacja (domyślnie)
   • Kategorie: ułatwienia dostępu
   • Urządzenie: komputer

   

3. Kliknij Analizuj wczytywanie strony i poczekaj, aż Lighthouse wygeneruje raport.

4. Przejdź do sekcji Kontrast. Na liście elementów kliknij link do elementu, którego dotyczy problem.

   

5. Rozwiąż problem zgodnie z opisem w sekcji Naprawianie tekstu o niskim kontraście.

Rozwiązywanie problemu z tekstem o niskim kontraście

Aby rozwiązać problem z niskim kontrastem:

1. Znajdź problem z kontrastem i kliknij link do elementu, którego dotyczy problem, w panelu Przegląd CSS, na karcie Problemy lub w raporcie Lighthouse. Narzędzia deweloperskie przeniosą Cię do panelu Elementy i wybiorą odpowiedni element.

   

   Na przykład w naszej niedostępnej wersji demonstracyjnej w CodePen pierwszym elementem, na który ma to wpływ, jest h1.line1.

2. W prawym górnym rogu Narzędzi deweloperskich kliknij  Sprawdź i najedź kursorem na element w obszarze wyświetlania. Narzędzia deweloperskie wyświetlają etykietkę tego elementu.

   

   Zwróć uwagę na znak ostrzegawczy obok wartości współczynnika kontrastu w dymku. Współczynnik kontrastu mierzy różnicę jasności między kolorem pierwszego planu (kolorem tekstu) a kolorem tła.

3. Otwórz selektor kolorów obok deklaracji koloru tekstu elementu, a następnie w selektorze kolorów rozwiń sekcję Współczynnik kontrastu.

   

   Selektor kolorów informuje, że współczynnik kontrastu nie spełnia poziomów AA ani AAA wytycznych WebAIM.

4. Obok poziomu AAA kliknij przycisk Użyj sugerowanego koloru. Aplikacja Selektor kolorów stosuje kolor tekstu zgodny z wytycznymi dotyczącymi współczynnika kontrastu.

   

5. Możesz też wybrać kolor ręcznie, przeciągając kółko w podglądzie odcieni. Aby zachować poziom AA lub AAA, wybierz kolor poniżej odpowiednio górnej lub dolnej linii.

   

6. Podobnie rozwiąż wszystkie problemy z kontrastem, które zostały znalezione w panelu Przegląd CSS, 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 do kodu.
• Skonfiguruj obszar roboczy, aby umożliwić Narzędziom deweloperskim zapisywanie plików bezpośrednio w Twoich źródłach.

Co dalej?

Więcej informacji:

• Więcej informacji o ułatwieniach dostępu
• ułatwienia dostępu związane z kolorami i kontrastem,