W tym artykule
Czym jest kontrast kolorow i dlaczego ma znaczenie
Kontrast kolorow to różnica w jasności między dwoma kolorami, zwykłe tekstem na pierwszym planie a jego tlem. Wystarczający kontrast zapewnia, ze tekst jest czytelny dla wszystkich, w tym osob slabowidzacych lub z daltonizmem. Slaby kontrast sprawia, ze treści sa trudne lub niemożliwe do odczytania, wykluczając miliony użytkowników.
Wytyczne dotyczące dostępności treści internetowych (WCAG) definiuja minimalne współczynniki kontrastu zapewniające czytelność dla szerokiego zakresu zdolnosci wzrokowych. Spełnienie tych standardow to nie tylko dobra praktyka — to wymog prawny w wielu jurysdykcjach na mocy przepisow o dostępności, takich jak ADA, EAA i EN 301 549.
Jak działają współczynniki kontrastu WCAG
WCAG wykorzystuje wzgledna jasność do obliczania współczynników kontrastu między dwoma kolorami. Formuła daje współczynnik od 1:1 (brak kontrastu, identyczne kolory) do 21:1 (maksymalny kontrast, czarny na białym).
- Wzgledna jasność jest obliczana z zlinearyzowanych wartości sRGB według wzoru: L = 0.2126R + 0.7152G + 0.0722B
- Współczynnik kontrastu to (L1 + 0.05) / (L2 + 0.05), gdzie L1 to jasniejszy kolor, a L2 ciemniejszy
- Tekst normalny (poniżej 18pt lub 14pt pogrubiony) wymaga co najmniej 4.5:1 dla AA i 7:1 dla AAA
Wypróbuj za darmo — bez rejestracji
Sprawdź kontrast →Poziomy zgodności WCAG AA vs AAA
WCAG definiuje dwa poziomy zgodności dla kontrastu kolorow. Poziom AA jest minimalnym standardem wymaganym przez większość przepisow o dostępności, podczas gdy AAA zapewnia ulepszona dostępność dla użytkowników z powazniejszymi wadami wzroku.
- AA tekst normalny — wymaga współczynnika kontrastu co najmniej 4.5:1 dla tekstu poniżej 18pt (lub 14pt pogrubiony)
- AA duzy tekst — wymaga co najmniej 3:1 dla tekstu 18pt i większego (lub 14pt pogrubiony i większy)
- AAA tekst normalny — wymaga co najmniej 7:1 dla najwyższego poziomu czytelności
- AAA duzy tekst — wymaga co najmniej 4.5:1 dla dużego tekstu na ulepszonym poziomie
- Kontrast nietekstowy — komponenty interfejsu i obiekty graficzne wymagaja co najmniej 3:1 wobec sasiadujacych kolorow
Wskazowki dotyczące dostępnego designu kolorow
Projektowanie z myślą o dostępności nie oznacza poswiecania estetyki. Te praktyczne wskazowki pomoga tworzyc piękne projekty, z ktorych moze korzystac każdy.
- Zacznij od kontrastu — najpierw wybierz kolory tekstu i tla, a potem buduj palete wokół nich
- Nigdy nie polegaj tylko na kolorze — używaj ikon, wzorow lub etykiet obok koloru do przekazywania znaczenia
- Testuj z prawdziwymi treściami — tekst zastępczy moze wyglądać dobrze, ale prawdziwe treści moga ujawnic problemy
- Rozważ tryb ciemny osobno — kolory, ktore przechodza w trybie jasnym, moga nie przejść w trybie ciemnym i odwrotnie
- Używaj narzędzia do sprawdzania kontrastu — zautomatyzowane narzędzia wykrywaja problemy szybciej niz reczna inspekcja
Często zadawane pytania
Jaki jest minimalny współczynnik kontrastu dla zgodności WCAG?
Dla WCAG 2.1 Poziomu AA tekst normalny wymaga współczynnika kontrastu co najmniej 4.5:1, a duzy tekst (18pt lub 14pt pogrubiony) wymaga co najmniej 3:1. Poziom AAA podnosi te wymagania odpowiednio do 7:1 i 4.5:1. Większość przepisow o dostępności odwołuje sie do poziomu AA jako minimalnego standardu.
Czy kontrast kolorow ma znaczenie dla obrazow i ikon?
Tak. Kryterium sukcesu WCAG 2.1 1.4.11 wymaga, aby komponenty interfejsu i obiekty graficzne mialy co najmniej 3:1 kontrastu z sasiadujacymi kolorami. Obejmuje to ikony, obramowania pol, wskaźniki fokusu i elementy wykresow. Obrazy dekoracyjne sa zwolnione.
Jak poprawic niski kontrast bez zmiany kolorow marki?
Możesz dostosowac jasność kolorow marki, zachowując ten sam odcien i nasycenie. Na przykład, przyciemnij jasnoniebieski dla tekstu lub rozjasij ciemne tlo. Innym podejściem jest użycie kolorow marki dla dużych elementow dekoracyjnych i neutralnych kolorow o wysokim kontraście dla tekstu głównego.