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.

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ı.

Foreground

Background

Sonuç

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.