WCAG 2.1. – kryterium 1.4.3 – Minimalny kontrast (poziom AA)
- Przejdź do artykułów z tagiem accessibility
- Przejdź do artykułów z tagiem akademiaWCAG
- Przejdź do artykułów z tagiem dostępność cyfrowa
- Przejdź do artykułów z tagiem WCAG 2.1
- Przejdź do artykułów z tagiem Web Content Accessibility Guidelines
Treść artykułu
Kontrast to właśnie kolejne kryterium, które dziś omawiamy!
Zasada ta dotyczy kontrastu treści umieszczonych na stronach internetowych (w przeciwieństwie do kryterium 1.4.11 odnoszącego się do kontrastu elementów nietekstowych). Ma ono na celu zapewnienie, że osoby z dysfunkcjami wzroku lub innymi niepełnosprawnościami, które wpływają na percepcję kolorów, będą w stanie czytać i odczytywać tekst na stronach internetowych.
Kryterium 1.4.3 WCAG zaleca także, aby kontrast tekstu był dostosowany do ustawień Użytkownika. Oznacza to, że jeśli dostosuje on ustawienia dotyczące kontrastu na swoim urządzeniu, strona internetowa powinna reagować na te zmiany i zapewnić odpowiednią czytelność tekstu.
A teraz konkrety. Jaki współczynnik kontrastu jest wyznaczony jako minimalny?
- Dla tekstu o standardowej wielkości (do 18,5 piksela lub równoważnego rozmiaru):
- Minimalny kontrast dla tekstu normalnego: 4,5:1.
- Minimalny kontrast dla tekstu pogrubionego lub większego: 3:1 (ze względu na większą czytelność fontu).
- Dla większego tekstu (ponad 18,5 piksela lub równoważnego rozmiaru):
- Minimalny kontrast dla tekstu normalnego lub pogrubionego: 3:1.
Czy są jakieś wyjątki? Tak. Teksty typowo dekoracyjne, nieaktywne elementu interfejsu użytkownika, czy też loga, nie muszą spełniać kryterium kontrastu. Czy będzie lepiej, jeśli je spełnią? Oczywiście 🙂
A teraz jeszcze ciekawostka o kolorze pomarańczy (temat ma być zaadresowany w WCAG 3.0).
Autor przedstawia w nim dwa przyciski – jeden pomarańczowy z czarnym fontem (spełniający kontrast) oraz drugi – pomarańczowy z białym fontem (nieposiadający kontrastu). Który wydaje się być bardziej przyjazny dla oka? O dziwo, według badań i naszych własnych spostrzeżeń, ten drugi. Poczytajcie. 😉

Małgorzata Szymczak
Accessibility Specialist & Junior Frontend Developer
Polecane artykuły
-
10.08.2022Dostępność cyfrowa
SVG… SVG… czym jest SVG
SVG (ang. Scalable Vector Graphics) – to format wektorowego pliku graficznego, który w odróżnieniu do rastrowych jpg, png, gif, składa…
-
30.11.2022Badania
Jak zrobić audyt UX. Część 1 – Teoria, odrobina autokrytyki i parę praktycznych porad…
Dzisiaj wrzucamy na blog temat audytów użyteczności! Pomysł na ten wpis narodził się przy okazji audytu UX naszego bloga. Postanowiliśmy…
-
23.12.2022Dostępność cyfrowa
Dostępność cyfrowa – skąd czerpać wiedzę. Część 1
Dostępność, WCAG 2.1, inkluzywność, projektowanie uniwersalne: niektórzy mówią, że to tożsame pojęcia, ale mylą się… W takim razie skąd można…