Projektowanie menu dostepnych dla goski ze slepota barw

18-stolikowa restauracja w Ankarze Etlik zauwazyla, ze gosc nie potrafi rozroznic dan z odznaka "nowe" — odznaka i etykieta ceny wygladaly na jego telefonie jako ten sam szary. Slepota barw dotyka okolo 4% populacji swiata: 8% mezczyzn, 0,5% kobiet.

Typy slepoty barw

Najczesciej wystepuje deuteranopia (slepota na zielony): czerwony i zielony zlewaja sie w blotnisty odcien. Protanopia i rzadka tritanopia (niebiesko-zolta) wywoluja podobne kolizje.

Przetestuj menu w Adobe Color Blind Simulator lub Coblis. W przypadku Ankary zaden klient nie odroznial "nowe" (zielony) od "popularne" (czerwony) — audyt utknal na 78/100.

Podwojne kodowanie

WCAG 2.1 kryterium 1.4.1: kolor nie moze byc jedynym nosnikiem informacji. Rozwiazanie: kazda kolorowa odznaka z sygnalem wtornym.

• Ikona: gwiazda przy "nowe", lisc przy "wegan".
• Tekst: stempel "NEW", "POP" lub "OSTRE".
• Ksztalt: pigulka vs kwadrat vs trojkat.

Kontrast

WCAG AAA wymaga 7:1; AA wymaga 4,5:1. Lighthouse generuje raport automatycznie. Po podwojnym kodowaniu wynik Ankary wzrosl do 96/100, starsi goscie pochwalili lepsza czytelnosc.

FAQ

Jak czeste? 8% mezczyzn, 0,5% kobiet.

Adobe Simulator? Photoshop View > Proof Setup > Color Blindness.

thMenu wspiera? Tak — kolor, ikona, opcjonalny tekst.

Czy to było pomocne? Udostępnij.