Korzystanie z wysokiego kontrastu kolorów dla łatwiejszego projektowania
Wysoki współczynnik odrzuceń jest często spowodowany słabą dostępnością wizualną witryny. Gdy czcionki są zbyt małe lub są mało czytelne, gdy jest zbyt wiele rozrywek lub zbyt mało białych znaków, wiele osób po prostu opuść witrynę bez namysłu.
Jednym z najczęstszych powodów wczesnego porzucenia jest źle wybrany schematy kolorów, które zmniejszają czytelność treści.
Według statystyk WHO na całym świecie jest około 285 milionów osób niedowidzących, z których wiele jest częściowo lub całkowicie niewidomych na kolor. Osoby niepełnosprawne wizualnie widzą kolory inaczej unikanie niskiego kontrastu kolorów w naszych projektach jest nieuniknione, jeśli chcemy zapewnić naszym klientom dostępną i przyjazną dla użytkownika stronę internetową.
Standardy WWW dla kontrastu kolorów
Współczynnik kontrastu kolorów mierzy różnicę kontrastu między dwoma kolorami. Im wyższa wartość, tym łatwiej jest odróżnić obiekt (tekst, obraz, grafikę) na pierwszym planie od tła.
Kolory mogą kontrastować na wiele różnych sposobów, np. W odcień, wartość i nasycenie. Współczynnik kontrastu kolorów jest obliczany za pomocą wzoru dostarczonego przez W3C, główną międzynarodową organizację normalizacyjną dla sieci World Wide Web.
Może przyjąć wartość między 1: 1 (brak kontrastu, pierwszy plan i tło mają ten sam kolor) i 21: 1 (maksymalny kontrast istnieje tylko między czernią a bielą).
Najnowsze wytyczne W3C dotyczące dostępności treści internetowych (WCAG) 2.0 dostarczają twórcom stron internetowych i twórcom treści testy porównawcze dla minimalnego poziomu (poziom AA) i ulepszonej (poziom AAA) wartości akceptowalnego współczynnika kontrastu kolorów.
Poziom AA wymaga przynajmniej Stosunek 4,5: 1 dla zwykłego tekstu, i 3: 1 dla dużego tekstu. Znacznie łatwiej jest odczytać duży tekst, jak napisy, dlatego wymaga mniejszego kontrastu kolorów.
Jeśli chcesz osiągnąć poziom AAA, który jest podwyższonym poziomem, musisz zaprojektować swój schemat kolorów z większą starannością, ponieważ wymaga to co najmniej Współczynnik kontrastu 7: 1 dla normalnego tekstu, i 4,5: 1 dla dużych. Jeśli tekst jest częścią logo lub nazwy marki, nie ma wymogu minimalnego kontrastu kolorów na żadnym poziomie WCAG.
Możemy zadzwonić tylko na stronę dostępną wizualnie, jeśli współczynnik kontrastu kolorów między każdym obiektem pierwszego planu a jego tłem osiąga co najmniej poziom AA.
Zalety wysokiego współczynnika kontrastu kolorów
Zapewniając lepszą czytelność, nie tylko angażujesz użytkowników niedowidzących, ale także ludzie, którzy czytają twoje treści na małych ekranach na przykład na smartfonie lub smartwatchu złe warunki oświetleniowe, i na niższej jakości monitory.
Ludzie czytają także szybciej, gdy występuje większy kontrast między tekstem a tłem, więc najprawdopodobniej zajmie im to więcej czasu, aby znudzić się treścią strony.
Jeśli obawiasz się, że zastosowanie wyższego współczynnika kontrastu będzie miało negatywny wpływ na estetykę twojego projektu, musisz sprawdzić projekt internetowy Contrast Rebellion, który udowadnia, w rzeczywistych przykładach, że przestrzeganie zasad wysokiego współczynnika kontrastu może nadal wynikać w atrakcyjnych i fajnych wzorach.
Aplikacje do sprawdzania kontrastu kolorów
W sieci istnieje wiele świetnych darmowych narzędzi, które mogą pomóc projektantom sprawdzić współczynnik kontrastu kolorystycznego ich strony internetowej.
Najprostszym sposobem testowania projektu pod kątem kontrastu kolorystycznego jest wybranie głównych kolorów w programie Photoshop lub odpowiednim rozszerzeniu przeglądarki, takim jak ten w Firefoksie, i skopiowanie wartości do jednej z poniższych aplikacji.
Najważniejszą rzeczą do zapamiętania jest to, że zawsze musisz porównaj kolor pierwszego planu, taki jak kolor tekstu, z otaczającym go obszarem (kolor tła).
1. WebAim Color Contrast Checker
WebAim (Web Accessibility In Mind) to organizacja promująca dostępność stron internetowych, która oferuje programistom prosty, ale niezawodny sprawdzacz kontrastu kolorów wśród wielu innych wspaniałych narzędzi ułatwień dostępu, takich jak Wave, ogólna aplikacja do oceny dostępności, która może Ci pomóc szybko ocenić problemy z dostępnością witryny.
Sprawdza kontrast kolorów WebAim jeśli twoje kolory przejdą testy WCAG AA i AAA, zarówno dla zwykłych, jak i dużych tekstów.
2. Sprawdź kontrast koloru snooka
Jonathan Snook, obecnie pracujący jako główny programista frontowy w Shopify, od ponad dziesięciu lat udostępnia swoje narzędzie do sprawdzania kontrastu kolorów. Aplikacja Snook pozwala na zmień wartości HSL i RGB koloru pierwszego planu i tła jeden po drugim, używając wygodne suwaki zasięgu dopóki nie osiągniesz wyniku zgodnego z benchmarkami WCAG 2.0.
CheckMyColours
CheckMyColours stworzony przez Giovanni Scala pozwala sprawdzić współczynnik kontrastu kolorów wszystkich kombinacji kolorów pierwszego planu na stronie internetowej na żywo.
Oblicza współczynnik kontrastu jasności, różnica jasności, i różnica kolorów, i zapewnia pełny raport o wynikach. Raport CheckMyColours może znacznie ułatwić zrozumienie, w jaki sposób można poprawić dostępność wizualną witryny.
Projektant schematów kolorów
Projektant schematów kolorów nie jest szczególnie narzędziem do sprawdzania kontrastu kolorów, ale narzędziem do projektowanie kompletnych schematów kolorów.
Włączamy ją do tej kolekcji, ponieważ ma funkcję, która pozwala zobaczyć, jak Twój schemat kolorów jest postrzegany przez ludzi z różnymi rodzajami niepełnosprawności wzrokowej. Możesz przetestować swoje kolory pod kątem ślepoty pełnokolorowej, protanopii, deuteranopii i wielu innych wad wzroku. Aplikacja ma nowszą wersję o nazwie Paletton, która umożliwia nawet bardziej wyrafinowaną symulację wizji (można również przetestować takie rzeczy jak kiepski wyświetlacz LED lub słaby ekran CRT).
W3C zapewnia również ogromną listę narzędzi oceny dostępności sieci, gdzie można znaleźć wiele innych narzędzi kontrastu kolorów, takich jak pomocne koło kolorów dostępności.
Wskazówki dotyczące tworzenia witryn dostępnych wizualnie
Jeśli chcesz stworzyć wizualnie dostępną stronę internetową, zawsze dobrze jest unikaj używania samego koloru do przekazywania funkcjonalności lub znaczenia. Ikony, które zmieniają kolor na podstawie ich obecnego stanu, są typowymi przykładami.
Jeśli to możliwe, zawsze zaprojektuj dodatkowe wizualne wskazówki które pomagają ludziom, którzy widzą kolory inaczej w rozumieniu funkcjonalności.
Nigdy nie zapomnij Zwróć szczególną uwagę na kontrast kolorów przycisków, linków i menu, ponieważ są to środki nawigacji w witrynie. Jeśli użytkownicy nie mogą łatwo nawigować w witrynie, szybko je stracisz. Dostępne kolory dla przycisków wezwania do działania są również kluczowe dla dobrych współczynników konwersji.
Dobrą praktyką jest przetestowanie współczynnika kontrastu koloru tak wcześnie, jak to możliwe w procesie projektowania, ponieważ trudno będzie przekonać klienta do zmiany schematu kolorystycznego strony później w procesie projektowania.
Teraz czytaj: praktyczne podejście do wyboru schematu kolorów witryny
