Renk Kontrastı ve WCAG: Erişilebilir Tasarım Rehberi

Bir arayüz ne kadar zarif görünürse görünsün, metni okunamıyorsa tasarım işini yapmıyor demektir. Renk kontrast WCAG kuralları, tam da bu noktayı ölçülebilir hale getirir: bir yazıyla arka planı arasındaki parlaklık farkını sayısal bir orana dönüştürür ve düşük görme, yaşa bağlı görme kaybı veya güneş altında ekrana bakan herkes için okunabilirliği güvence altına alır. Bu yazıda kontrast oranının ne olduğunu, hangi eşiklerin zorunlu olduğunu ve günlük tasarım akışında bunları nasıl pratikçe uygulayacağını anlatıyorum.

Kontrast oranı tam olarak nedir?

Kontrast oranı, iki rengin bağıl parlaklığı (relative luminance) arasındaki ilişkidir. WCAG bunu şu formülle tanımlar:

kontrast = (L1 + 0.05) / (L2 + 0.05)

Burada L1 daha açık rengin, L2 daha koyu rengin bağıl parlaklığıdır. Parlaklık 0 (saf siyah) ile 1 (saf beyaz) arasında değişir. Sonuç 1:1 (hiç fark yok) ile 21:1 (siyah üzerine beyaz, mümkün olan en yüksek) arasında bir değerdir. Önemli olan, bu oranın tona değil parlaklığa dayanmasıdır; yani aynı parlaklıktaki kırmızı ve yeşil göz alıcı görünse de kontrast oranları düşük olabilir.

WCAG eşikleri: 4.5:1 ve 3:1

WCAG'in (Web Content Accessibility Guidelines) iki uyum seviyesi vardır ve çoğu yasal/kurumsal gereklilik AA seviyesini hedefler:

• Normal metin — AA: en az 4.5:1 (kriter 1.4.3).
• Büyük metin — AA: en az 3:1. "Büyük" demek, en az 18pt (≈24px) ya da kalın 14pt (≈18.66px) demektir.
• Normal metin — AAA: en az 7:1 (kriter 1.4.6).
• Büyük metin — AAA: en az 4.5:1.

Mantık şu: yazı ne kadar büyük ve kalınsa, harf gövdeleri o kadar geniş olur ve daha düşük kontrastla bile okunabilir. O yüzden başlıklarda biraz daha esnek davranabilir, ama gövde metninde 4.5:1'in altına inmemelisin.

Sadece metin değil: arayüz öğeleri ve grafikler

Pek çok tasarımcının atladığı bir nokta var: kontrast yalnızca metni ilgilendirmez. WCAG 2.1 ile gelen 1.4.11 Non-text Contrast kriteri, arayüzün etkileşimli ve bilgi taşıyan parçalarını da kapsar:

• Buton kenarlıkları, form input çerçeveleri, focus halkaları;
• Onay kutusu ve radyo butonu gibi kontrollerin sınırları;
• Bir grafikte anlam taşıyan çizgiler, ikonlar, harita renkleri.

Bunların tümü, komşu renklerine karşı en az 3:1 kontrast taşımalı. Yani açık gri bir zemine, daha açık gri bir input kenarlığı koyduğunda büyük ihtimalle bu kriteri ihlal ediyorsundur. Özellikle focus göstergeleri kritiktir: klavyeyle gezen kullanıcı, o anda nerede olduğunu sadece görünür bir focus halkasıyla anlar.

Pratikte renk seçimi

Erişilebilir bir palet kurarken birkaç alışkanlık işi kökten kolaylaştırır:

• Parlaklıktan başla, tondan değil. Marka renginin tonunu koru ama gerekirse açıklığını (lightness) ayarla. HSL ya da daha iyisi OKLCH ile L değerini oynatmak, kontrastı yükseltmenin en temiz yoludur.
• Asla yalnızca renge anlam yükleme. "Yeşil = başarılı, kırmızı = hata" tek başına yetmez; renk körü kullanıcılar için ikon, etiket veya desen ekle. Bu, kriter 1.4.1'in (Use of Color) gereğidir.
• İki uçlu test et. Açık temada geçen bir renk, koyu temada başka bir arka plana oturur. Her iki temada da ölç.
• Placeholder metnine güvenme. Soluk gri placeholder'lar neredeyse her zaman 4.5:1'in altındadır; bunu kalıcı etiketin yerine kullanma.

CSS tarafında, koyu temada metni saf siyah #000 yerine hafif yumuşak bir tonla vermek hem göz yormaz hem yeterli kontrastı korur:

:root {
  --text: #1a1a1a;      /* açık tema, beyaz zeminde ~16:1 */
  --text-muted: #555;   /* hâlâ 4.5:1 üzeri */
}
[data-theme="dark"] {
  --text: #e8e8e8;      /* koyu zeminde ~13:1 */
  --text-muted: #a0a0a0;
}

Kontrastı nasıl ölçer ve test edersin?

Gözle tahmin güvenilir değil; her zaman bir araçla doğrula:

• WebAIM Contrast Checker — iki hex değeri gir, AA/AAA durumunu anında görürsün.
• Chrome/Edge DevTools — bir metni seçip color picker'ı açtığında kontrast oranını ve AA/AAA çizgilerini doğrudan gösterir.
• Lighthouse ve axe DevTools — sayfanın tamamını tarayıp kontrast hatalarını listeler; CI hattına bile bağlanabilir.
• Figma eklentileri (örneğin Contrast, Stark) — daha tasarım aşamasındayken artboard üzerinde ölçer.

İdeal akış: paleti tasarım aşamasında Figma'da doğrula, kodda axe ya da Lighthouse ile otomatik kontrol koy, böylece bir regresyon canlıya çıkmadan yakalanır.

Sık Sorulan Sorular

4.5:1 oranını her yerde tutturmak zorunda mıyım?

Gövde metni ve küçük yazılar için evet, AA uyumu istiyorsan zorunlu. İstisnalar var: tamamen dekoratif (anlam taşımayan) metinler, logolar ve devre dışı (disabled) arayüz öğeleri kontrast şartından muaftır. Büyük başlıklarda eşik 3:1'e düşer.

Koyu tema kontrastı otomatik çözer mi?

Hayır. Koyu zeminde saf beyaz metin "halo" etkisi yapıp okumayı zorlaştırabilir, soluk gri metin ise kolayca 4.5:1'in altına düşer. Koyu temayı da açık tema kadar titiz ölçmek gerekir.

WCAG sürümleri arasında kontrast kuralları değişti mi?

Temel kontrast eşikleri (4.5:1, 3:1, 7:1) WCAG 2.0'dan beri aynıdır. WCAG 2.1 metin-dışı kontrastı (1.4.11) ekledi; 2.2 ise odak görünürlüğüyle ilgili kriterleri güçlendirdi. Yani eşikler sabit, kapsam genişledi.

Arayüzün hem şık hem herkes için okunabilir olsun mu istiyorsun? Marka renklerini bozmadan WCAG uyumlu bir palet ve tasarım sistemi kurmana yardımcı olabilirim. Benimle iletişime geç, projeni birlikte değerlendirelim.