Shopify mağazaları için erişilebilir renk paleti: kontrast kontrol

Avrupa'daki müşteriler için Shopify mağazası yönetiyorsan, muhtemelen e-postalarında "Mağazamız erişilebilirlik yasasına uygun mu?" sorusunu görüyorsün. Renk paleti tek başına bu soruyu yanıtlamaz ama kontrast, erişilebilirlik sorunlarının en görünen ve en ucuz çözülenlerinden biri. Bir kez tasarım token seviyesinde düzelttiğinde, bütün sayfalar otomatik olarak o düzeltmeyi miras alır.

Mohamed Nadjib'in hazırladığı kit tam da bu ihtiyaç için: açık ve koyu tema olmak üzere iki erişilebilir renk paleti, her bir renk çifti zaten ölçülmüş, JSON token, CSS değişkenleri, Tailwind yapılandırması ve kendi test sayfası olarak sunuluyor.

WCAG 2.x Level AA kurallarına göre normal metin en az 4.5:1 kontrast oranına ihtiyaç duyuyor. Büyük metinler (24px normal veya yaklaşık 18.66px kalın) için oran 3:1 yeterli. Başlık, buton, form alanları gibi UI elemanları da aynı kurallara tabi. Sorun şu ki, renkler tasarımda güzel görünse de kontrast ölçüldüğünde sıkça başarısız oluyor.

Kiti kullanmak basit: JSON tokenlerini Shopify tema dosyalarına kopyala, CSS değişkenlerini tema.liquid'e ekle ya da Tailwind config'ini güncelle. Test sayfası ile kendi paletini de kontrol edebilirsin. Yazıda verilen 20 satırlık script ile herhangi bir renk kombinasyonunun kontrast oranını hızlıca hesaplayabilirsin.

Erişilebilirlik sadece yasal uyum değil; daha geniş bir kitle sitenin içeriğine erişebiliyor demek. Kontrast sorunları görme zorlukları olan kullanıcıları doğrudan etkiliyor. Paleti bir kez düzeltmek, sonra tüm sayfaları baştan tasarlamaktan çok daha pratik.