Renk Körlüğü ve Erişilebilir Tasarım

Renk körlüğü, nüfusun yaklaşık %8'ini etkileyen yaygın bir görme farklılığıdır. Web tasarımında renkleri yalnızca estetik amaçlı düşünmek, bu kullanıcıları dışlayabilir. Bu rehberde renk körlüğü türleri, erişilebilir tasarım ilkeleri, WCAG kontrast kuralları ve test araçlarını ele alıyoruz.

Renk Körlüğü Türleri

Renk körlüğü tek bir durum değildir; farklı türler farklı renk çiftlerinin ayırt edilememesine yol açar.

Protanopia ve Protanomaly

Kırmızı-yeşil renk körlüğünün kırmızı eksikliği varyantıdır. Kırmızı renkler soluk veya yeşile çalar. Özellikle kırmızı-yeşil kontrastına dayalı arayüzler (örn. hata/başarı mesajları) problem yaratır.

Deuteranopia ve Deuteranomaly

Yeşil eksikliği; yeşil tonları kırmızı veya kahverengiye benzer. En yaygın renk körlüğü türüdür. Yeşil/kırmızı trafik ışığı veya durum göstergeleri karıştırılabilir.

Tritanopia

Mavi-sarı eksikliği; nadirdir. Mavi ve sarı tonları gri veya pembe görünebilir.

Monokromasi (Tam Renk Körlüğü)

Çok nadir; tüm renkler gri tonlarında görünür. Sadece parlaklık farkına dayalı kontrast kritiktir.

Erişilebilir Tasarım İlkeleri

Renk bilgisini tek iletişim kanalı olarak kullanmayın. Renk + metin, ikon veya desen ile destekleyin.

  • Kontrast: Metin ve arka plan arasında yeterli parlaklık farkı olmalı. WCAG AA için normal metin 4.5:1, büyük metin 3:1.
  • Renk + Başka İpucu: "Yeşil = onay, kırmızı = hata" tek başına yeterli değildir. ✓ ve ✗ ikonları ekleyin.
  • Gradient Üzerinde Metin: Gradient geçişlerinde kontrast değişir; en zayıf noktada bile 4.5:1 sağlayın veya overlay kullanın.
  • Fokus Görünürlüğü: Klavye odak çerçevesi renkle birlikte outline ile belirtilmeli.

WCAG Kontrast Kuralları

WCAG 2.1, kontrast oranını (luminance ratio) hesaplayarak erişilebilirlik seviyeleri tanımlar. Kontrast ve WCAG rehberimizde detaylı hesaplama yöntemleri bulabilirsiniz.

Gradient Üzerinde Okunabilir Metin 
.hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
}

.hero h1 {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Veya yarı saydam overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
}

Test Araçları

Renk körlüğü simülasyonu ve kontrast ölçümü için çeşitli araçlar kullanılabilir.

  • Chrome DevTools: Rendering panelinde "Emulate vision deficiencies" ile protanopia, deuteranopia, tritanopia simülasyonu.
  • WebAIM Contrast Checker: İki renk girerek kontrast oranını hesaplar.
  • Color Oracle, Coblis: Masaüstü uygulamaları; ekranın tamamını renk körlüğü filtresi ile gösterir.
  • Figma Plugins: Stark, A11y gibi eklentiler kontrast ve renk körlüğü kontrolü sunar.

Palet Seçiminde Dikkat Edilecekler

Renk uyumu kuralları estetik sağlar; erişilebilirlik için ayrıca kontrast matrisi çıkarın. Ana renklerinizi seçerken hem normal görüş hem de simülasyonlarda test edin. Kırmızı-yeşil karışımından kaçının; mavi-turuncu veya mavi-sarı gibi alternatifler daha güvenlidir.

Gradient Kullanımında Öneriler

Gradient arka planlarda geçiş bölgelerinde kontrast düşebilir. Çözümler:

  1. Metni gradient dışındaki düz arka planlı alana yerleştirin.
  2. Metin alanına hafif overlay ekleyerek arka planı karartın.
  3. Text-shadow veya stroke ile metni belirginleştirin.
  4. Gradient renklerini baştan yüksek kontrast verecek şekilde seçin.

Sonuç

Erişilebilir tasarım, tüm kullanıcılar için daha iyi bir deneyim sunar. Renk körlüğü simülasyonları ile test ederek, gradient ve palet seçimlerinizi güvenli hale getirin. Palet Oluşturucu ile oluşturduğunuz paletleri kontrast araçları ile doğrulayın.

İlgili rehberler: Kontrast ve WCAG · Renk Uyumu · Responsive Renk Tasarımı · Palet Oluşturucu · Marka Renkleri