Görsel üstündeki bir metin, harflerinin rengi ile hemen arkasındaki zemin arasındaki parlaklık farkı yeterliyse okunur. Bu fark kontrast oranı ile ölçülür. Web erişilebilirliği yönergeleri WCAG, normal metin için en az 4.5:1, büyük metin için en az 3:1 oran önerir. Görsel üstünde zor olan şudur: zemin tek renk değildir, bu yüzden oranı metnin altındaki en zorlu bölgeye göre değerlendirmek gerekir.
Bu yazı kontrast oranının nasıl hesaplandığını, eşiklerin ne anlama geldiğini, değişken bir zeminde nasıl ölçüleceğini, okunabilirliği artıran teknikleri ve sık hataları anlatır. Son bölümde Yeşilçam Studios Design Studio'nun aynı ölçütü nasıl uyguladığını bulacaksınız.
Kontrast oranı nedir, nasıl hesaplanır?
WCAG'deki kontrast oranı, iki rengin göreli parlaklığına (relative luminance) dayanır. Göreli parlaklık, rengin kırmızı, yeşil ve mavi bileşenlerinin göze ne kadar parlak geldiğini 0 (siyah) ile 1 (beyaz) arasında ifade eder. Göz yeşile en duyarlı, maviye en az duyarlı olduğu için bileşenler eşit sayılmaz: yeşil yaklaşık yüzde 72, kırmızı yüzde 21, mavi yüzde 7 ağırlık alır.
Oran şöyle hesaplanır: açık rengin parlaklığına 0,05 eklenir, koyu rengin parlaklığına 0,05 eklenir ve birincisi ikincisine bölünür. Sonuç 1:1 (aynı renk) ile 21:1 (siyah üstünde beyaz) arasında bir değerdir. Renk tonu tek başına kontrast yaratmaz; aynı parlaklıktaki kırmızı ve yeşil yan yana canlı görünse bile metin olarak zor okunur.
4.5:1 ve 3:1 eşikleri ne anlama gelir?
| Durum | En az oran (AA) | Daha sıkı düzey (AAA) |
|---|---|---|
| Normal metin | 4.5:1 | 7:1 |
| Büyük metin (yaklaşık 18 punto ve üstü ya da 14 punto kalın) | 3:1 | 4.5:1 |
| Arayüz bileşenleri ve anlam taşıyan grafikler | 3:1 | Tanımlı değil |
Eşikler web için yazılmıştır ama mantıkları basılı işte ve sosyal medya görselinde de geçerlidir. Büyük metin daha düşük oranla da okunur, çünkü harf biçimleri geniştir. Küçük gövde metni, tarih, adres ve dipnot ise daha yüksek oran ister. Afiş uzaktan, sosyal medya görseli küçük bir telefon ekranında ve çoğu zaman güneş altında görüldüğü için eşiklerin üstünde kalmak gerçek koşullarda fark yaratır.
Değişken bir zeminde kontrast nasıl ölçülür?
Düz bir renk zeminde ölçüm tek bir sayıdır. Fotoğraf ya da çizim zeminde ise metnin altında açık ve koyu bölgeler bir arada bulunur. Ortalama renge bakmak yanıltıcıdır: bir başlığın yüzde 80'i koyu gökyüzünde, yüzde 20'si parlak bir bulutun üstündeyse ortalama iyi görünür ama bulutun üstündeki harfler kaybolur.
- Metnin kapladığı alanı ve harflerin hemen çevresini belirleyin; okumayı etkileyen zemin burasıdır.
- Bu alandaki zemin piksellerinin her biri için metin rengiyle kontrast oranını hesaplayın.
- Ortalamaya değil, en zayıf kesime bakın. Pratik bir yöntem, oranların en düşük yüzde 10'luk diliminin sınırını almaktır.
- Bu değeri metnin türüne uygun eşikle karşılaştırın: başlık ve büyük metin için 3:1, diğer metinler için 4.5:1.
- Eşiğin altındaysa aşağıdaki tekniklerden birini uygulayıp yeniden ölçün.
Afişte, ekranda ve sosyal medyada okuma koşulları neden farklıdır?
Aynı oran, farklı okuma koşullarında farklı sonuç verir. Kontrast ölçümü bir başlangıçtır; tasarımın nerede ve nasıl görüleceğini de hesaba katmak gerekir.
- Afiş ve roll-up. Uzaktan ve çoğu zaman yürürken bakılır. Başlık birkaç saniyede okunmalıdır; bu yüzden büyük punto, kalın ağırlık ve sade bir zemin, oranın kendisi kadar önemlidir.
- Telefon ekranı. Sosyal medya görselleri akış içinde küçük bir kare olarak görünür, parlaklık çoğu zaman kısıktır ya da ekran güneş altındadır. Tam ekranda okunan bir alt başlık, akıştaki küçük önizlemede kaybolabilir.
- Basılı malzeme. Kâğıt ışık yaymaz, ortamın ışığını yansıtır. Mat kâğıtta koyu tonlar biraz açılır, renkler matlaşır; ekranda sınırda kalan bir oran baskıda yetersiz kalabilir.
Pratik bir alışkanlık: tasarımı son kullanım boyutunda ve koşulunda kontrol edin. Sosyal medya görselini telefonda küçültülmüş hâliyle, afişi ekranda uzaktan bakar gibi küçülterek, baskı işini baskı önizlemesiyle inceleyin.
Okunabilirliği artıran teknikler nelerdir?
- Renk seçimi. İlk deneme metnin rengini değiştirmektir: aynı tonun çok açık ya da çok koyu bir hâli, paletinizdeki başka bir renk, beyaz ya da siyaha yakın bir renk. Tasarımın karakterini en az bozan yol budur.
- Sakin alana taşımak. Görselin düz, az ayrıntılı bir bölgesi (gökyüzü, duvar, zemin) metin için doğal bir yerdir. Kompozisyon kurulurken bu alanı baştan bırakmak en temiz sonuçtur.
- Şerit ya da zemin kutusu. Metnin arkasına düz ya da yarı saydam bir şerit koymak, oranı zeminden bağımsız hâle getirir. İsviçre tasarımı gibi düz grafik tarzlarda doğal görünür.
- Kontur (stroke). Harflerin çevresine zıt renkte ince bir kontur, metni karmaşık zeminden ayırır. Pop art ve çizgi roman gibi tarzlarda estetiğin bir parçasıdır.
- Gölge ve karartma. Yumuşak bir gölge ya da görselin metin bölgesine doğru koyulaşan bir degrade (scrim) kontrastı artırır. Baskıda saydamlık içerdiği için PDF standardı seçimini etkileyebilir.
- Yazı tipi ve boyut. Daha kalın ağırlık ve daha büyük punto, aynı oranda daha iyi okunur. İnce yazı tipleri görsel üstünde en hızlı kaybolanlardır.
En sık yapılan hatalar nelerdir?
- Ortalama renge göre karar vermek. Zeminin en parlak ya da en koyu kesimi metnin bir kısmını görünmez kılar.
- Metni ürünün ya da logonun üstüne taşırmak. Hem ürün hem metin okunmaz hâle gelir. Metin, ürün ve logo ayrı alanlarda durmalıdır.
- Baskıdaki renk kaybını unutmak. Ekranda sınırda geçen bir oran, CMYK'de renkler matlaşınca altına düşebilir; ayrıntısı CMYK ve RGB yazısında.
- Yalnız renk tonuna güvenmek. Kırmızı üstünde yeşil ya da mavi üstünde mor, parlaklıkları yakınsa renk körlüğü olan okurlar için hiç okunmaz.
- Her metne aynı çözümü uygulamak. Büyük başlık için yeterli olan bir gölge, küçük adres satırını kurtarmaz.
Yeşilçam Studios'ta okunabilirlik nasıl ölçülür ve düzeltilir?
Design Studio, metinleri görselin içine yazmaz; her metin düzenlenebilir ayrı bir katmandır. Bu sayede metnin altındaki gerçek zemin ölçülebilir. Ölçüt bu yazıda anlatılanla aynıdır: metnin ve harflerin çevresindeki halkanın altındaki piksellerin kontrast oranlarının en düşük yüzde 10'luk dilimi alınır. Başlıklar ve tuval yüksekliğine göre iri metinler için eşik 3:1, diğer metinler için 4.5:1'dir.
Sam bir tasarım hazırladığında metinler bu ölçütle gerçek zemin üzerinde denetlenir; yetersiz kalan metin kaydırılır, rengi değiştirilir, kontur ya da tarza uygun bir şerit eklenir. Metnin bir ürünün ya da logonun üstüne taşması da ayrıca denetlenir. Siz düzenleyicide bir metin katmanını seçtiğinizde "Okunabilirlik" göstergesi ölçülen oranı gösterir: yeterliyse "İyi okunuyor", değilse "Düşük kontrast" ve gereken en düşük oran. Bu durumda beliren "Okunur yap" düğmesi önce metne en yakın ve eşiği geçen rengi arar (aynı tonun açık ya da koyu hâli, tasarımın ve markanın paletindeki renkler, beyaz, siyaha yakın renk); hiçbiri yetmezse metne zıt renkte bir kontur ekler. "Yazı konturu" ve "Kontur kalınlığı" alanlarıyla konturu kendiniz de ayarlayabilirsiniz.
Dışa aktarırken zeminden yeterince ayrışmayan metin katmanı varsa pencere sayısıyla birlikte uyarır; uyarı indirmeyi engellemez. Düzenleyicideki okunabilirlik göstergesi ve "Okunur yap" ek jeton gerektirmez. Ekran ekran anlatım için düzenleyici ve okunabilirlik rehberine, ilk tasarımınız için Design Studio'ya giriş rehberine bakabilirsiniz.
Sık sorulanlar
WCAG yalnız web için değil mi? Yönergeler web içeriği için yazıldı, ancak kontrast oranı renklerin parlaklık farkını ölçen genel bir yöntemdir. Afiş, menü ve sosyal medya görselinde de aynı mantıkla iyi bir referanstır.
Başlık için 3:1 yeterli mi? Büyük ve kalın başlıklar için WCAG'nin en az düzeyi 3:1'dir. Uzaktan okunacak bir afişte ya da güneş altında bakılacak bir ekranda daha yüksek oran güvenlidir.
Neden ortalama değil en düşük yüzde 10 ölçülüyor? Okur metnin en zayıf kesiminde takılır. Ortalama, parlak bir bulut ya da koyu bir gölge üstünde kaybolan harfleri gizler; en düşük dilim bu riski yakalar.
"Okunur yap" tasarımın rengini bozar mı? Önce mevcut renge en yakın ve eşiği geçen rengi seçer, böylece değişiklik en az olur. Sonuç beğenmezseniz geri alıp rengi ya da konturu elle ayarlayabilirsiniz.
Kontur baskıda sorun çıkarır mı? Hayır. Kontur metinle birlikte vektör olarak çizilir ve PDF/X-4, SVG ve EPS çıktılarında keskin kalır.