Bu Kural Ne Anlama Gelir

WCAG 1.4.6, minimum kontrast ölçütünün (1.4.3) AAA düzeyindeki geliştirilmiş halidir. Çıtayı yükseltir: normal metin arka planına karşı en az 7:1, büyük metin en az 4.5:1 kontrast oranına ulaşmalıdır. Bu yüksek oranlar, kontrast artırıcı yardımcı teknoloji gerektirmeden orta düzeyde düşük görüşlü kullanıcılar (yaklaşık 20/80 görme keskinliği) için önemli ölçüde daha iyi okunabilirlik sağlar.

1.4.3 ile aynı istisnalar geçerlidir: rastlantısal metin, logotipler ve pasif bileşen metni muaftır. Büyük metin tanımı aynı kalır — 18pt (24px) normal veya 14pt (18.66px) kalın ve üstü.

Neden Önemlidir

7:1 oranı zorlu koşullarda önemli ölçüde daha iyi okunabilirlik sağlar. 4.5:1 kabul edilebilir minimum eşik olsa da, 7:1 daha belirgin görme kaybı olan kullanıcıları, doğal olarak azalan kontrast duyarlılığına sahip yaşlı yetişkinleri ve kötü görüntüleme koşullarını barındırır.

7:1'e ulaşmak dramatik görsel değişiklikler gerektirmez. Beyaz veya beyaza yakın arka plan üzerinde koyu metin bu eşiği kolayca karşılar. Asıl tasarım zorluğu renkli metin, açık griler ve orta tonlu arka planlarda ortaya çıkar.

İlgili axe-core Kuralları

color-contrast-enhanced — Metnin normal metin için geliştirilmiş 7:1 ve büyük metin için 4.5:1 kontrast oranını karşılayıp karşılamadığını kontrol eder. Bu kural genellikle "en iyi uygulama" veya AAA düzeyinde kontrol olarak çalıştırılır.

Nasıl Test Edilir

1.4.3 ile aynı araçları kullanın ancak hedefi normal metin için 7:1, büyük metin için 4.5:1 olarak ayarlayın.
axe DevTools'ta AAA kurallarını etkinleştirin veya color-contrast-enhanced kuralını özellikle çalıştırın.
WebAIM Contrast Checker kullanın ve sonuçlarda "WCAG AAA" satırını kontrol edin.
Daha açık renkler kullanma eğiliminde olan ikincil metin, altyazılar ve meta verilere özellikle dikkat edin.

Nasıl Düzeltilir

Daha yüksek eşiği karşılamak için renk paletinizi sıkılaştırın:

:root {
  /* Beyaz (#fff) üzerinde AAA uyumlu metin renkleri */
  --text-primary: #111122;    /* 17.7:1 */
  --text-secondary: #333355;  /* 10.1:1 */
  --text-muted: #4d4d6a;      /* 7.02:1 — 7:1 eşiğini karşılar */

  /* Büyük metin (24px+) için bunlar 4.5:1 geçer */
  --text-large-accent: #5c5c80; /* 5.1:1 */
}

/* 7:1'de başarısız olan orta aralık grilerden kaçının */
/* #767676 = beyaz üzerinde 4.54:1 — AA geçer ama AAA başarısız */
/* #595959 = beyaz üzerinde 7.0:1 — AAA geçer */
.body-text {
  color: #333355;
}

Sık Yapılan Hatalar

Kullanıcı tabanı yaşlı veya az gören popülasyonları içerdiğinde 4.5:1 (AA) geçmenin tüm kitleler için yeterli olduğunu varsaymak.
AA geçen ancak AAA'da başarısız olan #767676 gibi popüler "erişilebilir gri" değerleri kullanmak.
Karanlık mod tasarlarken geliştirilmiş gereksinimi gözden kaçırmak — koyu arka planlardaki soluk metin de 7:1 karşılamalıdır.
Genellikle daha açık renkler kullanan ikincil kullanıcı arayüzü metnini (zaman damgaları, yazar adları, meta veriler) test etmemek.
7:1 oran gereksinimini gerçekte muaf olan logotip ve marka öğelerine uygulamak.

1.4.6 Kontrast (Gelişmiş)