Renk Kontrastı Nedir?
Kısa tanım
Renk kontrastı, metin veya arayüz öğesinin rengi ile arka planı arasındaki parlaklık farkıdır ve web'de genellikle WCAG'nin tanımladığı kontrast oranıyla ölçülür. Oran 1:1 (fark yok) ile 21:1 (siyah üzerine beyaz) arasında değişir. WCAG 2.2 AA düzeyi normal metin için en az 4,5:1, büyük metin ile buton kenarı ve ikon gibi metin dışı öğeler için en az 3:1 ister.
Diğer adları: kontrast oranı, contrast ratio, color contrast, WCAG kontrast
Oran nasıl hesaplanır?
WCAG, iki rengin bağıl parlaklığını (relative luminance) karşılaştırır. Her renk 0 (siyah) ile 1 (beyaz) arasında bir parlaklık değerine çevrilir; insan gözü yeşile kırmızı ve maviden daha duyarlı olduğu için bu hesapta yeşil kanalın ağırlığı en yüksektir. Oran şöyle bulunur:
kontrast = (L1 + 0.05) / (L2 + 0.05)
L1: açık rengin bağıl parlaklığı
L2: koyu rengin bağıl parlaklığıSonuç yuvarlanmaz. W3C'nin açıklama belgesi bunu özellikle belirtir: 4,499:1 değeri 4,5:1 eşiğini karşılamaz. Renk tonunun kendisi (kırmızı mı mavi mi) hesaba girmez; yalnızca parlaklık farkı önemlidir.
WCAG 2.2'deki eşikler
| Kriter | Düzey | Neye uygulanır | En düşük oran |
|---|---|---|---|
| 1.4.3 Kontrast (Asgari) | AA | Normal metin | 4,5:1 |
| 1.4.3 Kontrast (Asgari) | AA | Büyük metin | 3:1 |
| 1.4.6 Kontrast (Geliştirilmiş) | AAA | Normal / büyük metin | 7:1 / 4,5:1 |
| 1.4.11 Metin Dışı Kontrast | AA | Arayüz bileşenlerinin sınırları ve durumları, anlam taşıyan grafik parçaları | 3:1 |
Büyük metin, en az 18 punto veya kalın yazılmış en az 14 punto metindir; CSS'te kabaca 24 piksel ve kalın 18,5 piksele karşılık gelir. Logolar, salt dekoratif metinler ve devre dışı (etkileşime kapalı) bileşenler kontrast şartından muaftır. Kurallar ve istisnalar için W3C'nin 1.4.3 açıklama sayfasına bakılabilir.
Gerçek renklerle örnekler
| Ön plan / arka plan | Oran | Sonuç |
|---|---|---|
| #767676 gri metin / beyaz | 4,54:1 | Normal metin için AA'yı karşılar |
| #777777 gri metin / beyaz | 4,48:1 | Göze aynı görünür ama normal metin için yetersizdir |
| #595959 / beyaz | 7,0:1 | Normal metin için AAA |
| Beyaz yazı / #F97316 turuncu buton | 2,8:1 | Büyük metin için bile yetersiz |
| Beyaz yazı / #C2410C koyu turuncu | 5,18:1 | Normal metin için AA |
| #D1D5DB form alanı kenarı / beyaz | 1,47:1 | Metin dışı kontrast için yetersiz |
Tablo iki şeyi gösteriyor. Birincisi, "açık gri metin" kararı çoğu zaman sınırın hemen altında kalır. İkincisi, marka rengini butonda kullanırken genellikle aynı tonun koyu bir varyantı gerekir. Bu varyantları design token olarak bir kez tanımlamak, her ekranda yeniden hesap yapmayı önler.
Metin dışında kontrast gereken yerler
- Form alanları: Alanın sınırı arka plandan ayırt edilemiyorsa kullanıcı nereye yazacağını göremez.
- Odak göstergesi: Klavyeyle gezinen kullanıcı için odak çerçevesinin bitişik renklere karşı yeterli kontrastı olmalıdır.
- İkonlar ve grafikler: Anlam taşıyan bir ikon veya grafikteki çizgi 3:1'in altında kalırsa bilgi kaybolur.
- Görsel üzerindeki metin: Hero alanlarında fotoğrafın en açık bölgesi hesaba katılmalı; yarı saydam bir katman eklemek en güvenilir çözümdür.
- Durumlar: Hover, seçili ve hata durumları da ayrı ayrı kontrol edilmelidir; karanlık mod ayrı bir renk seti olarak ölçülmelidir.
Kontrast tek başına yeterli değildir: bilgi yalnızca renkle verilmemelidir (WCAG 1.4.1). Hatalı form alanını sadece kırmızı kenarla değil, bir hata metniyle de belirtmek gerekir. Kontrast, daha geniş web erişilebilirliği çalışmasının ölçülmesi en kolay parçasıdır.
Ölçüm ve gelecekteki değişiklikler
Tarayıcı geliştirici araçlarındaki renk seçiciler ve Lighthouse gibi otomatik denetimler kontrast oranını doğrudan gösterir. Ancak otomatik araçlar görsel üzerindeki metni veya hover durumlarını çoğu zaman yakalayamaz; bunlar elle kontrol edilmelidir. W3C'nin geliştirmekte olduğu WCAG 3.0 hâlâ taslak aşamasındadır ve Eylül 2026 tarihli çalışma taslağı, kullanılacak kontrast algoritmasının henüz belirlenmediğini açıkça yazar. Bugün uyumluluk için geçerli ölçüt WCAG 2.2'deki orandır. Ölçmenin yanı sıra, kontrastı tipografi kararlarıyla birlikte düşünmek gerekir: ince ve küçük yazılar aynı oranda bile daha zor okunur.