Zły kontrast kolorów: przykłady zmierzone i poprawione
Przykłady złego kontrastu kolorów
Przykłady złego kontrastu kolorów i jak poprawić każdy z nich | We.Inc
Osiem typowych przykładów złego kontrastu kolorów ze stron sklepów, każdy z obliczonym współczynnikiem WCAG, przyczyną błędu i poprawką do sprawdzenia na żywo.
Zły kontrast kolorów to tekst lub kontrolka, której kolor jest zbyt zbliżony do tła, przez co wielu odwiedzających ma problem z odczytaniem treści. Najczęstsi winowajcy to jasnoszary tekst, biały tekst na jaskrawym pomarańczowym lub zielonym, podpowiedzi w polach formularzy i nagłówki na zdjęciach. WCAG 2.2 wymaga 4.5:1 dla zwykłego tekstu, a każdy przykład poniżej pokazuje swój współczynnik.
Współczynnik każdego przykładu przed poprawką i po niej
Przykład
Przed
Po
Jasnoszary tekst główny
Tekst zastępczy użyty jako etykieta
Biały tekst na jaskrawym pomarańczowym przycisku
Biały tekst na jasnozielonej plakietce
Szary tekst na szarej karcie
Niebieski tekst marki na ciemnym panelu
Biały nagłówek na jasnym zdjęciu
To błędy, które ciągle pojawiają się na stronach małych firm. Odtworzyliśmy je tutaj w naszych własnych kolorach, żebyś mógł zobaczyć liczby. Przy każdym podajemy regułę, którą łamie, a edytor pozwala wypróbować poprawkę i obserwować zmianę współczynnika.
Znajdź najmniejszy i najbledszy tekst na stronie: daty, podpisy, stopki, podpowiedzi w formularzach.
Sprawdź go na dokładnie tym tle, na którym leży, łącznie z barwionymi kartami i banerami.
Przy tekście na zdjęciu testuj względem najjaśniejszej części obrazu za literami.
Poprawiaj najpierw jasność. Ciemniejszy lub jaśniejszy odcień tej samej barwy zachowuje wygląd marki.
Nie oceniaj kontrastu wyłącznie na jasnym monitorze komputera. Obejrzyj stronę na telefonie na zewnątrz.
Nieaktywne przyciski są w WCAG zwolnione z wymogu, ale upewnij się, że aktywny przycisk nigdy nie wygląda na nieaktywny.
Tekst przy najechaniu i fokusie też się liczy. W3C wymienia tekst pokazywany po najechaniu kursorem lub przy fokusie klawiatury jako objęty wymogiem.
Jeśli baner promocyjny używa jasnego koloru marki, umieść na nim ciemny tekst zamiast białego.
Współczynniki między 3:1 a 4.5:1 wystarczą dla dużych nagłówków i ikon, ale nie dla akapitów.
Najczęściej zadawane pytania
Dlaczego biały tekst na pomarańczowym tak często nie przechodzi testu?
Pomarańczowy i żółty to jasne kolory, więc ich luminancja jest bliska bieli. Nasz przykładowy pomarańczowy #F5A623 daje z białym tekstem tylko około 2:1.
Czy tekst zastępczy musi spełniać wymóg kontrastu?
Tak. Objaśnienie W3C do kryterium sukcesu 1.4.3 wymienia tekst zastępczy wśród tekstów, których dotyczy. Widoczna etykieta nad polem nadal jest lepszym wzorcem.
Jak sprawdzić tekst na zdjęciu?
Mierz względem fragmentu obrazu bezpośrednio za tekstem i zakładaj najjaśniejszy obszar. W3C wymienia obrazy tła bez wystarczającego kontrastu jako błąd.
Czy kolorowy link bez podkreślenia to błąd kontrastu?
To problem użycia koloru w ramach kryterium sukcesu 1.4.1, które mówi, że kolor nie może być jedynym wizualnym sposobem przekazania informacji. Podkreślenie rozwiązuje sprawę.
Czy wyszarzone nieaktywne przyciski to problem?
Tekst w nieaktywnych elementach interfejsu nie ma wymogu kontrastu według 1.4.3. Upewnij się tylko, że przycisk naprawdę jest nieaktywny, a nie tylko tak wystylizowany.
Dlaczego te błędy są tak powszechne
Projekty często zatwierdza się na dużym, jasnym ekranie, na którym blady tekst nadal wygląda wyraźnie. Ta sama strona na starszym telefonie z przyciemnionym ekranem wygląda zupełnie inaczej.
Resztę powodują kolory marki. Wesoły pomarańczowy lub limonkowy świetnie wygląda jako kształt, a potem ktoś kładzie na nim biały tekst, bo tak zwykle wyglądają przyciski z kolorem marki.
Reguła, która nie dotyczy współczynników
Kryterium sukcesu 1.4.1 jest niezależne od współczynników: wymaga, by kolor nigdy nie był jedynym sposobem pokazania informacji. Łamią je linki oznaczone tylko kolorem, pola wymagane oznaczone tylko na czerwono i wykresy rozróżniane wyłącznie barwą.
Łącz kolor z czymś innym: podkreśleniem, ikoną, etykietą, wzorem.
Co jest nie tak w każdym przykładzie
Problem i poprawka dla każdego przykładu
Przykład
Dlaczego nie przechodzi
Poprawka
Jasnoszary tekst główny
Bladoszary wygląda spokojnie w makiecie, ale na telefonie w świetle dziennym znika.
Przyciemnij szary do #595959, który osiąga 7:1 na białym.
Tekst zastępczy użyty jako etykieta
Podpowiedź w pustym polu jest zwykle blada, a WCAG traktuje tekst zastępczy jako tekst, który też wymaga kontrastu.
Zostaw widoczną etykietę nad polem i przyciemnij podpowiedź do #6B7280.
Biały tekst na jaskrawym pomarańczowym przycisku
Jaskrawe średnie tony, takie jak pomarańczowy i żółty, są jasne, więc biały tekst ma na nich niewielki kontrast.
Użyj przypalonego pomarańczu, na przykład #C2410C, albo zostaw jaskrawy pomarańczowy i daj na nim ciemny tekst.
Biały tekst na jasnozielonej plakietce
Plakietki sukcesu i promocji często używają jaskrawej zieleni, na której biały tekst się nie sprawdza.
Użyj głębszej zieleni, na przykład #15803D, pod białym tekstem.
Szary tekst na szarej karcie
Szary, który przechodzi na białym, może nie przejść na barwionej karcie, bo karta jest ciemniejsza niż strona.
Na barwionych powierzchniach użyj ciemniejszego szarego, na przykład #4B5563.
Niebieski tekst marki na ciemnym panelu
Średni niebieski, który działa na białym, robi się mętny na grafitowym: oba kolory leżą w środku zakresu jasności.
Rozjaśnij niebieski do #93C5FD na ciemnych panelach.
Biały nagłówek na jasnym zdjęciu
Tekst na zdjęciu sprawdza się względem fragmentów obrazu za nim. Jasne niebo lub biała ściana nie dają białemu tekstowi szansy się wyróżnić.
Umieść nagłówek na pełnym lub mocno przyciemnionym pasie albo przenieś go poza obraz.
Link wyróżniony tylko kolorem
Jeśli link różni się od otaczającego zdania wyłącznie kolorem, osoby, które nie rozróżniają tych kolorów, nie mogą go znaleźć.
Podkreślaj linki w tekście głównym. Kolor może zostać.
Poprawki w CSS
Czytelny nagłówek na zdjęciu
Ciemny pas za słowami daje białemu tekstowi stabilne tło, niezależnie od tego, co pokazuje zdjęcie.
Linki, które nie polegają na kolorze
Podkreślaj linki w akapitach i nadaj fokusowi klawiatury wyraźny obrys.
Edytor przed i po
Wybierz przykład, a potem zmieniaj poprawione kolory, by zobaczyć, jak daleko możesz przesunąć odcień marki, zanim przestanie spełniać wymóg.
Przykład
Kolor tekstu
Kolor tła
Kontrast {r}
Link względem tekstu głównego {r}
Spełnia 4.5:1 dla tekstu głównego.
Spełnia tylko 3:1, więc najwyżej duży tekst lub ikony.
Poniżej 3:1. Trudne do odczytania dla wielu osób.
Poprawka zachowuje kolory i dodaje podkreślenie, więc kolor nie jest już jedynym sygnałem.
To nie jest kolor hex
W tym tygodniu darmowa dostawa przy zamówieniach powyżej $50.
Dodaj do koszyka
Twój adres e-mail
Wiosenne menu już dostępne
Przeczytaj naszą
politykę zwrotów
przed złożeniem zamówienia.
Kolory są sprawdzane w Twojej przeglądarce za pomocą wzoru WCAG 2.2.
Jasnoszary tekst główny
Tekst zastępczy użyty jako etykieta
Biały tekst na jaskrawym pomarańczowym przycisku
Biały tekst na jasnozielonej plakietce
Szary tekst na szarej karcie
Niebieski tekst marki na ciemnym panelu
Link wyróżniony tylko kolorem
Bladoszary wygląda spokojnie w makiecie, ale na telefonie w świetle dziennym znika.
Podpowiedź w pustym polu jest zwykle blada, a WCAG traktuje tekst zastępczy jako tekst, który też wymaga kontrastu.
Jaskrawe średnie tony, takie jak pomarańczowy i żółty, są jasne, więc biały tekst ma na nich niewielki kontrast.
Plakietki sukcesu i promocji często używają jaskrawej zieleni, na której biały tekst się nie sprawdza.
Szary, który przechodzi na białym, może nie przejść na barwionej karcie, bo karta jest ciemniejsza niż strona.
Średni niebieski, który działa na białym, robi się mętny na grafitowym: oba kolory leżą w środku zakresu jasności.
Jeśli link różni się od otaczającego zdania wyłącznie kolorem, osoby, które nie rozróżniają tych kolorów, nie mogą go znaleźć.
Przyciemnij szary do #595959, który osiąga 7:1 na białym.
Zostaw widoczną etykietę nad polem i przyciemnij podpowiedź do #6B7280.
Użyj przypalonego pomarańczu, na przykład #C2410C, albo zostaw jaskrawy pomarańczowy i daj na nim ciemny tekst.
Użyj głębszej zieleni, na przykład #15803D, pod białym tekstem.
Na barwionych powierzchniach użyj ciemniejszego szarego, na przykład #4B5563.
Rozjaśnij niebieski do #93C5FD na ciemnych panelach.
Podkreślaj linki w tekście głównym. Kolor może zostać.