Skip to main content
Teknik

Renk Kontrastı Test Rehberi

Renk kontrastı hatalarını test etme ve düzeltme — WCAG 1.4.3 ve 1.4.11 gereksinimleri, test araçları, manuel prosedürler ve CSS'de kontrastı düzeltme.

Renk Kontrastı Gereksinimlerini Anlama

WCAG iki kontrast kriteri tanımlar: 1.4.3 (Kontrast Minimumu, AA Seviyesi) metin kontrastını, 1.4.11 (Metin Dışı Kontrast, AA Seviyesi) UI bileşenlerini ve grafik nesnelerini kapsar. Gerekli oranlar:

  • Normal metin: arka planına karşı minimum 4,5:1.
  • Büyük metin (≥ 18pt veya ≥ 14pt kalın): minimum 3:1.
  • UI bileşenleri (giriş kenarlıkları, odak göstergeleri): minimum 3:1.
  • Grafik nesneler (grafik çizgileri, diyagram parçaları): minimum 3:1.

Test Araçları

  • axe DevTools — statik metin kontrast hatalarını yakalar.
  • Colour Contrast Analyser (TPGi) — degradeler, görseller ve dinamik durumları test etmek için ekrandan renk seçmenizi sağlayan masaüstü uygulaması.
  • Chrome DevTools — Öğeler panelinde bir renk örneğine tıklayarak kontrast oranını görebilirsiniz.
  • WebAIM Kontrast Denetleyicisi — oranları kontrol etmek için hex kodlarını yapıştırın.

Yaygın Kontrast Hataları ve Düzeltmeleri

/* Hata: beyaz üzerinde açık gri metin */
.altyazi {
  color: #767676; /* beyaz üzerinde 4,48:1 — gereksinimin hemen altında */
}

/* Düzeltme: metin rengini koyulaştırın */
.altyazi {
  color: #696969; /* 4,72:1 — AA geçer */
}
/* Hata: odak halkasının yetersiz kontrastı */
:focus {
  outline: 2px solid #a0c4ff; /* beyaz üzerinde 2,1:1 — başarısız */
}

/* Düzeltme */
:focus-visible {
  outline: 3px solid #0057b7; /* beyaz üzerinde 5,66:1 — geçer */
  outline-offset: 2px;
}

Manuel Test Prosedürü

  1. Önce tüm işaretlenmiş kontrast hatalarını düzeltmek için axe veya Lighthouse ile otomatik tarama çalıştırın.
  2. Hover durumları, odak durumları, yer tutucu metni, degrade arka planlar üzerindeki metin gibi otomatik araçların gözden kaçırdığı senaryoları manuel olarak test edin.
  3. Her iki renk için de hex değerini belirlemek için Colour Contrast Analyser damlalığını kullanın.

Koyu Mod Kontrast Testi

Koyu mod kendi kontrast zorluklarını getirir. Açık modda 7:1 kontrasta sahip olan metin, renkler basitçe tersine çevrilmişse koyu modda yalnızca 2:1'e sahip olabilir. Koyu mod paletinizi her zaman bağımsız olarak test edin.

Kaynaklar