Renk Kontrastı ve WCAG Uyumluluğu Rehberi

Renk kontrastı, web erişilebilirliğinin en temel bileşenlerinden biridir. Düşük kontrastlı metin, yalnızca görme engelli kullanıcılar için değil, güneş altında telefon kullanan herkes için okunması zor bir deneyim yaratır. WCAG (Web Content Accessibility Guidelines) standartları, metin ve arka plan arasındaki minimum kontrast oranlarını belirleyerek web'in herkes tarafından kullanılabilir olmasını hedefler.

Kontrast Oranı Nedir?

Kontrast oranı, iki rengin göreli parlaklıkları arasındaki farkı ölçen bir değerdir. Oran 1:1 (sıfır kontrast, aynı renk) ile 21:1 (maksimum kontrast, siyah ve beyaz) arasında değişir. Hesaplama, renklerin relative luminance (göreli parlaklık) değerlerine dayanır:

Kontrast Oranı = (L1 + 0.05) / (L2 + 0.05)

L1: Daha açık rengin göreli parlaklığı
L2: Daha koyu rengin göreli parlaklığı

WCAG Kontrast Gereksinimleri

WCAG AA Seviyesi (Minimum)

Çoğu web sitesinin hedeflemesi gereken standarttır:

• Normal metin (18px altı): En az 4.5:1 kontrast oranı
• Büyük metin (18px üstü veya 14px kalın): En az 3:1 kontrast oranı
• UI bileşenleri ve grafikler: En az 3:1 kontrast oranı

WCAG AAA Seviyesi (Gelişmiş)

Daha yüksek erişilebilirlik hedefleyen projeler için:

• Normal metin: En az 7:1 kontrast oranı
• Büyük metin: En az 4.5:1 kontrast oranı

AAA seviyesi tüm durumlarda uygulanması zor olabilir, ancak metin ağırlıklı sayfalarda (blog, dokümantasyon) hedeflenmesi önerilir.

Büyük ve Normal Metin Ayrımı

WCAG'da "büyük metin" tanımı:

• Normal ağırlıkta 18pt (24px) veya üzeri
• Kalın (bold) ağırlıkta 14pt (yaklaşık 18.66px) veya üzeri

Büyük metin daha kolay okunduğu için daha düşük kontrast oranı yeterli kabul edilir.

Kontrast Nasıl Kontrol Edilir?

Tarayıcı geliştirici araçları kontrast kontrolü için yerleşik destek sunar:

• Chrome DevTools: Bir elemana tıklayın → Styles panelinde renk karesine tıklayın → Kontrast oranı ve WCAG uyumu görüntülenir
• Firefox: Accessibility sekmesinde kontrast sorunları otomatik tespit edilir
• Lighthouse: Erişilebilirlik denetiminde düşük kontrastlı elemanlar listelenir

Düşük Kontrastı Düzeltme Yöntemleri

Kontrast oranı yetersiz olduğunda şu stratejileri uygulayabilirsiniz:

1. Metin Rengini Koyulaştırma

/* Yetersiz: 2.7:1 */
.metin { color: #999; background: #fff; }

/* Yeterli: 4.6:1 */
.metin { color: #767676; background: #fff; }

/* İyi: 7.1:1 */
.metin { color: #595959; background: #fff; }

2. Arka Plan Rengini Ayarlama

/* Yetersiz */
.bilgi-kutusu { color: #0066ff; background: #e8f0fe; }

/* İyileştirilmiş */
.bilgi-kutusu { color: #0052cc; background: #f0f5ff; }

3. Font Boyutunu Artırma

Metin boyutunu büyütmek, gerekli minimum kontrast oranını 4.5:1'den 3:1'e düşürür. Ancak bu, asıl sorunun çözümü değil, geçici bir çaredir.

4. Metin Gölgesi veya Arka Plan Katmanı

Görsel üzerine metin yerleştirirken kontrast sağlamak zordur. Yarı saydam bir katman ekleyin:

.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.7)
  );
}

.hero-text {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

Karanlık Mod ve Kontrast

Karanlık mod tasarımında kontrast yönetimi farklı zorluklar içerir:

• Saf beyaz (#fff) kullanmayın: Koyu arka plan üzerinde saf beyaz metin göz yorar. #e0e0e0 veya #d4d4d4 gibi hafif gri tonlar tercih edin
• Saf siyah (#000) arka plan kullanmayın: #121212 veya #1a1a1a gibi koyu gri tonlar daha rahat bir deneyim sunar
• Renk doygunluğunu azaltın: Parlak, doygun renkler koyu arka planda göz yorar. Karanlık modda renklerin doygunluğunu düşürün
• Kontrast oranını kontrol edin: Koyu arka plan üzerinde de WCAG kriterlerini karşıladığından emin olun

/* Açık mod */
:root {
  --text: #1a1a1a;
  --bg: #ffffff;
  --accent: #0066ff;
}

/* Karanlık mod */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e0e0e0;
    --bg: #1a1a1a;
    --accent: #66aaff; /* Daha açık, daha az doygun */
  }
}