WCAG Kontrast Denetleyici
İki renk arasındaki kontrast oranını kontrol et. Her metin boyutu için WCAG AA ve AAA'da geçer/kalır yargısı.
Aa — Large text 24px / 18px bold
Aa — Normal text 16px
Aa — Small text 12px
Bu ne işe yarar?
WCAG (Web İçerik Erişilebilirlik Yönergeleri), düşük görüşlü, renk körü veya parlama koşullarındaki insanların hâlâ okuyabilmesi için metin ile arka planı arasında minimum bir kontrast oranı tanımlar. Bu araç bu oranı hesaplar (1:1 = aynı, 21:1 = saf siyah üzeri saf beyaz) ve renk çiftinin WCAG 2.1 Seviye AA veya AAA'yı geçip geçmediğini, normal metin, büyük metin ve UI bileşenleri için ayrı ayrı söyler. Matematik W3C luminance formülünü tam olarak izler.
Ne zaman kullanılır
- Beyaz bir kart üzerindeki marka renginin erişilebilirlik standartlarını karşılayıp karşılamadığını kontrol etme.
- Marka renkli bir arka plana karşı AA'yı geçen bir düğme metin rengi seçme.
- Bir tasarım sistemini token by token denetleme — gönderim öncesi.
- Somut bir geçer/kalır yargısıyla bir paydaşa bir renk-değiştirme isteğini gerekçelendirme.
- Azaltılmış kontrast tercihleri olan kullanıcılarının gerçekte ne göreceğini test etme.
Eşikler
- Normal metin (18pt / 14pt bold altında): AA için 4.5:1, AAA için 7:1.
- Büyük metin (≥18pt veya ≥14pt bold): AA için 3:1, AAA için 4.5:1.
- UI bileşenleri & grafikler (ikonlar, focus ring, form kenarlıkları, bilgi taşıyan grafik elementleri): AA için 3:1 (WCAG 2.1 §1.4.11). AAA tier yok.
Sık yapılan hatalar
- "Büyük metin" düşündüğünden daha büyüktür. 18pt kabaca 24px'tir. 14pt bold kabaca 19px bold'dur. 16px'teki gövde kopyası büyük metin değildir — 4.5:1 eşiğine ihtiyacı var.
- Yoğun bir fotoğraf üzerindeki açık metin başarısız olacaktır. Kontrast oranı belirli pikseller arasındadır — metni kontrollü bir arka plan vermek için koyu bir gradient veya solid bir panel yerleştir.
- Anti-aliasing kontrastı yumuşatır. 4.5:1 zemindir, hedef değildir. Rahat okuma genellikle 7:1 veya daha iyisini ister, özellikle gövde kopyası için.
- Hover ve focus durumları sayılır. Düğmen rest'te AA'yı geçer ama hover'da başarısız olursa, bu gerçek bir erişilebilirlik hatasıdır.
- WCAG 2.1 vs APCA. WCAG 3 için önerilen yeni APCA (Erişilebilir Algısal Kontrast Algoritması) farklı ve tartışmasız daha iyi sayılar verir — ama WCAG 2.1 çoğu yargı yetkisinin hâlâ atıfta bulunduğu yasal standarttır.
- Şeffaflıkla pad etme. Bilinen bir arka plan üzerinde %50 alfalı bir ön plan farklı bir etkili kontrasta sahiptir — orijinaline değil, gerçek render edilen renge karşı hesapla.