dawnshopifywcagmotywdostepnosc

Dawn a WCAG 2.2: co naprawdę wymaga poprawki, zmierzone na wersji 16.0.0

Domyślny Dawn przechodzi testy kontrastu, wbrew temu, co piszą poradniki. Prawdziwe ryzyko zaczyna się, gdy zmienisz kolory: siedem wartości pochodnych jedzie na Twoim kolorze tekstu i psuje się po cichu. Z wyliczeniami.

Autor: Radoslaw Fedorczuk4 min czytania

Poradniki o dostępności Dawn zwykle zaczynają od listy naruszeń, które motyw rzekomo ma zaraz po instalacji. Sprawdziłem je przy źródle, na wersji 16.0.0 z 10 sierpnia 2026 r., i większość z nich nie istnieje. To dobra wiadomość, ale prowadzi do gorszej: prawdziwe ryzyko leży gdzie indziej i nie widać go w żadnym prostym teście.

Co domyślny Dawn robi dobrze

Domyślny schemat kolorów Dawn to tekst #121212 na tle #FFFFFF (config/settings_data.json, preset "Dawn", scheme-1). Przy takich wartościach:

Element Wartość w CSS Kontrast na białym Próg Wynik
tekst podstawowy #121212 18,73:1 4,5:1 przechodzi
tekst przygaszony alfa 0,75 8,45:1 4,5:1 przechodzi
obramowania pól alfa 0,55 4,12:1 3:1 przechodzi
obrys fokusu alfa 0,5 3,54:1 3:1 przechodzi

Pole newslettera w stopce (sections/footer.liquid) ma prawidłową etykietę powiązaną programowo:

<label class="field__label" for="NewsletterForm--{{ section.id }}">
  {{ 'newsletter.label' | t }}
</label>

Placeholder też tam jest, ale obok etykiety, a nie zamiast niej. Kryterium WCAG 3.3.2 jest spełnione.

Innymi słowy: jeżeli zainstalujesz Dawn i niczego nie ruszysz, w tych czterech miejscach jesteś w porządku. Zmienna --color-foreground-secondary, która krąży po poradnikach jako źródło problemu, w assets/base.css w ogóle nie występuje.

Gdzie naprawdę zaczyna się problem

Dawn nie zapisuje kolorów pochodnych jako osobnych wartości. Zapisuje je jako alfę na Twoim kolorze tekstu: rgba(var(--color-foreground), 0.75) i tak dalej. W assets/base.css samych wystąpień --color-foreground z alfą jest kilkadziesiąt, w ośmiu różnych poziomach.

To znaczy, że w chwili, gdy w edytorze motywu zmienisz kolor tekstu na łagodniejszy, wszystkie te wartości przesuwają się razem z nim. I nie przesuwają się liniowo.

Twój kolor tekstu Tekst podstawowy Tekst przygaszony (0,75) Obramowania (0,55) Fokus (0,5)
#121212 (domyślny) 18,73 8,45 4,12 3,54
#333333 12,63 5,74 3,23 2,85
#595959 7,00 3,84 2,49 2,27
#767676 4,54 2,88 2,07 1,94
#808080 3,95 2,61 1,96 1,82

Pogrubione wartości są poniżej progu: 4,5:1 dla tekstu (WCAG 1.4.3), 3:1 dla elementów nietekstowych i wskaźnika fokusu (WCAG 1.4.11 i 2.4.11).

Zwróć uwagę na wiersz #767676. Tekst podstawowy daje 4,54:1, czyli przechodzi. Sprawdzarka kontrastu, do której wkleisz swój kolor tekstu i tło, powie "OK". A jednocześnie tekst przygaszony, obramowania pól i obrys fokusu są już poniżej progu. Kupiec dostaje zielone światło na jedną wartość i nie dowiaduje się o trzech kolejnych, które właśnie zepsuł.

Już przy #333333, kolorze, który wielu ludzi uzna za "prawie czarny", wskaźnik fokusu spada do 2,85:1 i nie spełnia WCAG 2.4.11.

Co z tego wynika praktycznie

  1. Nie sprawdzaj koloru, sprawdzaj stronę. Sprawdzarka kontrastu na dwóch wartościach hex nie widzi wartości pochodnych. Zobaczysz je tylko badając wyrenderowaną stronę.
  2. Zmiana palety to zmiana dostępności. Każde przestawienie schematu kolorów w edytorze motywu jest zmianą, po której warto przeskanować sklep ponownie.
  3. Fokus psuje się pierwszy. Ma najniższy zapas (0,5 alfy na progu 3:1), więc jako pierwszy wypada z normy, a jednocześnie jest tym, czego użytkownik klawiatury potrzebuje najbardziej.

Ostatni punkt jest wart osobnej uwagi, bo WCAG 2.4.11 Focus Appearance to kryterium nowe w WCAG 2.2 i wielu poradników jeszcze go nie uwzględnia.

Czego ten artykuł nie twierdzi

Nie twierdzę, że Dawn jest dostępny. Twierdzę, że w czterech konkretnych miejscach, które sprawdziłem przy źródle, jego domyślne wartości przechodzą, a błędy w poradnikach dotyczą właśnie tych miejsc. Dostępność całego sklepu zależy od Twoich treści, zainstalowanych aplikacji i zmian w motywie, a tego żaden artykuł nie zmierzy za Ciebie.

Nie podaję też liczby "średnio X naruszeń na stronę produktu". Taka liczba zależy od zawartości sklepu, a nie od motywu, więc podana jako właściwość motywu byłaby zmyślona.

Jak to sprawdzić u siebie

Wartości z tabel powyżej odtworzysz w dwie minuty:

  1. W edytorze motywu odczytaj swój kolor tekstu i tła (Ustawienia > Kolory).
  2. Policz kontrast dla pełnej wartości i dla 0,75, 0,55 oraz 0,5 alfy na tym samym tle.
  3. Porównaj z progami 4,5:1 i 3:1.

Automatycznie robi to skan AccessifyAI, który bada wyrenderowaną stronę i podaje faktyczne pary kolorów, a nie deklarowane ustawienia. Wpis w Shopify App Store.

Źródła

  • Shopify Dawn, wersja 16.0.0 (wydana 10 sierpnia 2026 r.): github.com/Shopify/dawn
  • assets/base.css i config/settings_data.json z tagu v16.0.0
  • WCAG 2.2, kryteria 1.4.3, 1.4.11, 2.4.11, 3.3.2
Udostępnij:

Otrzymuj porady o dostępności pocztą

Jedna krótka wiadomość miesięcznie z nowymi poradnikami i aktualizacjami dotyczącymi dostępności w Shopify. Bez spamu, w każdej chwili możesz zrezygnować.

Dawn a WCAG 2.2: co naprawdę wymaga poprawki, zmierzone na wersji 16.0.0 | AccessifyAI