İçeriğe geç

Ders GT-02 · Grafik Tasarım ve Marka Kimliği

Okunabilir renkli metin

UygulamaBeceri ve yöntem, adım adım

Temel · 1.357 kelime · yaklaşık 6 dakika okuma · seslendirme 10 dk

Bu dersin sonunda: metin ve zemin rengi çiftlerini okunabilirliğe göre seçer.

Önerilen ön ders: UX-06 Kontrast oranı nasıl hesaplanır? WCAG

  • değer kontrastı
  • renk sapması
  • ince yazı
  • foveal tritanopi
  • titreşen çift
  • kontur
Önce özete göz atDersin sonundaki özet, okumaya başlamadan önce yol haritası olarak.
  1. Renkli metnin okunabilirliğini değer kontrastı belirler; gri tonlama testi, metnin tondan bağımsız olarak okunup okunmadığını gösterir.
  2. Kırmızı zeminde mavi yazı gözü yorar, çünkü açıklıkları yakındır, göz iki rengi farklı uzaklıklara odaklar ve renk stereopsisiyle kenarlar titreşir.
  3. İnce ve küçük yazıda renk kaybolur; renkli zeminde beyaz metin yalnız zemin koyuysa çalışır ve farklı tenlerin üzerindeki metin için kontur ya da gölge, herkes için aynı okunabilirliği sağlar.

Kısa cevap

Renkli bir metni okunabilir yapan şey tonu değil, zeminle arasındaki açıklık farkıdır; ton farkı tek başına harflerin biçimini taşımaz. Kırmızı zemin üzerinde mavi yazı gözü yorar, çünkü iki rengin açıklıkları birbirine yakındır, göz kırmızıyı ve maviyi farklı uzaklıklara odaklar ve kenarlar titreşiyor, havada duruyor gibi görünür. İnce yazı tiplerinde ve küçük boyutlarda renk daha da çabuk kaybolur; bu yüzden renkli metinde önce değeri, sonra kalınlığı ve boyutu, en son tonu düşünmek gerekir.

Önce değer, sonra ton

DT-01'de her rengin bir tonu, bir doygunluğu ve bir değeri olduğunu gördük. Metinde bu üç boyuttan biri öbürlerinden çok daha önemlidir. Harflerin biçimi, yani bir "a" ile bir "o" arasındaki fark, gözün açıklık farklarını izleyen sisteminde çözülür. Renk bilgisi bu işte ikinci plandadır.

Bunun pratik bir sınaması vardır: metni gri tonlamaya çevirmek. Gri tonlamada yazı hâlâ rahatça okunuyorsa, renk yalnız bir süs katmanıdır ve okunabilirliği taşıyan değer farkı yerindedir. Yazı griye döndüğünde zeminle kaynaşıyorsa, ton farkı ne kadar çarpıcı olursa olsun metin gerçek hayatta zorlanacaktır. Bu farkın sayısal ölçümü, yani kontrast oranının nasıl hesaplandığı, UX-06'nın konusudur.

Normal görüşte, açıklık farkı yeterli olduğunda rengin okuma hızına etkisi küçüktür. Legge ve Rubin 1986'da, açıklıkları eşitlenmiş mavi, yeşil, kırmızı ve gri metinlerle yaptıkları deneyde, normal gören katılımcıların okuma hızının renkten bağımsız olduğunu, bunun istisnasının görme keskinliği sınırına yakın küçük harfler olduğunu buldu. Az gören katılımcıların bazılarında ise renk belirgin fark yarattı ve kırmızı ya da mavi metin genellikle daha yavaş okundu.

Kırmızı zemin, mavi yazı

Kartın sorusu, renkli metnin en bilinen tuzaklarından birini sorar: kırmızı zemin üzerinde mavi yazı neden gözü yorar?

Birinci neden değerdir. Ekranın saf kırmızısı ile saf mavisi arasındaki kontrast oranı, UX-06'daki formülle hesaplandığında yalnız 2,15:1'dir; büyük başlıklar için bile istenen 3:1'e ulaşmaz. Göz, harf biçimini çözmek için gereken açıklık farkını bulamaz.

İkinci neden gözün optiğidir. Bir prizmanın beyaz ışığı açması gibi, gözdeki kornea ve mercek de ışığı dalga boyuna göre farklı bükerek odaklar: mavi, kırmızıya göre daha kısa bir mesafede, retinanın biraz önünde toplanır. Bu farka renk sapması denir ve görünür tayfın iki ucu arasında yaklaşık iki diyoptri kadardır. Gözümüz kırmızı zemine odaklandığında mavi harfler biraz bulanık kalır; harflere odaklandığında zemin bulanıklaşır. Göz, ikisini birden net göremediği için odaklamayı sürekli değiştirir ve bu yorucudur.

Üçüncü neden derinlik yanılsamasıdır. DT-05'te gördüğümüz renk stereopsisi aynı optik farktan doğar: pek çok kişiye kırmızı öne, mavi geriye çıkıyor gibi görünür. Mavi harfler kırmızı zeminin içine gömülmüş ya da onun arkasında yüzüyor gibi algılanır. Açıklıkları yakın iki doygun rengin sınırındaki titreşimle birleşince, DT-08'in "titreşen sınırlar" diye andığı huzursuz görüntü ortaya çıkar.

İnce yazı ve küçük boyutta renk kaybı

Renk, küçük ve ince biçimlerde çabuk kaybolur. Bir başlıkta canlı görünen turuncu, aynı rengin ince bir gövde metninde soluk ve kararsız bir kahverengiye döner. Bunun iki nedeni vardır.

Birincisi, çok ince bir çizgi, yanındaki zeminle göze karışık gelir; harf gövdesi yeterince geniş değilse, gözün her noktası hem harfin hem zeminin rengini aynı anda alır ve renk seyrelir. İkincisi, retinanın tam merkezinde, en keskin gördüğümüz küçük bölgede kısa dalgalara duyarlı konilerin çok az olmasıdır. Williams, MacLeod ve Hayhoe 1981'de, çok küçük uyaranlarla bu bölgenin mavi ile sarı arasındaki farkları neredeyse göremediğini gösterdi. Bu etkiye foveal tritanopi denir.

Pratik sonuç açıktır: ince ve küçük yazıda rengi taşımak zordur, özellikle mavi ile sarı ya da mavi ile beyaz arasındaki farkları. Renkli metin kullanılacaksa daha kalın bir yazı ağırlığı ve daha büyük bir boyut seçmek, rengin görünür kalmasını sağlar. Gövde metni için ise nötr ve koyu bir renk, rengi başlıklara ve vurgulara bırakmak genellikle daha güvenlidir.

Renkli zeminde beyaz metin

Renkli bir zemin üzerinde beyaz metin, özellikle düğmelerde, etiketlerde ve afişlerde sık kullanılır. Beyaz, her tonun üzerinde "nötr" durduğu için güvenli bir seçim gibi görünür. Ama beyaz metnin okunabilirliği, zeminin tonuna değil açıklığına bağlıdır.

Koyu zeminlerde, lacivertte, bordoda, koyu yeşilde, beyaz metin rahat okunur. Parlak zeminlerde, sarıda, turuncuda, camgöbeğinde, beyaz metin zeminle kaynaşır; UX-06'da saf turuncu üzerinde beyazın kontrast oranının yalnız 2,33:1 olduğunu gördük. Çözüm çoğu zaman zemini değiştirmek değil, zeminin daha koyu bir biçimini seçmek ya da metni koyu yapmaktır. Sarı bir etikette koyu kahve ya da siyah bir metin, beyaz bir metinden çok daha okunur.

Örnek — farklı tenlerin üzerindeki altyazı

Bir video ekibi, röportajların altyazılarını renkli zeminsiz, doğrudan görüntünün üzerine yazıyor. Altyazı çoğu zaman konuşan kişinin boynunun, omzunun ya da elinin üzerine düşüyor.

Düz beyaz altyazı, açık tenli birinin boynunun üzerinde, arkadaki parlak bir duvarın önünde neredeyse kaybolur; koyu tenli birinin üzerinde ise rahat okunur. Düz siyah bir altyazı tam tersini yapar. Tek bir renk, farklı tenlerin önünde farklı okunabilirlik verir. UX-06'da başlığın arkasına koyu bir şerit koymayı görmüştük; altyazıda daha hafif bir çözüm de vardır: harflerin çevresine ince, koyu bir kontur ya da hafif bir gölge vermek.

Beyaz harf ve koyu kontur, harfin her kenarında iki uç açıklık yan yana gelir. Böylece zemin açık bir ten, koyu bir ten ya da parlak bir gökyüzü olsa da harfin biçimi korunur. Bu çözüm, altyazıyı tek bir kişinin tenine göre ayarlamak yerine, ekrandaki herkes için aynı okunabilirliği sağlar.

Sık yapılan yanlış

Yaygın yanlış"Farklı tonlar yeterince kontrast sağlar."
Doğrusu

Ton farkı, harflerin biçimini taşımaz; açıklıkları yakın iki renk, tonları ne kadar farklı olursa olsun, gri tonlamada aynı griye döner ve okunmaz.

Yaygın yanlış"Renkli bir başlık rengi, gövde metninde de aynı etkiyi verir."
Doğrusu

İnce ve küçük harflerde renk seyrelir ve özellikle mavi ile sarı arasındaki farklar kaybolur; aynı renk küçük metinde soluk ve kararsız görünür.

Özet

  1. Renkli metnin okunabilirliğini değer kontrastı belirler; gri tonlama testi, metnin tondan bağımsız olarak okunup okunmadığını gösterir.
  2. Kırmızı zeminde mavi yazı gözü yorar, çünkü açıklıkları yakındır, göz iki rengi farklı uzaklıklara odaklar ve renk stereopsisiyle kenarlar titreşir.
  3. İnce ve küçük yazıda renk kaybolur; renkli zeminde beyaz metin yalnız zemin koyuysa çalışır ve farklı tenlerin üzerindeki metin için kontur ya da gölge, herkes için aynı okunabilirliği sağlar.

Kendini sına

  1. (Kolay) Renkli metnin okunabilirliğini en çok hangi boyut belirler?
  2. (Kolay) Renk sapması nedir?
  3. (Orta) Kırmızı zemin üzerinde mavi yazı neden gözü yorar?
  4. (Orta) Sarı bir etikette beyaz metin yerine hangi metin rengi daha okunur olur ve neden?
  5. (Zor) İnce ve küçük yazıda renk neden kaybolur?
  6. (Zor) Farklı tenlerden kişilerin üzerine düşen altyazı için neden tek bir düz renk yetmez ve kontur bu sorunu nasıl çözer?

Cevaplar

  1. Değer, yani metin ile zemin arasındaki açıklık farkı («Önce değer, sonra ton»).
  2. Bir merceğin farklı dalga boylarını farklı güçte kırması ve farklı renkleri farklı uzaklıklara odaklaması; insan gözünde görünür tayfın iki ucu arasında yaklaşık iki diyoptrilik odak farkı yaratır («Kırmızı zemin, mavi yazı»).
  3. Kırmızı ile mavinin açıklıkları birbirine yakındır ve kontrast oranları yalnız 2,15:1'dir; göz mavi ile kırmızıyı farklı uzaklıklara odakladığı için ikisini birden net göremez ve sürekli odak değiştirir; renk stereopsisi de kenarları titreşiyor gibi gösterir («Kırmızı zemin, mavi yazı»).
  4. Koyu kahve ya da siyah; sarı parlak bir zemindir ve beyazla açıklık farkı çok azdır, koyu bir metin ise güçlü bir değer kontrastı kurar («Renkli zeminde beyaz metin»).
  5. İnce harf gövdesinde gözün her noktası harfin ve zeminin rengini birlikte alır ve renk seyrelir; ayrıca retinanın merkezinde kısa dalga konileri çok az olduğu için küçük uyaranlarda mavi ile sarı arasındaki farklar görülemez («İnce yazı ve küçük boyutta renk kaybı»).
  6. Tek bir düz renk, açık bir tenin önünde bir açıklık farkı, koyu bir tenin önünde başka bir fark verir; bazı zeminlerde kaybolur. Beyaz harf ve koyu kontur, harfin her kenarında iki uç açıklığı yan yana getirir ve zemin ne olursa olsun harf biçimini korur («Örnek — farklı tenlerin üzerindeki altyazı»).

Kaynaklar

  • Legge, G. E. ve Rubin, G. S., «Psychophysics of reading. IV. Wavelength effects in normal and low vision», Journal of the Optical Society of America A 3(1): 40–51, 1986.
  • Thibos, L. N., Ye, M., Zhang, X. ve Bradley, A., «The chromatic eye: a new reduced-eye model of ocular chromatic aberration in humans», Applied Optics 31(19): 3594, 1992.
  • Williams, D. R., MacLeod, D. I. A. ve Hayhoe, M. M., «Foveal tritanopia», Vision Research 21(9): 1341–1356, 1981.

Sonraki adım

GT-03 tek tek harflerden bütün sayfaya geçiyor: bir düzende hangi öğenin ilk okunacağını rengin nasıl belirlediğini, sayfanın büyük kısmını sakin bırakmanın vurguyu neden güçlendirdiğini ve bir düzeni bilerek bulanık görüntüleyip neyin öne fırladığına bakma yöntemini anlatıyor. GT-04 ise renk seçimini bir marka ölçeğine taşıyor: rakip analizi, sektör kodlarına uymak ya da onlardan ayrılmak ve bir paletin hem ekranda hem baskıda çalışması üzerine.

Laboratuvarda dene

Bu derste anlatılanı Renk Laboratuvarı’nda ölçülebilir bir hedefle dene. Görev, hedefe ulaştığında kendiliğinden tamamlanır.

Tamamlanan görevler yalnız bu tarayıcıda kaydedilir.

Anlamadığın bir yer mi var?

Mentor yalnız bu dersin metnine dayanarak cevap verir. Metinde geçmeyen bir şey sorarsan uydurmaz, geçmediğini söyler.

Animasyon ve seslendirme notları

Animasyon ve seslendirme notları

Video akışı

  • 0:00–0:30 Kanca: Kırmızı zemin üzerinde mavi bir kelime titreşir; izleyiciden onu okuması istenir.
  • 0:30–2:00 Hikâye: Aynı kelime gri tonlamaya çevrilir ve neredeyse kaybolur.
  • 2:00–6:00 Açıklama: Gözün kesitinde mavi ve kırmızı ışınlar farklı noktalara odaklanır; ardından ince ve kalın harflerde aynı turuncunun farklı görünmesi, retinanın merkezinde mavi konilerin azlığı.
  • 6:00–7:00 Aha anı: Sarı etikette beyaz ve siyah yazı yan yana; gri tonlamada fark hemen görünür.
  • 7:00–8:30 Gerçek dünya: Röportaj altyazısı farklı tenlerden kişilerin üzerinde; düz beyaz ve düz siyah bazılarında kaybolur, konturlu beyaz hepsinde okunur.
  • 8:30–9:30 Yanlış bilinen: "Farklı ton = kontrast" cümlesinin üstü çizilir.
  • 9:30–10:00 Kapanış: sıradaki iki dersin kodları ekrana gelir.

Görsel notları

  • Kontrast oranları formülle hesaplanmış değerlerdir; ekranda renk kodlarıyla birlikte gösterilir.
  • Göz kesiti özgün, şematik bir çizimdir; ölçekli değildir.
  • Röportaj sahnesindeki kişiler özgün illüstrasyon ya da izinli çekimdir.