Beyaz arka plan üzerindeki açık gri metin, ilk bakışta zarif ve minimalist görünebilir; ayrıca görme bozukluğu olan, ekranda güçlü güneş ışığı gören veya iş gününün sonunda sıradan göz yorgunluğu olan kullanıcılar için tamamen okunamaz olabilir. Renk kontrastı erişilebilirlik açısından en "teknik" kriterlerden biridir - karşılanması gereken kesin rakamlar vardır - ancak aynı zamanda önceden test edilmesi ve düzeltilmesi en kolay olanlardan biridir.

Kısacası — bu kılavuzun kapsamı

  1. WCAG'nin gerektirdiği oranlar
  2. Neden büyük metinlere daha az kontrasta izin veriliyor?
  3. Uygulamada kontrast oranı nasıl kontrol edilir
  4. Erişilebilir bir renk paleti önceden nasıl seçilir?

WCAG'nin Gerektirdiği Oranlar

WCAG, kontrast oranını 1:1 (hiç kontrast yok - aynı renk) ile 21:1 (mümkün olan maksimum kontrast - saf beyaz üzerinde saf siyah) arasındaki bir sayı olarak tanımlar. AA düzeyinde (İsrail dahil çoğu yerde zorunlu düzey), gereklilik, normal metin ile onun arkasındaki arka plan arasında en az 4,5:1 oranında bir orandır. Daha katı olan AAA seviyesinde gereksinim 7:1'e yükselir.

Neden Büyük Metinlere İzin Verilir? Daha Az Kontrast

Büyük metin, düşük kontrastla bile okunabilir kalır, bu nedenle WCAG bunu daha kolay bir eşik olarak ayarlar: AA düzeyinde 3:1 (4,5:1 yerine) ve AAA düzeyinde 4,5:1 (7:1 yerine). "Büyük metin", 18 punto veya daha büyük (yaklaşık 24 piksel) veya kalın ise 14 punto veya daha büyük (yaklaşık 18,7 piksel) metin olarak tanımlanır. Örneğin büyük başlıklar, normal gövde paragrafından biraz daha düşük kontrastı "karşılayabilir" ve yine de gereksinimi karşılayabilir.

Açıklayıcı diyagram Kontrast oranlarını karşılaştırma Farklı kontrast oranlarına sahip arka planda üç metin örneği Metin ve Arka Plan Arasındaki Kontrast Oranı Örnek metin 1.8:1 — ✕ başarısız Örnek metin 7.1:1 — ✓ AAA'yı da karşılıyor Örnek metin 5.4:1 — ✓ AA seviyesini karşılar Normal metin: en az 4,5:1 · Büyük metin (24 piksel+ veya 18,7 piksel kalın): en az 3:1 WebAIM Kontrast Denetleyicisi gibi araçlar, bir renk paletini tamamlamadan önce size tam oranı verir
Arka planda üç metin örneği: çok düşük bir oran (1,8:1) temel düzeyde bile başarısız olur; diğer iki oran sırasıyla AA ve AAA gereksinimlerini karşılar.

Uygulamada Kontrast Oranı Nasıl Kontrol Edilir?

Manuel olarak hesaplamanıza gerek yok; WebAIM Kontrast Denetleyicisi gibi ücretsiz araçlar, metni ve arka plan renk kodlarını girmenize ve her seviye için anında tam oranı ve başarılı/başarısız puanını almanıza olanak tanır. Yalnızca düz bir arka plan üzerindeki metni değil, aynı görüntünün farklı alanları arasında kontrastın değişebileceği arka plan görüntüleri veya degradeler üzerindeki metni de kontrol etmeye değer; bu nedenle en "sorunlu" noktayı test etmek en iyisidir.

💡 Pratik İpucu

Yalnızca metin için değil: Aynı kontrast gereksinimi (daha kolay bir eşikte, 3:1) yalnızca harfler için değil, form alanı ana hatları, işlevsel simgeler ve düğme kenarları gibi grafik kullanıcı arayüzü bileşenleri için de geçerlidir.

Erişilebilir Bir Renk Paleti Önceden Nasıl Seçilir?

En verimli yaklaşım kontrastı her belgede ayrı ayrı değil, şablon tasarımı aşamasında kontrol etmektir. Başlıklar, gövde metni ve bağlantılar için marka renklerini seçerken, kullandığınız her metin-arka plan kombinasyonunun en az 4,5:1'i karşıladığını önceden doğrulamak önemlidir. Bu şekilde, şablondan oluşturulan her yeni belge, her belgeyi yazıldıktan sonra ayrı ayrı kontrol etmek yerine otomatik olarak uygun kontrastı "devralır".

Belgelerinizin Kontrast Gereksinimlerini Karşılayıp Karşılamadığını Öğrenmek İster misiniz?

Aracımız, sitenizdeki her PDF dosyasının otomatik taranmasının bir parçası olarak renk kontrastını kontrol eder.

Sitenizi ücretsiz olarak tarayın ←