Kontrast i czytelność kolorów

Czytelność to różnica jasności między kolorem tekstu a kolorem tła. Im większa ta różnica, tym łatwiej odczytać tekst. Zbyt niski kontrast sprawia, że treść staje się trudna do przeczytania - szczególnie dla osób z wadami wzroku, osób starszych lub w trudnych warunkach oświetleniowych (np. na telefonie w pełnym słońcu).

Według Światowej Organizacji Zdrowia (WHO), około 2,2 miliarda ludzi na świecie ma różne formy zaburzeń widzenia. Do tego dochodzą miliony osób z daltonizmem (około 8% mężczyzn i 0,5% kobiet) oraz osoby, których wzrok osłabł z wiekiem.

Narzędzie oblicza współczynnik kontrastu według wzoru określonego w standardzie WCAG 2.1 (Web Content Accessibility Guidelines) - międzynarodowych wytycznych dostępności cyfrowej. Wynik pozwala obiektywnie ocenić, czy kolory są wystarczająco czytelne, niezależnie od ustawień monitora czy indywidualnego postrzegania barw.

Narzędzie pokazuje współczynnik kontrastu w skali od 1:1 (brak kontrastu) do 21:1 (maksymalny kontrast - czarny na białym). Wynik porównywany jest z progami określonymi w standardzie WCAG:

• Tekst zwykły - wymaga kontrastu co najmniej 4.5:1 dla poziomu AA (standard minimalny) lub 7:1 dla poziomu AAA (standard rozszerzony). Dotyczy tekstu o rozmiarze poniżej 18pt (24px) lub poniżej 14pt (18.5px) pogrubionego.
• Tekst duży / pogrubiony - wymaga kontrastu co najmniej 3:1 dla poziomu AA lub 4.5:1 dla poziomu AAA. Dotyczy tekstu od 18pt (24px) lub od 14pt (18.5px) pogrubionego - nagłówki, przyciski, wyróżnienia.
• Ikony i elementy graficzne - wymagają kontrastu co najmniej 3:1 dla poziomu AA. Dotyczy ikon, przycisków, pól formularzy i innych elementów interfejsu, które przekazują informację.

Poziom AA to minimum wymagane przez przepisy dotyczące dostępności cyfrowej w wielu krajach, w tym w dyrektywie UE o dostępności stron internetowych. Poziom AAA zapewnia lepszą czytelność, ale nie zawsze jest praktyczny do osiągnięcia dla wszystkich elementów.

Jeśli kontrast jest za niski, nie trzeba szukać odpowiedniego koloru metodą prób i błędów. Funkcja Dopasuj automatycznie znajduje wariant koloru tekstu, który spełnia wybrany próg kontrastu.

Jak działa dopasowanie:

1. Wybierz cel dopasowania z listy - np. AA dla tekstu zwykłego lub AAA dla tekstu dużego.
2. Uruchom funkcję przyciskiem Dopasuj.
3. Narzędzie przeszuka warianty jasności koloru tekstu i zaproponuje najbliższy spełniający wymagania.
4. Zaproponowany kolor można skopiować do schowka lub od razu ustawić jako nowy kolor tekstu.

Algorytm zachowuje odcień i nasycenie oryginalnego koloru, zmieniając wyłącznie jasność. Proponowana barwa pozostaje więc spójna z identyfikacją wizualną, a jednocześnie spełnia standard dostępności.

Widzę komunikat o błędzie formatu koloru

Sprawdź format koloru. Kod HEX powinien zaczynać się od # i zawierać 3 lub 6 znaków (np. #fff lub #ffffff). Dla formatu RGB sprawdź, czy wartości są oddzielone przecinkami i mieszczą się w zakresie 0-255.

Funkcja Dopasuj nie znajduje odpowiedniego koloru

Gdy tło i tekst mają zbliżoną jasność w tym samym odcieniu, algorytm może nie znaleźć wariantu spełniającego wymagania bez zmiany odcienia. W takim przypadku rozważ zmianę koloru tła lub wybór zupełnie innego koloru tekstu.

Kolor w próbniku nie odpowiada wpisanemu kodowi

Próbnik kolorów w przeglądarce obsługuje tylko format HEX bez przezroczystości. Jeśli wpiszesz kolor w formacie RGBA lub HSLA z przezroczystością, próbnik pokaże tylko część kolorową (bez alpha). Obliczenia kontrastu nadal uwzględniają przezroczystość.

Daltonizm (ślepota barw) to zaburzenie widzenia kolorów, które dotyczy około 8% mężczyzn i 0,5% kobiet. Osoby z daltonizmem mogą mieć trudności z rozróżnieniem niektórych par kolorów, nawet jeśli kontrast jasności jest wystarczający.

Najczęstsze typy daltonizmu:

• Deuteranopia - trudności z rozróżnieniem zieleni i czerwieni (najczęstsza forma)
• Protanopia - trudności z widzeniem czerwieni
• Tritanopia - trudności z widzeniem niebieskiego i żółtego (rzadka)

To narzędzie sprawdza kontrast jasności, który jest ważny dla wszystkich użytkowników. Jednak przy projektowaniu warto dodatkowo unikać problematycznych kombinacji kolorów (np. czerwony tekst na zielonym tle) i nie polegać wyłącznie na kolorze do przekazywania informacji - używaj też kształtów, ikon, tekstu.