nieczytelny kolor tekstu (niski kontrast)

Niski kontrast tekstu względem tła to naruszenie wytycznych dostępności WCAG, utrudniające czytanie.

Kontrast jako relacja między tekstem a tłem

Nieczytelny kolor tekstu powstaje wtedy, gdy barwa znaków zbyt mało różni się od barwy obszaru, na którym są wyświetlane. O odbiorze decyduje nie samo nazwanie koloru, lecz jego jasność, nasycenie i relacja do tła. Szary tekst na białym tle może wyglądać estetycznie w projekcie graficznym, ale przy dłuższym czytaniu wymaga większego wysiłku wzrokowego. Podobny problem występuje przy jasnym tekście umieszczonym na pastelowym tle, na obrazie fotograficznym albo na gradiencie, którego jasność zmienia się w różnych miejscach.

Ocena kontrastu dotyczy przede wszystkim tekstu, lecz znaczenie ma także otoczenie elementu. Cień, półprzezroczysta nakładka, obramowanie lub tło dziedziczone z innego elementu mogą zmienić rzeczywistą widoczność znaków. Na ekranie laptopa wynik może dodatkowo zależeć od ustawionej jasności, kąta patrzenia, rodzaju matrycy i warunków oświetleniowych. W praktyce oznacza to, że deklarowany kolor w arkuszu stylów nie zawsze daje taki sam efekt u każdej osoby.

Wytyczne WCAG rozróżniają zwykły tekst, większy tekst oraz elementy nietekstowe. Większy krój pisma jest łatwiejszy do rozpoznania, dlatego może spełniać wymagania przy niższym kontraście niż małe litery. Osobno analizuje się tekst znajdujący się na przycisku, etykiety pól formularza, tekst pomocniczy, komunikaty o błędach i informacje przekazywane wyłącznie kolorem. Samo powiększenie czcionki nie naprawia jednak sytuacji, w której tekst znika na zmiennym lub jaskrawym tle.

Jak rozpoznać problem w interfejsie

Najprostsza kontrola polega na sprawdzeniu każdego istotnego zestawienia tekstu i tła w narzędziu do badania kontrastu. Warto analizować nie tylko podstawowy wygląd strony, ale również stan po najechaniu kursorem, fokusie klawiatury, wyświetleniu komunikatu oraz otwarciu menu. Kolor tekstu może być zmieniany przez reguły dziedziczenia, klasy komponentów albo arkusze stylów ładowane później. Z tego powodu próbka pobrana z projektu graficznego nie zawsze odpowiada temu, co ostatecznie renderuje przeglądarka.

Kontrast nie jest jedynym czynnikiem wpływającym na czytelność. Zbyt cienka odmiana fontu, mały rozmiar, duże zagęszczenie znaków, długie wiersze i niewielkie odstępy między akapitami zwiększają obciążenie wzroku. Problem może być szczególnie widoczny na ekranach o wysokiej rozdzielczości, gdy interfejs używa drobnych napisów pomocniczych. Osoba słabowidząca może korzystać z powiększenia lub własnego schematu kolorów, ale poprawnie zaprojektowany interfejs nie powinien wymagać takich ustawień do odczytania podstawowych informacji.

Przy porównywaniu kolorów trzeba odróżnić tekst zwykły od tekstu dekoracyjnego. Jeżeli napis przekazuje instrukcję, opisuje funkcję albo informuje o stanie działania, jego widoczność ma znaczenie użytkowe. Nie należy też uznawać, że tekst jest dostępny tylko dlatego, że można zaznaczyć go myszą lub skopiować. Zdolność technicznego zaznaczenia treści nie zastępuje czytelności wizualnej. Dobrym testem jest ogląd interfejsu w skali szarości, przy zmniejszonej jasności oraz na różnych ekranach.

Ważne informacje nie powinny być przekazywane samą barwą. Czerwony napis może sygnalizować błąd, ale warto dodać tekstowy opis, ikonę lub inny jednoznaczny wskaźnik. Analogicznie zielony kolor nie powinien być jedynym oznaczeniem poprawnego wykonania operacji. Takie rozwiązanie pomaga osobom z zaburzeniami rozpoznawania barw, a także użytkownikom pracującym przy słabym oświetleniu, odbiciach na ekranie lub ograniczonej jakości obrazu.

Skąd biorą się rozbieżności i błędne oceny

Częstym źródłem problemu jest wybór koloru na podstawie wyglądu pojedynczego elementu, bez sprawdzenia całej strony. Ten sam odcień może być czytelny na jednolitym tle, lecz stracić widoczność po umieszczeniu na zdjęciu. Innym przypadkiem jest użycie przezroczystego tekstu albo półprzezroczystego tła, którego końcowa barwa zależy od elementów znajdujących się pod spodem. W komponentach wielokrotnego użytku łatwo również odziedziczyć kolor zaprojektowany dla jednego kontekstu i zastosować go w miejscu o zupełnie innej jasności.

Problemy pojawiają się także po zmianie motywu, aktualizacji biblioteki interfejsu lub dodaniu trybu ciemnego. Kolor spełniający wymagania na jasnym tle nie musi być odpowiedni po przełączeniu motywu. Szczególnej kontroli wymagają placeholdery, nieaktywne kontrolki, odnośniki odróżniane wyłącznie podkreśleniem oraz tekst znajdujący się na przyciskach. Stan nieaktywności może uzasadniać inne zasady prezentacji, ale nie powinien być wykorzystywany do ukrywania instrukcji potrzebnych do wykonania zadania.

Użytkownicy często pytają, dlaczego tekst wygląda poprawnie na jednym urządzeniu, a na innym jest męczący w odbiorze. Przyczyną może być różnica w jasności i kontraście matrycy, powłoka błyszcząca, automatyczna regulacja obrazu, filtr światła niebieskiego lub ustawienia systemowe. Znaczenie ma również otoczenie: światło padające na ekran zmniejsza odczuwalny kontrast, a długie czytanie drobnych napisów szybciej ujawnia niedostatek czytelności. Dlatego weryfikacja powinna łączyć pomiar narzędziowy z oceną na rzeczywistym ekranie.

Nie każda zmiana koloru jest właściwą naprawą. Przyciemnienie tekstu może poprawić wynik pomiaru, lecz jednocześnie zaburzyć hierarchię informacji albo zlać się z innymi elementami. Lepsze rozwiązanie powinno uwzględniać cały układ: kolor, grubość fontu, wielkość liter, odstępy, obszar tła i zachowanie elementu w różnych stanach. Po zmianie należy sprawdzić również fokus klawiatury oraz komunikaty dynamiczne, ponieważ poprawa jednego widoku nie gwarantuje poprawności pozostałych.

Gdy czytelność może wskazywać na problem ze sprzętem

Jeżeli nieczytelny tekst występuje tylko na jednym laptopie lub monitorze, przyczyną może być nie projekt strony, lecz ekran, ustawienia obrazu albo tor wyświetlania. Warto porównać ten sam materiał na innym urządzeniu, sprawdzić jasność i wyłączyć nietypowe filtry obrazu. Jeżeli objaw dotyczy także zdjęć, ikon i innych elementów, a nie tylko określonych napisów, podejrzenie powinno obejmować matrycę, podświetlenie, przewód obrazu lub układ graficzny.

Do diagnostyki sprzętowej kwalifikują się między innymi nierówne podświetlenie, migotanie, przebarwienia, smugi, zanikanie obrazu przy poruszaniu pokrywą oraz wyraźna różnica jakości między ekranem wbudowanym a zewnętrznym. Takie symptomy mogą utrudniać ocenę kontrastu nawet wtedy, gdy strona internetowa została przygotowana prawidłowo. Nie należy dociskać ramki matrycy ani wielokrotnie zginać zawiasów w celu sprawdzenia obrazu, ponieważ może to pogłębić usterkę.

Warszawskie Pogotowie Komputerowe specjalizuje się w kompleksowej naprawie laptopów, komputerów stacjonarnych i elementów elektronicznych. Jeżeli problem z czytelnością towarzyszy objawom obrazu występującym także poza konkretną stroną, serwis może sprawdzić urządzenie, ustalić źródło usterki i ocenić zasadność naprawy albo wymiany elementu.

Przed przekazaniem sprzętu warto zanotować, kiedy pojawia się problem, czy zależy od kąta otwarcia pokrywy oraz czy występuje po podłączeniu innego ekranu. Pomocne są także fotografie pokazujące objaw, lecz nie powinny zastępować oględzin, ponieważ aparat może automatycznie korygować jasność i kolory. Jeżeli laptop działa poprawnie, a niski kontrast dotyczy wyłącznie określonej witryny lub aplikacji, właściwym kierunkiem będzie zgłoszenie problemu administratorowi tej treści albo osobie odpowiedzialnej za interfejs.