Palety kolorów o wysokim kontraście ze sprawdzonymi wskaźnikami

Palety kolorów o wysokim kontraście

Palety kolorów o wysokim kontraście ze wskaźnikami WCAG | We.Inc

Pięć autorskich palet o wysokim kontraście, w których każdą parę tekstu i przycisku sprawdzono pod kątem WCAG 2.2, oraz tester do zmiany kolorów i kopiowania CSS.

Paleta o wysokim kontraście to zestaw kolorów marki, w którym tekst pozostaje łatwy do przeczytania na swoim tle. WCAG 2.2 mierzy to jako współczynnik od 1:1 do 21:1. Tekst główny wymaga co najmniej 4.5:1 dla poziomu AA i 7:1 dla AAA, a duży tekst 3:1 i 4.5:1. Palety poniżej wymieniają każdą parę.

Minimalne wartości kontrastu według WCAG 2.2

Większość serwisów z paletami pokazuje ładne próbki obok siebie, co nic nie mówi o tym, czy umieszczony na nich tekst da się przeczytać. Każda paleta poniżej przypisuje kolorowi zadanie (tło, tekst, tekst pomocniczy, akcent, tekst na akcencie) i sprawdza pary, które naprawdę zestawiasz na stronie.

Najczęściej zadawane pytania

Jaki współczynnik kontrastu uznaje się za wysoki kontrast?

Nie ma jednej oficjalnej granicy nazwanej wysokim kontrastem. Poziom AA WCAG wymaga 4.5:1 dla zwykłego tekstu, a poziom AAA 7:1, więc wielu projektantów traktuje 7:1 dla tekstu głównego jako cel wysokiego kontrastu.

Jaki rozmiar uznaje się za duży tekst?

WCAG traktuje jako duży tekst o rozmiarze co najmniej 18 punktów lub 14 punktów pogrubiony. Objaśnienie W3C przelicza to na mniej więcej 24px i 18.5px w pikselach CSS.

Czy mogę zaokrąglić 4.47 w górę do 4.5?

Nie. W3C mówi, że współczynnika się nie zaokrągla, więc para o wartości 4.499:1 nie spełnia 4.5:1. Z tego powodu tester obcina wartości w dół.

Czy przyciski i ikony też potrzebują kontrastu?

Tak. Kryterium sukcesu 1.4.11 WCAG 2.2 wymaga co najmniej 3:1 między elementami kontrolek i znaczącą grafiką a sąsiadującymi kolorami.

Czy moje logo musi przejść test?

Nie. Tekst będący częścią logo lub nazwy marki nie ma wymagań kontrastu według 1.4.3. Cała reszta strony wokół niego nadal je ma.

Dlaczego pięć ról, a nie pięć próbek

Dopasowanie palety do Twojej marki

Pięć palet i ich współczynniki

Współczynniki są liczone wzorem WCAG 2.2 i pokazane z obcięciem do dwóch miejsc po przecinku.

Każda sprawdzona para w pięciu paletach

Użyj palety w swoim CSS

Atrament na papierze jako niestandardowe właściwości CSS

Nazywaj zmienne według roli, a nie koloru, aby późniejsza zamiana palety wymagała jednej zmiany na linię.

Wzór kontrastu w JavaScript

To samo obliczenie, które wykonuje tester, napisane na podstawie definicji luminancji względnej W3C.

Tester palet

Wybierz paletę, a potem zmień dowolny kolor. Każda para jest sprawdzana ponownie w trakcie pisania.

Paleta początkowa

Atrament na papierze

Nocna zmiana

Leśna księga

Portowy błękit

Ciepła glina

Tło

Tekst główny

Tekst pomocniczy

Tekst na akcencie

Kontrast każdej pary w tej palecie

{a} na {b}

Zaliczone

Niezaliczone

To nie jest kolor hex

Godziny otwarcia

Otwarte od wtorku do soboty, od 9 do 5. Do południa zapraszamy bez umawiania.

Zamknięte w dni ustawowo wolne od pracy.

Umów wizytę

Kopiuj zmienne CSS

Skopiowano.

Kopiowanie nie powiodło się. Zaznacz kod i skopiuj go ręcznie.

Wszystkie pary ({n}) osiągają AA dla tekstu głównego.

{k} z {n} par nie osiąga 4.5:1 dla tekstu głównego.

Wszystko jest liczone w Twojej przeglądarce.

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

Produkt

Dla kogo

Funkcje

Zasoby

Firma

Mapa strony