WCAG (Web Content Accessibility Guidelines), web içeriğinin görme engelli veya renk körü kullanıcılar dahil herkes tarafından erişilebilir olmasını hedefler. Kontrast oranı, metin ile arka plan arasındaki parlaklık farkının ölçüsüdür. Yetersiz kontrast okunabilirliği düşürür.
Kontrast oranı 1:1 ile 21:1 arasında değişir. Beyaz üzerinde siyah 21:1'e yakındır. WCAG 2.1 AA standardı normal metin için en az 4.5:1, büyük metin (18pt+ veya 14pt bold) için 3:1 önerir. AAA seviyesi daha yüksek oranlar gerektirir.
WCAG Kontrast Seviyeleri
AA (Temel): Normal metin 4.5:1, büyük metin 3:1. Grafik ve büyük UI bileşenleri 3:1. Çoğu kurumsal site bu seviyeyi hedefler.
AAA (Gelişmiş): Normal metin 7:1, büyük metin 4.5:1. Eğitim ve sağlık sitelerinde sıkça tercih edilir.
Kontrast Nasıl Hesaplanır?
Formül (L1 + 0.05) / (L2 + 0.05) şeklindedir; L1 açık rengin, L2 koyu rengin göreli parlaklığıdır. Her renk sRGB alanında luma değerine dönüştürülür. Manuel hesaplamak yerine WebAIM Contrast Checker veya benzeri araçlar kullanın. Araçlarımızda kontrast tahmini de sunulur.
/* 4.5:1 üzeri - AA uyumlu */ color: #1a1a1a; background: #ffffff; /* Koyu arka plan */ color: #ffffff; background: #2d3748;
Gradient Üzerinde Metin
Gradient arka planlarda kontrast değişken olabilir. Geçiş bölgelerinde metin okunamaz hale gelebilir. Çözüm: metni sabit renkli bir overlay üzerine koymak veya text-shadow ile gölge eklemek. Mümkünse gradient sadece dekoratif alanlarda kullanın.
Renk Körü Düşünceleri
Sadece renge dayalı bilgi iletmeyin. Kırmızı/yeşil gibi kombinasyonlar protanopia/deuteranopia'da ayırt edilemez. İkon, metin veya desen ile destekleyin.
Pratik İpuçları
- Ana metin için siyaha yakın (#333, #1a1a1a) ve beyaz veya açık gri arka plan kullanın.
- Tasarım aşamasında kontrast kontrolü yapın.
- Dark mode'da da kontrast oranlarını doğrulayın.
- Placeholder metinler en az 3:1 olmalı.
İlgili rehberler: Palette ve Tints · Renk Uyumu · Araç · Marka Renkleri