zbyt niskie kontrasty kolorów

Zbyt niskie kontrasty kolorów naruszają wytyczne dostępności i utrudniają odbiór treści.

Zbyt niskie kontrasty kolorów jako problem czytelności interfejsu

Zbyt niskie kontrasty kolorów występują wtedy, gdy różnica między barwą tekstu a tłem jest zbyt mała, aby treść można było wygodnie odczytać w różnych warunkach. Dotyczy to nie tylko osób z rozpoznaną wadą wzroku. Słaba czytelność pojawia się także przy zmęczeniu oczu, silnym świetle padającym na ekran, odbiciach na błyszczącej matrycy, obniżonej jasności wyświetlacza albo korzystaniu z urządzenia w ruchu. Problem może obejmować tekst akapitów, nagłówki, etykiety pól formularzy, odnośniki, komunikaty błędów, ikony oraz elementy sterujące.

W praktyce zbyt mały kontrast sprawia, że informacja nie znika całkowicie, lecz wymaga większego wysiłku. Odczytanie krótkiego napisu może być jeszcze możliwe, natomiast dłuższy tekst, instrukcja lub formularz stają się męczące. Osoba korzystająca z witryny może pominąć ważny komunikat, nie zauważyć aktywnego pola albo nie rozpoznać, że dany element jest klikalny. Z punktu widzenia dostępności nie wystarcza więc samo umieszczenie treści na stronie. Istotne jest także zapewnienie warunków, w których treść pozostaje rozpoznawalna.

Ocena kontrastu odnosi się do relacji między kolorem pierwszoplanowym a tłem. Nie należy oceniać jej wyłącznie na podstawie własnego monitora, ponieważ ustawienia jasności, profil kolorów, rodzaj matrycy i warunki oświetleniowe mogą zmieniać odbiór. Warto również pamiętać, że kontrast samego tekstu to nie wszystko. Elementy interfejsu, obramowania pól, znaczniki fokusu i wykresy muszą być odróżnialne także wtedy, gdy użytkownik nie rozpoznaje barw w typowy sposób.

Zbyt niskie kontrasty kolorów w zestawieniu z rozmiarem i grubością tekstu

Mały, cienki lub delikatnie wygładzony tekst wymaga wyraźniejszego odróżnienia od tła niż duży, pogrubiony napis. Wąskie kroje pisma, jasne fonty oraz tekst umieszczony na fotografii są szczególnie podatne na utratę czytelności. Nawet jeśli pojedyncze słowo wydaje się zrozumiałe, dłuższy opis może szybko powodować zmęczenie. Dlatego podczas projektowania nie powinno się kompensować słabego kontrastu wyłącznie zwiększeniem rozmiaru liter. Lepszym rozwiązaniem jest połączenie odpowiedniej wielkości, grubości i kontrastu oraz zapewnienie wystarczającej przestrzeni między wierszami.

Inaczej odbierany jest czarny tekst na jasnym, jednolitym tle, a inaczej szary tekst na tle o podobnej jasności. Znaczenie ma nie tylko nazwa koloru, lecz przede wszystkim jego względna luminancja, czyli poziom postrzeganej jasności. Dwa kolory mogą różnić się odcieniem, a mimo to wyglądać podobnie pod względem jasności. W takiej sytuacji osoby, które słabiej rozpoznają barwy, mogą widzieć znacznie mniej niż użytkownicy dokonujący oceny wyłącznie na podstawie estetyki.

Nie należy też przekazywać znaczenia wyłącznie za pomocą koloru. Czerwone oznaczenie może sygnalizować błąd, zielone poprawne wykonanie, a żółte ostrzeżenie, jednak przydatny jest również tekst, ikona, wzór, obramowanie albo inny jednoznaczny sygnał. Takie uzupełnienie pomaga osobom z zaburzeniami widzenia barw i zwiększa zrozumiałość interfejsu na ekranach o słabszej jakości. Wykresy powinny mieć opisy, legendy i różne oznaczenia serii, a statusy w formularzach nie powinny zależeć wyłącznie od zmiany barwy pola.

Zbyt niskie kontrasty kolorów w typowych elementach strony

Najczęściej problem ujawnia się w kilku powtarzalnych miejscach. Jasnoszary tekst pomocniczy na białym tle bywa stosowany do opisów pól i informacji dodatkowych, lecz może stać się praktycznie niewidoczny. Podobne trudności dotyczą linków odróżnianych jedynie subtelną zmianą odcienia, przycisków z tekstem o małej różnicy jasności względem tła oraz placeholderów w formularzach. Placeholder nie powinien zastępować właściwej etykiety, a jeśli zawiera istotną instrukcję, musi pozostać czytelny do czasu wpisania danych.

Kłopotliwe bywają także napisy umieszczone na zdjęciach, gradientach i kolorowych banerach. W jednym miejscu fotografii tekst może być wyraźny, a kilka pikseli dalej zlewać się z tłem. Stosuje się wtedy jednolitą warstwę przyciemniającą lub rozjaśniającą, panel pod tekstem, cień o odpowiednio dobranym charakterze albo osobne tło dla komunikatu. Sam cień nie zawsze rozwiązuje problem, ponieważ przy małej czcionce może rozmywać krawędzie zamiast poprawiać rozróżnienie.

Ważny jest również stan elementu podczas interakcji. Przycisk po najechaniu kursorem powinien nadal być rozpoznawalny, a pole po uzyskaniu fokusu powinno mieć wyraźne oznaczenie. Nie powinno się usuwać obramowania fokusu tylko dlatego, że nie pasuje do projektu wizualnego. Klawiatura, czytnik ekranu, powiększenie widoku i tryby wysokiego kontrastu mogą ujawnić problemy, których nie widać przy zwykłym korzystaniu z myszy. Należy sprawdzać stan normalny, aktywny, wyłączony, zaznaczony i błędny, ponieważ każda z tych odmian może mieć inne kolory.

Zbyt niskie kontrasty kolorów mogą dotyczyć również programów zainstalowanych na komputerze, dokumentów, arkuszy, prezentacji i ustawień systemowych. Jeżeli tekst na ekranie jest stale blady, obraz wydaje się wyprany, a elementy interfejsu trudno rozdzielić, przyczyną nie musi być sam projekt strony. Możliwe są ustawienia jasności, tryb oszczędzania energii, filtr barw, nieprawidłowy profil wyświetlania albo problem z ekranem. Rozróżnienie problemu projektowego od sprzętowego wymaga porównania kilku aplikacji i różnych źródeł treści.

Zbyt niskie kontrasty kolorów a praktyczne sprawdzanie czytelności

Sprawdzanie warto rozpocząć od przejrzenia strony w zwykłym powiększeniu, przy zmiennym oświetleniu oraz z wyłączonymi dodatkowymi filtrami obrazu. Następnie można użyć narzędzia do analizy kontrastu, wskazać kolor tekstu i kolor tła, a potem sprawdzić wszystkie warianty komponentu. Wynik automatyczny jest pomocny, ale nie zastępuje oceny całego interfejsu. Narzędzie może nie rozpoznać tekstu na fotografii, elementów pojawiających się dopiero po interakcji, wykresów ani sytuacji, w której informacja jest przekazywana wyłącznie przez kolor.

Podczas testu powinno się zwrócić uwagę na tekst podstawowy, tekst drugorzędny, nagłówki, linki, przyciski, komunikaty, ikony oraz obramowania. Dobrą praktyką jest zapisanie użytych kolorów w jednym miejscu i sprawdzenie ich w wielu komponentach. Jeżeli jeden kolor pełni funkcję tekstu, tła i oznaczenia stanu, może wymagać rozdzielenia zastosowań. Warto również przetestować wersję czarno-białą lub ograniczoną kolorystycznie. Taki test często szybko pokazuje, czy hierarchia informacji opiera się na różnicy jasności, czy wyłącznie na odcieniu.

Przydatne jest sprawdzanie strony przez kilka osób oraz na więcej niż jednym urządzeniu. Użytkownik może pracować na ekranie o niskiej jasności, z powiększeniem systemowym albo z włączoną funkcją redukcji niebieskiego światła. Na odbiór wpływają też refleksy, zabrudzenia, zużycie matrycy i kąt patrzenia. Jeżeli w witrynie zastosowano jasne, subtelne kolory, należy przewidzieć możliwość ich zmiany bez utraty znaczenia. Przejrzyste etykiety, wyraźne obramowania, odpowiednia typografia i jednoznaczne komunikaty zwykle poprawiają dostępność skuteczniej niż sama dekoracyjna paleta.

Zbyt niskie kontrasty kolorów i moment zgłoszenia problemu do serwisu

Jeśli trudność dotyczy jednej strony lub jednego programu, prawdopodobne jest źródło projektowe albo konfiguracyjne. Można wtedy sprawdzić ustawienia motywu, powiększenia, trybu wysokiego kontrastu, filtrów kolorów i profilu wyświetlania. Gdy podobnie blady obraz pojawia się w wielu aplikacjach, na ekranie startowym lub w różnych źródłach, wskazane jest przeprowadzenie diagnostyki urządzenia. Szczególnej uwagi wymagają migotanie, nierównomierne podświetlenie, plamy, zanikanie części obrazu, zmiany po poruszeniu pokrywą laptopa oraz widoczne uszkodzenia przewodu lub złącza.

Przed zgłoszeniem warto zanotować, kiedy problem występuje, czy pojawia się po uruchomieniu urządzenia oraz czy zmienia się po podłączeniu innego ekranu. Pomocne może być wykonanie zrzutu ekranu, ponieważ zrzut zachowuje obraz generowany przez system, ale nie pokaże wszystkich usterek samej matrycy. Porównanie zewnętrznego monitora i wbudowanego ekranu ułatwia wskazanie, czy źródła należy szukać w ustawieniach, sterowniku, przewodzie, układzie graficznym czy panelu.

W przypadku utrzymujących się trudności można zgłosić laptopa do Warszawskiego Pogotowia Komputerowego 24/7, gdzie dostępna jest darmowa diagnoza laptopa. Przy zgłoszeniu dobrze opisać, czy zbyt niskie kontrasty kolorów dotyczą wyłącznie określonej strony, całego systemu, czy także obrazu wyświetlanego podczas uruchamiania. Takie informacje ułatwiają odróżnienie problemu dostępności treści od usterki sprzętowej i pozwalają dobrać dalsze postępowanie do rzeczywistego źródła objawów.