Dlaczego samo spojrzenie na stronę nie wystarczy
Tekst może wyglądać elegancko na monitorze projektanta, a mimo to sprawiać trudność podczas czytania. Jasnoszare litery na białym tle, cienka czcionka albo napisy położone na zdjęciu wymagają większego skupienia. Warunki też się zmieniają: ktoś korzysta z telefonu w jasnym pomieszczeniu, ktoś inny powiększa stronę lub ma trudności z rozróżnianiem szczegółów. Kontrast warto więc sprawdzić, zamiast oceniać go wyłącznie na podstawie własnego wrażenia.
Kontrast opisuje różnicę jasności między kolorem tekstu a kolorem bezpośrednio za nim. Dwie barwy mogą wydawać się bardzo różne, a jednak mieć podobną jasność. Dlatego zestawienie kolorów, które dobrze wygląda jako ozdoba, nie zawsze nadaje się do dłuższego akapitu. Czytelność zależy również od wielkości i grubości liter, odstępów oraz rodzaju tła, lecz dobry kontrast jest rozsądnym punktem wyjścia.
Jak zmierzyć kontrast kolorów
Najprościej użyć narzędzia do sprawdzania kontrastu, do którego wpisuje się kolory tekstu i tła. Kolory można odczytać w ustawieniach motywu strony albo, jeśli masz taką możliwość, w narzędziach przeglądarki. Wynik jest podawany jako stosunek, na przykład 4,5:1. Przy zwykłym tekście warto dążyć do co najmniej 4,5:1, a przy dużym tekście do co najmniej 3:1. Duży tekst oznacza w tym kontekście odpowiednio duże lub pogrubione litery, a nie po prostu nagłówek oznaczony jako nagłówek.
Sprawdzaj rzeczywiste pary kolorów widoczne na stronie. Jeśli tekst leży na półprzezroczystej warstwie, sam kolor ustawiony w edytorze może nie odpowiadać temu, co widzi czytelnik. Podobnie link po najechaniu kursorem, przycisk po kliknięciu i komunikat o błędzie mogą mieć inne kolory niż w stanie podstawowym. Pomiar jednego akapitu nie daje więc odpowiedzi za całą witrynę.
Co sprawdzić na stronie firmowej, blogu lub w katalogu
Zacznij od miejsc, które użytkownik musi przeczytać, żeby wykonać zadanie: tekstu głównego, menu, linków, przycisków i formularzy. Sprawdź etykiety pól, podpowiedzi, komunikaty po wysłaniu formularza oraz informacje o błędach. W katalogu zwróć uwagę także na nazwy pozycji i filtry, a na blogu na podpisy pod ilustracjami. Mniejszy, drugorzędny tekst łatwo przeoczyć podczas projektowania, choć bywa potrzebny do zrozumienia treści.
Przejdź przez stronę także za pomocą klawiatury. Musisz widzieć, który link lub przycisk ma aktualnie fokus, czyli jest gotowy do użycia po naciśnięciu klawisza Enter. Sprawdź wygląd elementów wyłączonych, rozwijanych i zaznaczonych. Nie przekazuj ważnej informacji wyłącznie kolorem: jeśli błąd w formularzu jest oznaczony czerwienią, dodaj również zrozumiały tekst wyjaśniający problem.
Najczęstsze trudności i proste poprawki
Gdy tekst jest zbyt blady, zwykle łatwiej przyciemnić litery lub rozjaśnić tło niż zmieniać cały projekt. Zadbaj o stałe kolory podstawowych elementów, aby poprawka objęła wszystkie podstrony. Jeśli jasny tekst znajduje się na zdjęciu, zastosuj za nim jednolite pole albo odpowiednio ciemną warstwę. Sprawdź kilka fragmentów fotografii: napis czytelny na ciemnym rogu może zniknąć na jasnym obszarze tego samego obrazu.
Nie próbuj naprawiać słabego kontrastu samym pogrubieniem lub powiększeniem tekstu. Takie zmiany mogą pomóc w czytaniu, ale nie zawsze zastąpią właściwy dobór kolorów. Uważaj też na tekst wpisany bezpośrednio w obraz: trudniej go powiększyć, skopiować i dopasować do różnych ekranów. Ważne informacje lepiej umieszczać jako zwykły tekst strony.
Prosta rutyna kontroli po zmianach
Utwórz krótką listę reprezentatywnych widoków: stronę główną, artykuł, podstronę kontaktową, formularz i typową pozycję katalogu, jeśli z niego korzystasz. Po zmianie motywu lub kolorów zmierz kontrast w tych miejscach, a następnie obejrzyj je na wąskim ekranie i przy powiększonej zawartości. Automatyczny pomiar pomaga wykrywać problemy, lecz nie zastępuje sprawdzenia, czy napisy na zdjęciach i wszystkie stany interfejsu pozostają czytelne.
Warto zapisać ustalone kolory tekstu, tła, linków i przycisków w krótkiej instrukcji dla osób edytujących stronę. Dzięki temu nowy baner lub podstrona nie wprowadzi przypadkiem bladych napisów. Jeśli nie masz czasu sprawdzić wszystkiego naraz, zacznij od treści i działań najważniejszych dla odwiedzających, a potem przejdź do pozostałych elementów.
