Web Sitesinde Erişilebilir Renk Nasıl Seçilir?
Marka rengi seçildi, tasarım güzel görünüyor — ama WCAG kontrast testine soktuğunuzda başarısız oluyor. Bu rehberde marka renginizi tonunu (hue) bozmadan nasıl erişilebilir hale getireceğinizi, hangi renk çiftlerinden kaçınmanız gerektiğini ve renk körlüğü olan kullanıcılar için nelere dikkat etmeniz gerektiğini adım adım anlatıyoruz.
Erişilebilir renk seçimi nasıl yapılır?
Erişilebilir renk seçimi tek bir kuraldan ibaret değil, bir süreçtir: her metin/arka plan çiftini ölçmek, geçmeyenleri düzeltmek ve son olarak renk körlüğü açısından kontrol etmek gerekir. Aşağıdaki 5 adım, bu süreci pratik bir kontrol listesine dönüştürür.
5 adımda erişilebilir renk seçme süreci
- Metin/arka plan çiftlerini listele: gövde metni, başlıklar, buton yazıları, form etiketleri, hata/başarı mesajları, ikonlar — sitenizdeki her kombinasyonu tek tek çıkarın. Genelde bir marka palet dosyasında 8-15 kritik çift bulunur.
- Her çiftin oranını ölç: her kombinasyonu kontrast hesaplayıcıya girin. Birden fazla rengi aynı anda kontrol etmek için Palet Kontrolü sekmesi, 4 rengin tüm ikili kombinasyonlarını tek bir matriste gösterir — marka renklerinizi denetlemenin en hızlı yolu budur.
- Geçmeyen çiftlerde tonu (lightness) kaydır: rengin HSL hue (ana renk tonu) değerini koruyarak yalnızca lightness değerini adım adım koyulaştırın veya açın. Bu, markanın "kimliğini" bozmadan kontrastı yükseltmenin en güvenli yoludur.
- Renk körlüğü simülasyonuyla kontrol et: seçtiğiniz renk çiftini protanopi, deuteranopi, tritanopi ve akromatopsi simülasyonunda görüntüleyin; anlamın kaybolmadığından emin olun.
- Anlamı renge bağlamama: hata/başarı/uyarı gibi durum bilgilerini yalnızca renkle değil, ikon, kalın yazı veya metin etiketiyle de destekleyin.
Marka rengim kontrastı geçmiyorsa ne yapmalıyım?
Somut bir örnek: mor marka renginiz #7C3AED (HSL: 262°, 83%, 58%) beyaz arka plan üzerinde metin olarak kullanıldığında oran yaklaşık 5,2:1'dir — AA'yı geçer ama AAA'yı (7:1) geçmez. AAA hedefliyorsanız lightness'ı düşürerek (örn. %42'ye) koyulaştırmanız gerekir; bu, rengi #5B21B6 gibi daha koyu bir mora getirir ve oranı 7:1'in üzerine çıkarır. Kontrast hesaplayıcıdaki "Gelişmiş ayarlar" bölümü, hedef seviyeyi (AA/AAA) seçip hangi rengin ayarlanacağını belirlediğinizde bu koyulaştırmayı otomatik önerir.
| Renk | HSL lightness | Beyaza karşı oran | AA normal (4,5:1) |
|---|---|---|---|
| #A855F7 | %65 | 3,42:1 | ✗ |
| #7C3AED | %58 | 5,20:1 | ✓ |
| #6D28D9 | %49 | 6,35:1 | ✓ |
| #5B21B6 | %42 | 7,84:1 | ✓ (AAA da) |
Hue (262°) ve saturation sabit tutulup yalnızca lightness kaydırılmıştır. Kaynak: KontrastHesap hesaplama motoru.
Renk körlüğü için nelere dikkat etmeliyim?
Renk körlüğünün dört yaygın tipi vardır ve her biri farklı renk çiftlerini etkiler:
- Protanopi / deuteranopi (kırmızı-yeşil): en yaygın tip. Kırmızı ve yeşil birbirine benzer, kahverengimsi bir tona dönüşür. "Hata = kırmızı, başarı = yeşil" gibi renk-tabanlı kodlamalar bu kullanıcılar için işe yaramaz.
- Tritanopi (mavi-sarı): daha nadir görülür. Mavi ve yeşil, sarı ve pembe birbirine karışabilir.
- Akromatopsi (tam renk körlüğü): çok nadirdir; kullanıcı yalnızca gri tonları görür. Bu durumda parlaklık (luminance) farkı tek ayırt edici sinyaldir — bu yüzden kontrast oranı akromatopsi için de kritiktir.
Kontrast hesaplayıcıdaki renk körlüğü simülasyonu, seçtiğiniz renk çiftinin dört görme tipinde nasıl algılandığını yan yana gösterir; bu, tasarımınızı yayınlamadan önce ücretsiz bir "gerçeklik kontrolü" sağlar.
Renklerinizi tek seferde test edin
Palet Kontrolü sekmesiyle 4 marka renginizin tüm ikili kombinasyonlarını bir matriste görün; zayıf çiftleri anında tespit edin.
Palet Kontrolünü Aç →Kaçınılması gereken yaygın hatalar
Erişilebilir renk seçiminde en sık karşılaşılan tuzaklar şunlardır:
- Açık gri metin, açık arka plan üzerinde: #999999 gibi orta-açık griler, beyaz üzerinde genellikle 3:1'in bile altına düşer — "zarif" görünse de okunamaz.
- Sadece placeholder metniyle etiketleme: form alanlarında etiketi kaldırıp yalnızca soluk placeholder bırakmak hem kontrast hem kullanılabilirlik sorunu yaratır.
- Buton kenarlığını unutmak: düz renkli bir buton, arka planla yeterince kontrast oluşturmuyorsa (özellikle "ghost" / outline butonlarda) UI bileşeni kriterinin (3:1) ayrıca test edilmesi gerekir.
- Hover/focus durumunu test etmemek: normal durumda geçen bir renk çifti, hover'da daha açık bir tona döndüğünde kontrastı kaybedebilir.
- Karanlık mod için ayrı test yapmamak: aynı marka renginin karanlık arka plan üzerindeki kontrastı, açık moddakinden tamamen farklıdır ve ayrıca ölçülmelidir.