Kontrast kolorów tekstu, przycisków i ikon

Dlaczego kontrast ma znaczenie

Blady tekst kosztuje czytelników. Osoby słabowidzące, starsi czytelnicy i każdy, kto patrzy na telefon w jasnym świetle, potrzebują wyraźnej różnicy między tekstem a tłem. Dlatego wytyczne Web Content Accessibility Guidelines (WCAG) organizacji W3C określają minimalne wartości: dla tekstu, dla kontrolek takich jak przyciski i pola formularzy oraz dla ikon i grafik. Te wartości da się zmierzyć i sprawdzić przed startem.

Jak działa współczynnik kontrastu

Współczynnik kontrastu porównuje, jak jasne są dwa kolory. WCAG nie patrzy przy tym na odcień, tylko na względną luminancję: wartość od 0 dla najciemniejszej czerni do 1 dla najjaśniejszej bieli. Trzy kanały, czerwony, zielony i niebieski, są przeliczane i ważone: zielony liczy się najbardziej, czerwony mniej, a niebieski najmniej. Współczynnik to (L1 + 0,05) / (L2 + 0,05), gdzie L1 to luminancja jaśniejszego koloru. Wynik leży między 1:1 dla dwóch takich samych kolorów a 21:1 dla czerni na bieli.

W praktyce liczą się dwie zasady W3C. Po pierwsze, wartości nie są zaokrąglane: współczynnik 4,499:1 nie osiąga progu 4,5:1. Po drugie, kontrast mierzy się względem tła ustawionego dla tekstu. Jeśli strona ustawia tylko kolor tekstu, a nie ustawia koloru tła, W3C uznaje to za błąd, bo domyślne tło odwiedzającego jest nieznane. Dlatego zawsze ustawiaj oba kolory razem.

Trzy kryteria sukcesu

• 1.4.3 Kontrast (minimalny), poziom AA: tekst i obrazy tekstu potrzebują co najmniej 4,5:1, duży tekst co najmniej 3:1.
• 1.4.6 Kontrast (wzmocniony), poziom AAA: tekst potrzebuje co najmniej 7:1, duży tekst co najmniej 4,5:1. To surowszy poziom, który najbardziej pomaga przy długich tekstach.
• 1.4.11 Kontrast elementów nietekstowych, poziom AA: co najmniej 3:1 względem sąsiednich kolorów dla wszystkiego, co trzeba zobaczyć, aby rozpoznać kontrolkę i jej stan (na przykład obramowanie pola lub wskaźnik fokusu), oraz dla części grafik potrzebnych do zrozumienia treści, takich jak ikony czy linie na wykresie.

Co liczy się jako duży tekst

Duży tekst ma co najmniej 18 punktów albo co najmniej 14 punktów pogrubionych. W3C przelicza to na około 24 piksele i około 18,5 piksela przy pogrubieniu. Duży tekst może mieć mniejszy kontrast, bo litery są większe, a ich kreski szersze. Uważaj na cienkie kroje: według W3C wygładzanie krawędzi może sprawić, że cienkie lub nietypowe czcionki wyglądają bladziej niż ich ustawiony kolor. W3C zaleca grubsze czcionki albo parę kolorów wyraźnie powyżej minimum.

Co nie musi spełniać wymagań

• Nieaktywne kontrolki, na przykład wyszarzony przycisk.
• Czysta dekoracja i tekst, którego nikt nie widzi.
• Tekst, który jest częścią logo lub nazwy marki.
• Przypadkowy tekst na zdjęciu z dużą ilością innej treści, na przykład znak drogowy na fotografii.

Typowe błędy

• Jasnoszary na białym. Szary kolor dat, podpisów lub tekstu pomocniczego bywa zbyt blady: #999999 na białym osiąga tylko 2,84:1. Najjaśniejszy czysty szary, który spełnia AA dla zwykłego tekstu na białym, to #767676 z wynikiem 4,54:1.
• Tekst na zdjęciach. Kontrast zmienia się w każdym miejscu fotografii. W3C wymienia obrazy tła bez wystarczającego kontrastu jako błąd (F83). Umieść tekst na jednolitym polu, przyciemnij zdjęcie pod nim albo postaw tekst obok zdjęcia. Sprawdź najjaśniejsze miejsce pod tekstem.
• Tekst placeholdera. Szara podpowiedź w pustym polu formularza to tekst i dotyczy jej 1.4.3. Jasny szary, taki jak #9ca3af na białym, osiąga tylko 2,53:1. Placeholder nie zastępuje też widocznej etykiety.
• Stany hover i fokus. Tekst, który pojawia się lub zmienia po najechaniu myszą albo przy fokusie z klawiatury, musi osiągać te same wartości. Efekt hover nie może obniżać kontrastu kontrolki ani osłabiać wskaźnika fokusu. Wskaźnik fokusu, który projektujesz sam, potrzebuje 3:1 względem tła obok niego.
• Biały tekst na jasnych kolorach marki. Pomarańczowe, żółte, jasnozielone lub turkusowe przyciski z białym tekstem często nie spełniają wymagań: biały na #ff6600 osiąga 2,93:1.
• Blade obramowania i ikony. Jeśli obramowanie jest jedyną rzeczą, która pokazuje, gdzie jest pole formularza, potrzebuje 3:1: #cccccc na białym ma 1,60:1. Ikony, które niosą znaczenie bez tekstu, na przykład strzałka listy rozwijanej albo ikona zamknięcia, też potrzebują 3:1.
• Sprawdzony tylko jeden motyw. Jeśli twoja strona ma tryb ciemny, sprawdź jego pary kolorów osobno. Kolor, który działa na białym, może nie spełniać wymagań na ciemnym tle.

Jak poprawić paletę marki, nie tracąc marki

1. 1Zapisz każdy kolor razem z jego rolą: tekst, tło, akcent lub przycisk, obramowanie. Wiele problemów zaczyna się wtedy, gdy jeden kolor pełni każdą funkcję.
2. 2Zostaw kolor marki tam, gdzie zasady łatwiej spełnić albo gdzie nie obowiązują: w logo, na dużych powierzchniach, w dekoracjach i w dużych nagłówkach.
3. 3Dla tekstu i małych elementów użyj ciemniejszego lub jaśniejszego wariantu tego samego odcienia. Jeśli zmienia się tylko jasność, kolor pozostaje rozpoznawalny: biały tekst na #c74f00, ciemniejszym pomarańczowym, osiąga 4,61:1.
4. 4Albo zmień kolor tekstu. Ciemny tekst na jasnym kolorze marki często działa lepiej niż biały: #1a1a1a na #ff6600 osiąga 5,92:1.
5. 5Ustal jeden szary dla tekstu pomocniczego, który spełnia wymagania, na przykład #767676 na białym, i używaj go wszędzie zamiast kilku bladych szarości.
6. 6Sprawdź każdy stan: zwykły, hover, fokus, błąd i tryb ciemny. Zapisz gotowe kolory jako zmienne w arkuszu stylów, żeby nikt znów nie wybierał ręcznie bladego koloru.

Sprawdź kolory z Do4U

Narzędzie Sprawdzanie kontrastu kolorów liczy te wartości dla twoich kolorów. Wpisujesz kolory, jeden w wierszu, i nadajesz każdemu rolę: tekst, tło, akcent (na przykład przycisk) lub obramowanie. Kod sprawdza każdą sensowną parę względem AA i AAA dla zwykłego i dużego tekstu oraz względem 3:1 dla obramowań, ikon i powierzchni przycisków, bez zaokrąglania w górę. Dla każdej pary, która nie spełnia wymagań, dostajesz najbliższy kolor, który je spełnia, raz ciemniejszy i raz jaśniejszy, w tym samym odcieniu. Do4U tworzy też dopasowaną paletę, sprawdza ją jeszcze raz w całości i eksportuje jako zmienne CSS, SCSS lub JSON. Wszystko działa w kodzie, bez AI, a sprawdzanie jest za darmo.

Narzędzie zna tylko pary kolorów, które wpiszesz. Nie widzi rozmiaru czcionki, zdjęć pod tekstem, przezroczystości ani stanów hover i fokus, dlatego sprawdź też gotowe strony. Do4U buduje szkic, a ty sprawdzasz i decydujesz.