Bu Kural Ne Anlama Gelir

WCAG 1.4.3, ön plan metni ile arka planı arasındaki minimum kontrast gereksinimlerini belirler. Normal boyutlu metin (18pt veya 14pt kalın yazının altında) en az 4.5:1 kontrast oranına ulaşmalıdır. Büyük metin (18pt / 24px ve üstü veya 14pt / 18.66px kalın ve üstü) minimum 3:1 gerektirir. Bu oranlar, WCAG kontrast algoritmasında tanımlanan bağıl parlaklık değerleri kullanılarak hesaplanır.

Ölçüt, ekranda oluşturulan tüm metin içeriğini kapsar: görsellerdeki metin, form alanlarındaki yer tutucu metin, görseller veya gradyanlar üzerindeki metin ve CSS ile oluşturulan metin. Genel kitle tarafından okunması beklenmeyen rastlantısal metin, pasif kullanıcı arayüzü bileşenleri, logolar ve marka isimleri için istisnalar bulunur.

Bu, en sık başarısız olunan WCAG ölçütlerinden biridir ve düzeltilmesi en etkili olanlardan biridir. Kontrast ölçülebilir, otomatikleştirilebilir ve düşük görme kapasitesine sahip, yaşlanan gözleri olan veya optimal altı görüntüleme koşullarına sahip geniş bir kullanıcı kitlesini doğrudan etkiler.

Neden Önemlidir

Düşük kontrastlı metin, webdeki en yaygın erişilebilirlik engellerinden biridir. WebAIM Milyon raporuna göre düşük kontrast, analiz edilen ana sayfaların %80'inden fazlasında görülen, tutarlı biçimde birinci sıradaki otomatik tespit edilen erişilebilirlik hatasıdır. Bu durum yalnızca dünya genelinde orta ile ciddi görme bozukluğu olan tahminen 246 milyon kişiyi değil, beyaz arka plan üzerinde açık gri metne gözlerini kısmış her kullanıcıyı da etkiler.

Kontrast yalnızca bir engelli meselesi değildir. Parlak güneş, pil tasarrufu için karartılmış ekranlar, toplantı odasındaki projektörler ve düşük kaliteli ekranlar gibi çevresel faktörlerin tümü, kullanıcının algıladığı etkin kontrastı azaltır. 4.5:1 kontrast oranı, tüm bu koşullar için makul bir güvenlik marjı sağlar.

Ekran okuyucu kullanmayan düşük görüşlü kullanıcılar için metin kontrastı, içeriği bağımsız olarak okumak ile bir web sitesini hiç kullanamamak arasındaki fark olabilir. Dar bir grubu faydalandıran bazı erişilebilirlik gereksinimlerinin aksine, iyi kontrast neredeyse herkese yarar sağlar.

İlgili axe-core Kuralları

color-contrast — Metin öğelerinin ön plan ve arka plan renk kombinasyonunun normal metin için minimum 4.5:1, büyük metin için 3:1 oranını karşılayıp karşılamadığını kontrol eder. En sık tetiklenen axe kurallarından biridir.

color-contrast kuralı, miras alma, opaklık ve arka plan renklerini hesaba katarak hesaplanmış stilleri inceler. Kontrastın eşiğin altına düştüğü öğeleri işaretler ve gerçek oranı gereken oranla birlikte raporlar.

Nasıl Test Edilir

axe DevTools veya Lighthouse erişilebilirlik denetimini çalıştırın — her ikisi de kontrast hatalarını belirli oran değerleri ve öğe konumlarıyla işaretler.
Tarayıcı DevTools renk seçiciyi kullanın; Chrome ve Firefox'ta bir metin öğesinin color özelliğini incelediğinizde kontrast oranını gösterir.
Manuel doğrulama için WebAIM Contrast Checker veya Colour Contrast Analyser (CCA) masaüstü uygulaması gibi özel kontrast denetleyicileri kullanın.
Görseller veya gradyanlar üzerindeki metni, arka planın en düşük kontrastlı noktasında kontrol ederek test edin.
Yer tutucu metin kontrastını doğrulayın. Teknik olarak 1.4.3 tarafından zorunlu olmasa da, etiket olarak kullanılan yer tutucular oranı karşılamalıdır.
Tüm durumlarda kontrastı kontrol edin: varsayılan, üzerine gelme, odak, aktif, devre dışı. Devre dışı durumlar muaftır ancak diğer etkileşimli durumlar oranı karşılamalıdır.
Metnin okunabilir kaldığını doğrulamak için Windows Yüksek Kontrast Modu ve macOS Kontrast Artırma ayarıyla test edin.

Nasıl Düzeltilir

Tasarım aşamasında kontrastı güvenli bir renk paleti oluşturarak başlayın. Arka planınıza karşı 4.5:1 geçen birincil, ikincil ve vurgu renkleri tanımlayın:

/* Kontrast güvenli renk sistemi */
:root {
  /* Arka plan */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;

  /* Metin — tümü --bg-primary üzerinde 4.5:1 geçer */
  --text-primary: #1a1a2e;    /* 16.15:1 */
  --text-secondary: #4a4a68;  /* 7.24:1  */
  --text-muted: #646480;      /* 4.98:1  */

  /* Etkileşimli — beyaz üzerinde 4.5:1 geçer */
  --link-color: #0055b8;      /* 7.04:1  */
  --link-hover: #003d82;      /* 10.5:1  */

  /* Durum renkleri — beyaz üzerinde 4.5:1 geçer */
  --color-error: #c62828;     /* 6.15:1  */
  --color-success: #1b5e20;   /* 7.82:1  */
}

Görseller üzerindeki metin için minimum kontrastı garanti etmek üzere bir kaplama veya metin gölgesi kullanın:

/* Görsel arka planlarda yarı saydam kaplama */
.hero-overlay {
  position: relative;
}

.hero-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.hero-overlay .text {
  position: relative;
  z-index: 1;
  color: #ffffff;
}

/* Alternatif: okunabilirlik için metin gölgesi */
.text-on-image {
  color: #ffffff;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.5);
}

Açık gri yer tutucu metin gibi yaygın kalıpları düzeltin:

/* Varsayılan yer tutucu genellikle çok açıktır (#a9a9a9 = beyaz üzerinde 2.32:1) */
input::placeholder {
  color: #646480; /* Beyaz üzerinde 4.98:1 */
}

/* Odak çerçevesi renginin de yeterli kontrasta sahip olduğundan emin olun */
input:focus {
  outline: 3px solid #0055b8;
  outline-offset: 2px;
}

Dinamik temalar ve karanlık mod için her şema için kontrast güvenli değerler tanımlayın:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #121212;
    --bg-secondary: #1e1e2e;
    --text-primary: #e0e0e8;    /* #121212 üzerinde 13.2:1 */
    --text-secondary: #a8a8c0;  /* 7.1:1  */
    --text-muted: #8888a0;      /* 4.63:1 */
    --link-color: #6eb5ff;      /* 7.52:1 */
  }
}

Büyük metin (18pt/24px normal veya 14pt/18.66px kalın) için eşik 3:1'e düşer ve daha fazla tasarım esnekliği sağlar:

.page-title {
  font-size: 2rem; /* 32px = büyük metin */
  font-weight: 700;
  color: #666688; /* 4.18:1 — büyük metin için 3:1 geçer */
}

.body-text {
  font-size: 1rem; /* 16px = normal metin */
  color: #4a4a68;  /* 7.24:1 — normal metin için 4.5:1 geçer */
}

Sık Yapılan Hatalar

Beyaz arka plan üzerinde açık gri metin — webdeki en yaygın kontrast hatası. #fff üzerinde #999 yalnızca 2.85:1 verir.
Erişilebilirlik değerlendirmesi yapılmadan seçilen marka renkleri. Beyaz üzerinde #4A90D9 mavi yalnızca 3.27:1 — normal metin için başarısız.
Kaplama olmadan kahraman görselleri üzerinde beyaz metin. Kontrast görsel boyunca değişir ve genellikle açık bölgelerde eşiğin altına düşer.
Çok açık stilde yer tutucu metin. ::placeholder için tarayıcı varsayılanları genellikle kontrast gereksinimlerini karşılamaz.
Etkileşimli durumları unutmak: minimum kontrastın altına düşen hover ve focus metin renkleri.
Metin öğelerinde CSS opacity kullanmak — bu, arka planla karışarak kontrastı etkili biçimde azaltır.
Karanlık modun otomatik olarak erişilebilir olduğunu varsaymak — koyu-üzerinde-koyu hataları, açık-üzerinde-açık hatalar kadar yaygındır.

1.4.3 Kontrast (Minimum)