Güzel Görünmek Yetmez: Erişilebilir Renk Sistemleri Nasıl Kurulur?

Bir renk paleti sunum ekranında etkileyici görünebilir, ancak gerçek hayatta düşük parlaklıklı bir telefonda, güneş altında veya görme farklılığı olan bir kullanıcı için tamamen başka davranabilir. İyi renk sistemi “hangi renkler güzel?” sorusundan önce “hangi bilgi her koşulda anlaşılır?” sorusunu sorar.

Kontrast yalnızca siyah ve beyaz değildir

Kontrast, iki rengin parlaklık farkını ölçer. WCAG 2.2, normal metin için en az 4.5:1; büyük metin için en az 3:1 kontrast oranı önerir. Bu değerler yaratıcı özgürlüğü bitirmek için değil, metnin daha fazla kişi tarafından okunabilmesini sağlamak için vardır.

Pastel bir marka rengi küçük metinde yetersiz kalabilir ama büyük başlıkta, dekoratif yüzeyde veya koyu bir tonu ile birlikte gayet iyi çalışabilir. Çözüm sevilen rengi terk etmek değil, renge görev vermektir.

Paleti rollere bölün

• Arka plan: Ana yüzey ve ikincil yüzey tonları.
• Metin: Ana metin, yardımcı metin ve pasif bilgi.
• Vurgu: Bağlantı, seçim ve önemli eylem.
• Durum: Başarı, uyarı, hata ve bilgi.
• Sınır: Kartları ayıran çizgiler ve odak halkaları.

Bu roller tanımlandığında, tasarımcı her ekranda yeniden renk icat etmez. Koyu ve açık tema arasında geçiş de tek tek hex kodu değiştirmek yerine rollerin karşılıklarını değiştirmekle çözülür.

Yalnızca renkle anlatmayın

Formdaki hatayı sadece kırmızı çizgiyle göstermek, kırmızıyı ayırt edemeyen kullanıcı için görünmez olabilir. Rengin yanına ikon, kısa açıklama veya desen ekleyin. Grafiklerde serileri hem renk hem çizgi biçimi veya doğrudan etiketle ayırın. Başarı mesajında yalnızca yeşile güvenmeyin; “Kaydedildi” metni ve onay işareti kullanın.

Gerçek hayatta test edin

1. Paleti kontrast ölçüm aracından geçirin.
2. Ekranı gri tonlamaya alın; hiyerarşi hâlâ anlaşılıyor mu bakın.
3. Renk körlüğü simülasyonuyla durum renklerini kontrol edin.
4. Parlaklığı düşürün ve küçük bir telefonda deneyin.
5. Klavyeyle dolaşın; odak halkası her yüzeyde görünür mü kontrol edin.

Renk erişilebilir olduğunda tasarım daha az yaratıcı değil, daha net ve daha dayanıklı olur.

Marka rengini korumanın akıllı yolu

Tek bir ana renk yerine ton skalası üretin. Örneğin zümrüt yeşilinin 50’den 950’ye kadar açık ve koyu karşılıklarını hazırlayın. Küçük metinde koyu ton, büyük yüzeyde canlı ton, koyu temada daha açık ton kullanılabilir. Bu sistem, markanın rengini korurken farklı kontrast ihtiyaçlarını karşılar.

Son adım dokümantasyondur: hangi kombinasyonların uygun olduğunu tasarım dosyasında ve kod tarafında açıkça işaretleyin. Böylece erişilebilirlik son kontrolde yakalanmaya çalışan bir hata değil, tasarım sisteminin başlangıç kuralı olur.

Kaynaklar ve devam okuması

• W3C — Web Content Accessibility Guidelines 2.2