Renk Kontrastı ve Okunabilirlik Rehberi

Metin okunabilirliği, erişilebilirlik standartlarının temelidir. Yetersiz kontrast, görme zorluğu olan kullanıcıları dışlar ve tüm kullanıcılar için zor bir okuma deneyimi yaratır. Bu rehberde WCAG kontrast oranları, AA ve AAA seviyeleri, hesaplama yöntemleri ve gradient arka planlarda okunabilirlik sağlama tekniklerini inceliyoruz.

WCAG Kontrast Oranları

Web İçerik Erişilebilirlik Kılavuzu (WCAG) 2.1, metin ve arka plan arasındaki kontrast oranını (luminance ratio) ölçer. Oran 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasında değişir. 4.5:1 normal metin için AA seviyesinin minimumudur; 7:1 AAA seviyesi için gereklidir. Büyük metin (18pt veya 14pt kalın) için AA 3:1, AAA 4.5:1'dir. Kontrast ve WCAG rehberimizde detaylı hesaplama formülleri bulunur.

AA ve AAA Seviyeleri

AA (Seviye A): Minimum erişilebilirlik; çoğu proje için hedeflenir. Normal metin 4.5:1, büyük metin 3:1. AAA (Seviye AAA): Yüksek erişilebilirlik; eğitim ve sağlık sitelerinde tercih edilir. Normal metin 7:1, büyük metin 4.5:1. AAA tüm kombinasyonlarda mümkün değildir; bu nedenle AA çoğu durumda yeterlidir.

Kontrast Nasıl Hesaplanır?

Kontrast oranı, iki rengin göreceli parlaklığının (relative luminance) oranıdır. Formül: (L1 + 0.05) / (L2 + 0.05) — L1 daha açık rengin parlaklığı, L2 daha koyu rengin parlaklığıdır. RGB değerleri sRGB'ye dönüştürülür, gamma düzeltmesi uygulanır. Elle hesaplamak karmaşık olduğundan WebAIM Contrast Checker, Colour Contrast Analyser (CCA) veya Chrome DevTools kullanılır. Gradient Oluşturucu ile oluşturduğunuz renkleri bu araçlarla test edebilirsiniz.

Gradient Arka Planda Metin Okunabilirliği

Gradient arka planlarda kontrast tek bir noktada sabit değildir; geçiş boyunca değişir. Metin gradient üzerinde konumlandığında, en zayıf kontrastlı bölge sorun yaratır. Çözümler: (1) Metni gradient dışında düz arka planlı alana yerleştirin. (2) Metin alanına yarı saydam overlay ekleyerek arka planı karartın. (3) text-shadow veya stroke ile metni belirginleştirin. (4) Gradient renklerini baştan yüksek kontrast verecek şekilde seçin. CSS gradient overlay rehberimiz bu teknikleri detaylandırır.

/* Gradient üzerinde okunabilir metin - overlay */
.hero {
  position: relative;
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  pointer-events: none;
}
.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

Overlay Teknikleri

Görsel veya gradient üzerinde metin okunabilirliği için üç yaygın overlay türü vardır: (1) Koyu overlay: rgba(0,0,0,0.4–0.7) ile arka plan karartılır; açık metin kullanılır. (2) Gradient overlay: Alttan üste veya yandan siyah-beyaz gradient ile geçiş sağlanır. (3) Scrim: Metin alanının altında hafif bir gölge/kararma; sadece ilgili bölgede kontrast artar. Bu teknikler renk körlüğü ve erişilebilirlik gereksinimleri ile uyumludur; parlaklık farkı yeterli kontrast sağlar.

Test Araçları ve Yöntemleri

WebAIM Contrast Checker, iki renk girerek oranı hesaplar. Colour Contrast Analyser (CCA) masaüstü uygulaması; picker ile ekrandan renk seçilebilir. Chrome DevTools'un Inspect özelliği bazı kontrast bilgisi sunar. Figma eklentileri (Stark, A11y) tasarım aşamasında kontrast kontrolü yapar. Canlı site üzerinde tüm metin-arka plan kombinasyonlarını test etmeyi unutmayın; CSS değişkenleri ile tema değiştiğinde kontrast bozulabilir.

Pratik Öneriler

Beyaz (#fff) veya çok açık arka planda koyu gri (#333–#111) metin kullanın; siyah (#000) sert kontrast verebilir. Koyu arka planda beyaz veya açık gri (#f5f5f5) metin tercih edin. Link rengi metin renginden belirgin şekilde farklı olmalı; sadece renk değil alt çizgi veya bold ile de ayırt edilebilir. Nötr renkler kontrast için güvenli bir temel oluşturur. Büyük başlıklar için 3:1 oranı yeterli olsa da, uzun paragraflar için 4.5:1 veya üzeri hedeflenmelidir.

Renk Körlüğü ile Uyum

Kontrast oranı yalnızca okunabilirlik için değil, renk körlüğü olan kullanıcılar için de kritiktir. Parlaklık farkı (luminance) renk ayırt etmeden metin okumayı mümkün kılar. Kırmızı-yeşil kontrastına güvenmek yerine parlaklık kontrastına dayanın. Renk körlüğü ve erişilebilirlik rehberimizde detaylı bilgi bulunur.

Sonuç

Renk kontrastı erişilebilir ve okunabilir web tasarımının temelidir. WCAG AA hedefleyerek, gradient ve görsel arka planlarda overlay teknikleri kullanarak tüm kullanıcılar için kaliteli bir deneyim sunun. Kontrast ve WCAG rehberimizde formüller ve detaylar bulunur.