W tym artykule
Czym jest kontrast kolorow i dlaczego ma znaczenie
Kontrast kolorow to roznica w jasnosci miedzy dwoma kolorami, zwykle tekstem na pierwszym planie a jego tlem. Wystarczajacy kontrast zapewnia, ze tekst jest czytelny dla wszystkich, w tym osob slabowidzacych lub z daltonizmem. Slaby kontrast sprawia, ze tresci sa trudne lub niemozliwe do odczytania, wykluczajac miliony uzytkownikow.
Wytyczne dotyczace dostepnosci tresci internetowych (WCAG) definiuja minimalne wspolczynniki kontrastu zapewniajace czytelnosc dla szerokiego zakresu zdolnosci wzrokowych. Spelnienie tych standardow to nie tylko dobra praktyka — to wymog prawny w wielu jurysdykcjach na mocy przepisow o dostepnosci, takich jak ADA, EAA i EN 301 549.
Jak dzialaja wspolczynniki kontrastu WCAG
WCAG wykorzystuje wzgledna jasnosc do obliczania wspolczynnikow kontrastu miedzy dwoma kolorami. Formula daje wspolczynnik od 1:1 (brak kontrastu, identyczne kolory) do 21:1 (maksymalny kontrast, czarny na bialym).
- Wzgledna jasnosc jest obliczana z zlinearyzowanych wartosci sRGB wedlug wzoru: L = 0.2126R + 0.7152G + 0.0722B
- Wspolczynnik kontrastu to (L1 + 0.05) / (L2 + 0.05), gdzie L1 to jasniejszy kolor, a L2 ciemniejszy
- Tekst normalny (ponizej 18pt lub 14pt pogrubiony) wymaga co najmniej 4.5:1 dla AA i 7:1 dla AAA
Wypróbuj za darmo — bez rejestracji
Sprawdz kontrast →Poziomy zgodnosci WCAG AA vs AAA
WCAG definiuje dwa poziomy zgodnosci dla kontrastu kolorow. Poziom AA jest minimalnym standardem wymaganym przez wiekszosc przepisow o dostepnosci, podczas gdy AAA zapewnia ulepszona dostepnosc dla uzytkownikow z powazniejszymi wadami wzroku.
- AA tekst normalny — wymaga wspolczynnika kontrastu co najmniej 4.5:1 dla tekstu ponizej 18pt (lub 14pt pogrubiony)
- AA duzy tekst — wymaga co najmniej 3:1 dla tekstu 18pt i wiekszego (lub 14pt pogrubiony i wiekszy)
- AAA tekst normalny — wymaga co najmniej 7:1 dla najwyzszego poziomu czytelnosci
- AAA duzy tekst — wymaga co najmniej 4.5:1 dla duzego tekstu na ulepszonym poziomie
- Kontrast nietekstowy — komponenty interfejsu i obiekty graficzne wymagaja co najmniej 3:1 wobec sasiadujacych kolorow
Wskazowki dotyczace dostepnego designu kolorow
Projektowanie z mysla o dostepnosci nie oznacza poswiecania estetyki. Te praktyczne wskazowki pomoga tworzyc piekne projekty, z ktorych moze korzystac kazdy.
- Zacznij od kontrastu — najpierw wybierz kolory tekstu i tla, a potem buduj palete wokol nich
- Nigdy nie polegaj tylko na kolorze — uzywaj ikon, wzorow lub etykiet obok koloru do przekazywania znaczenia
- Testuj z prawdziwymi tresciami — tekst zastepczy moze wygladac dobrze, ale prawdziwe tresci moga ujawnic problemy
- Rozważ tryb ciemny osobno — kolory, ktore przechodza w trybie jasnym, moga nie przejsc w trybie ciemnym i odwrotnie
- Uzywaj narzedzia do sprawdzania kontrastu — zautomatyzowane narzedzia wykrywaja problemy szybciej niz reczna inspekcja
Czesto zadawane pytania
Jaki jest minimalny wspolczynnik kontrastu dla zgodnosci WCAG?
Dla WCAG 2.1 Poziomu AA tekst normalny wymaga wspolczynnika 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. Wiekszosc przepisow o dostepnosci odwoluje 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, wskazniki fokusu i elementy wykresow. Obrazy dekoracyjne sa zwolnione.
Jak poprawic niski kontrast bez zmiany kolorow marki?
Mozesz dostosowac jasnosc kolorow marki, zachowujac ten sam odcien i nasycenie. Na przyklad, przyciemnij jasnoniebieski dla tekstu lub rozjasij ciemne tlo. Innym podejsciem jest uzycie kolorow marki dla duzych elementow dekoracyjnych i neutralnych kolorow o wysokim kontrascie dla tekstu glownego.