Renk Kontrastı ve Okunabilirlik: WCAG Oranları Nasıl Okunur?

Güzel görünen bir renk kombinasyonu her zaman okunabilir değildir. Açık gri zemin üzerine beyaz yazı ya da koyu mavi üzerine siyah metin, tasarımcının ekranında idare edebilir; ancak güneş altında telefondan bakan ya da görme güçlüğü olan biri için metin kaybolur. Kontrast oranı, bu farkı ölçülebilir hale getirir.

Kontrast oranı nedir?

Kontrast oranı, iki rengin göreli parlaklığı arasındaki farktır ve 1:1 ile 21:1 arasında bir değer alır. 1:1 aynı iki rengi (fark yok), 21:1 ise siyah ile beyazı (en yüksek fark) ifade eder. Oran büyüdükçe metin daha kolay okunur.

WCAG eşikleri

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), metin için iki düzey tanımlar:

Büyük metin, yaklaşık 24 piksel (18 punto) ve üzeri normal yazı ya da yaklaşık 18,7 piksel (14 punto) ve üzeri kalın yazı anlamına gelir. Butonların kenarları, form alanları ve anlam taşıyan ikonlar gibi metin dışı arayüz öğeleri için de en az 3:1 önerilir.

Sık yapılan hatalar

• Açık gri metin: Sade görünmesi için seçilen açık gri tonlar çoğu zaman 4.5:1'in altında kalır.
• Fotoğraf üzerine yazı: Fotoğrafın açık ve koyu bölgeleri değiştiği için metnin bir kısmı okunmaz hale gelebilir. Metnin arkasına yarı saydam koyu bir katman veya düz renkli bir kutu eklemek sorunu çözer.
• Yalnızca renkle anlatmak: "Kırmızı alanlar zorunludur" gibi ifadeler renk körlüğü olan kişiler için yeterli değildir; renge ek olarak bir işaret veya metin kullanın.
• Marka rengini her yerde metin rengi yapmak: Canlı bir marka rengi büyük başlıklarda iyi çalışırken küçük gövde metninde yetersiz kalabilir.

Okunabilir kombinasyonlar seçmek

1. Metin ve arka plan rengini belirleyin.
2. Oranı ölçün; gövde metni için en az 4.5:1 hedefleyin.
3. Oran yetersizse rengin tonunu değil, açıklığını değiştirin: metni koyulaştırmak veya arka planı açmak, rengin karakterini korurken kontrastı artırır.
4. Sonucu telefonda ve parlak ışık altında da kontrol edin.

Herhangi iki rengin kontrast oranını ve WCAG AA/AAA sonucunu Renk Kontrast Denetleyici ile ölçebilir; uyumlu ve dengeli paletleri Renk Paleti Oluşturucu ile hazırlayabilirsiniz.