Kontrast Oranı nedir?

Tanım

Kontrast oranı, dijital ekranda bir ön plan öğesi (metin, ikon veya grafik) ile arka plan rengi arasındaki algılanan parlaklık farkını matematiksel olarak ölçen bir değerdir. 1:1 (kontrast yok) ile 21:1 (saf siyah-beyaz gibi maksimum kontrast) aralığında ifade edilir ve içeriğin okunabilirliği için kritik öneme sahiptir.

Detaylı Açıklama

Açık gri bir arka plan üzerine yazılmış açık gri metni okumaya çalıştığınızı düşünün. Bu durum, düşük kontrast oranının yarattığı erişilebilirlik sorunlarının en çarpıcı örneğidir.

Kimler Etkilenir?

• Görme engelliler (düşük görüşlü kullanıcılar)
• Renk körleri (özellikle kırmızı-yeşil renk körlüğü olanlar)
• Disleksik bireyler (düşük kontrast metinlerde "kelime kayması" yaşayabilir)
• Yaşlı kullanıcılar (göz merceğinin sararmasından etkilenenler)
• Standart kullanıcılar bile güneşli ortamlarda veya düşük kaliteli ekranlarda zorlanır

WCAG Standartları

• Minimum: 4.5:1 (normal metin) / 3:1 (büyük metin)
• Yüksek Erişilebilirlik: 7:1 (AA standardı)
• En İyi Uygulama: 21:1 (AAA standardı, siyah-beyaz gibi)

Pratik Çözümler

1. Otomatik Kontrol Araçları
   • WebAIM Contrast Checker
   • Chrome Lighthouse
   • Sketch/Figmacontrast eklentileri
2. Renk Seçimi İpuçları
   • Koyu arka plan + açık metin kombinasyonları
   • Mavi-sarı gibi renk körlüğüne duyarlı kombinasyonlardan kaçının
   • Gradyan arka planlarda metin alanlarına opak katman ekleyin
3. Özel Durumlar
   • Logolar ve dekoratif öğeler kontrast kurallarından muaftır
   • Mouse hover/focus durumlarında kontrastı artırın

Örnek Problem & Çözüm:
✖ Sorunlu: #888888 (gri) metin + #FFFFFF (beyaz) arka plan = 3.1:1 (WCAG altı)
✔ Çözüm: #767676 (koyu gri) metin + #FFFFFF = 4.54:1 (WCAG uyumlu)

💡 Bonus Bilgi: IOS/Android'de sistem genelinde kontrast ayarları açık olan kullanıcılar için prefers-contrast media query'sini kullanabilirsiniz.

Sonuç:
Doğru kontrast oranı, erişilebilirliğin temel taşıdır. Basit bir renk değişikliğiyle milyonlarca kullanıcının web deneyimini iyileştirebilirsiniz!