Renk kontrastı, dijital içerikte metnin ve arayüz öğelerinin arka planla yeterince ayrışmasını sağlar. Kontrast yetersiz olduğunda içerik “görünür” olsa bile “okunabilir” olmaz; düşük görme, renk görme farklılıkları (renk körlüğü) ya da parlak güneş ışığı gibi koşullar altında kullanıcılar içeriği kaçırabilir. Bu nedenle renk kontrast gereksinimleri, hem kapsayıcı tasarımın hem de WCAG uyumluluğunun en somut ve ölçülebilir kurallarındandır.
Bu yazıda WCAG’deki kontrast oranlarını, hangi öğelere nasıl uygulandığını, sık yapılan hataları ve pratik kontrol yöntemlerini anlaşılır bir şekilde açıklıyoruz.
Kontrast, bir öğenin (ör. metin) parlaklığının arka planın parlaklığına göre farkıdır. WCAG bu farkı “kontrast oranı” ile ifade eder: 1:1 (aynı) ile 21:1 (siyah-beyaz gibi maksimum) arasında değişir.
Yeterli kontrast şunlar için kritiktir:
Kapsayıcılığı tasarımın başlangıcına almak için kapsayıcı tasarım ilkeleri yaklaşımı, kontrastı “sonradan düzeltilecek bir detay” değil, bileşenlerin temel gereksinimi olarak ele almayı önerir.
WCAG’de metin kontrastı temelde iki başarı ölçütüyle ele alınır: 1.4.3 Contrast (Minimum) ve 1.4.6 Contrast (Enhanced). Çoğu kurum için hedef seviye AA uyumluluğudur; bazı yüksek riskli alanlarda (kamu, finans, sağlık) AAA da tercih edilebilir. WCAG sürümleri ve güncel beklentiler hakkında daha geniş çerçeve için WCAG 2.2 nedir ve neden önemlidir? içeriği faydalı bir referanstır.
Önemli not: “Metin” yalnızca paragrafları değil; menü öğelerini, buton yazılarını, form etiketlerini, hata mesajlarını, bildirimleri ve görsel üzerinde yer alan yazıları da kapsar. Pazarlama görsellerinde veya banner’larda metin kullanıldığında da kontrast kuralları devreye girer.
Kontrast sadece metin için değildir. WCAG 1.4.11 Non-text Contrast ile, kullanıcı arayüzü bileşenleri ve anlam taşıyan görsel öğeler için de minimum kontrast ister.
Buton kenarlığı, odak (focus) göstergesi, form alanı çerçevesi, seçili durum, onay kutusu işareti gibi bileşenler, bitişik renkle en az 3:1 kontrast sağlamalıdır. Örneğin yalnızca çok açık gri bir çerçeveyle belirlenen giriş alanları, pek çok kullanıcı için “görünmez” hale gelebilir.
Grafiklerdeki çizgiler, sütunlar, veri noktaları ve lejant işaretleri de 3:1 kuralından etkilenebilir. Burada kritik olan, bilginin sadece renkle verilmemesidir. Yani “kırmızı = zarar, yeşil = kâr” demek tek başına yeterli değildir; desen, etiket, ikon, doku veya doğrudan değer gösterimi gibi ek ipuçları gerekir.
Kontrast uyumsuzluğu çoğu zaman “yanlış renk seçimi”nden değil, tasarım sistemi kararlarının birleşiminden doğar:
Bu sorunlar, erişilebilirlik kontrollerinde çok sık karşılaşılan hatalardandır. Eğer daha geniş bir “sık yapılanlar” listesi arıyorsanız, web sitelerinde 7 yaygın erişilebilirlik hatası yazısı kontrastın da dahil olduğu pratik örnekler sunar.
Kontrastı doğru değerlendirmek için “göz kararı” yeterli değildir. Çünkü ekran parlaklığı, ortam ışığı ve kişisel algı farklılıkları sonucu yanıltabilir. En güvenilir yol, renklerin hex değerleri üzerinden kontrast oranını hesaplayan araçları kullanmaktır.
Kurumsal sitelerde bu kontrolleri sayfa sayfa manuel yapmak zor ve hataya açıktır. Bu noktada Corpowid (corpowid.ai), otomatik erişilebilirlik denetimleriyle kontrast problemlerini sayfa genelinde tespit etmeye ve düzenli izleme ile yeni eklenen içeriklerde tekrar oluşmasını yakalamaya yardımcı olabilir.
Kontrast kuralları güçlüdür ama bağlama göre istisnalar vardır. Örneğin:
Buna rağmen “istisna” yaklaşımıyla kritik bilgileri düşük kontrastla sunmak, erişilebilirlik riskini yükseltir. Özellikle yasal uyumluluk ve risk yönetimi açısından, kontrast gibi ölçülebilir kriterler sık denetlenen başlıklardandır. Regülasyonlar ve uyum riskleri hakkında daha fazla perspektif için dijital erişilebilirlik ve regülasyonlar rehberine göz atabilirsiniz.
Kontrast sorunları yalnızca web arayüzünde değil; raporlar, e-kitaplar ve PDF dokümanlarında da sık görülür. Özellikle açık gri metin, ince çizgilerle çizilmiş tablolar veya sadece renk farkıyla ayrıştırılan grafik serileri, erişilebilirlik açısından problem yaratır.
PDF tarafında kontrast; etiketleme, okuma sırası ve alternatif metin gibi diğer gereksinimlerle birlikte ele alınmalıdır. Eğer içerikleriniz PDF olarak da yayınlanıyorsa, erişilebilir PDF hazırlama rehberi bu süreci uçtan uca planlamanıza yardımcı olur.
Kontrast uyumu, yeniden tasarım dönemlerinde düzeltilip sonra içerik güncellemeleriyle bozulabilen bir alandır. Yeni kampanya banner’ları, CMS üzerinden girilen içerikler, farklı ekiplerin oluşturduğu landing page’ler zamanla tutarsızlık yaratır. Bu yüzden kontrastı yalnızca tasarım aşamasında değil, yayın sonrası da düzenli kontrol etmek gerekir.
Corpowid (corpowid.ai) gibi platformlar, sitenizi periyodik olarak tarayıp kontrast gibi kritik WCAG bulgularını izleyerek ekiplerin “geri dönüşlü” hata maliyetini azaltmasına destek olabilir. Böylece erişilebilirlik, tek seferlik bir proje değil, ürün yaşam döngüsünün doğal bir parçası haline gelir.
Renk kontrast gereksinimleri; metin, ikon, buton ve grafiklerin herkes tarafından okunabilir ve anlaşılabilir olmasını sağlar. WCAG’nin 4.5:1 ve 3:1 gibi net eşikleri, tasarım kararlarını objektif hale getirir. Kontrastı tasarım sistemine yerleştirip düzenli ölçüm ve izleme ile desteklediğinizde, hem kullanıcı deneyimini güçlendirir hem de erişilebilirlik uyumluluğu yolunda önemli bir adım atmış olursunuz.
ScanAndFix yaklaşımı, bir web sitesindeki temel erişilebilirlik problemlerini saniyeler içinde görünür kılar. Bu yazıda hızlı taramanın nasıl çalıştığını ve WCAG uyumu için nasıl aksiyona dönüştürüleceğini ele alıyoruz.
EN
