Herkesin okuyabildiği grafikler

Kısa cevap

Bir grafik, renk görme eksikliği olan okurlar için de okunabilir olmalıdır ve bunun en güçlü yolu, rengi tek başına bırakmamaktır: kırmızı ile yeşili karşı karşıya koymamak, her seriyi grafiğin köşesindeki bir lejanttan değil kendi yanındaki bir adla tanıtmak, çizgilere farklı işaretçi şekilleri ve alanlara desenler eklemek ve bitmiş grafiği bir renk görme benzetiminden geçirmek. Lejant yerine doğrudan etiketleme daha erişilebilirdir, çünkü okurdan küçük bir renk karesini uzaktaki ince bir çizgiyle renk üzerinden eşleştirmesini istemez; kırmızı ile yeşili ayırt edemeyen biri için bu eşleştirme tahmine dönerken, çizginin yanında duran ad, renk hiç görülmese de okunur.

Lejantın gizli yükü

Lejant, grafiklerin en tanıdık parçalarından biridir ve çoğu zaman düşünülmeden eklenir. Ama bir lejantı kullanmak, okurdan küçük bir iş ister. Okur önce bir çizgiye bakar, rengini aklında tutar, gözünü lejanta götürür, o rengi küçük karelerin arasında bulur, yanındaki adı okur ve çizgiye geri döner. Beş seriden oluşan bir grafikte bu gidip gelme her bakışta tekrarlanır.

Bu iş, renk görmesi tipik olan biri için bile yorucudur, çünkü lejanttaki kare küçüktür ve çizgi incedir; küçük renk alanlarını birbirinden ayırt etmek büyük alanlardan zordur. Renk görme eksikliği olan biri içinse iş bir tahmine dönüşür. BI-12'deki tarama sonuçlarına göre Avrupa kökenli erkeklerin yaklaşık yüzde sekizinde bu eksen zayıftır ve bu okurlar için lejanttaki kırmızı kare ile yeşil kare aynı renk olabilir.

Kartın sorusunun cevabı burada: lejant yerine doğrudan etiketleme daha erişilebilirdir, çünkü eşleştirme işini ortadan kaldırır. UX-07'de tanımladığımız doğrudan etiketleme, adı çizginin ucuna ya da alanın içine taşır. Okur bir çizgiye baktığında adını da okur; renk yalnız çizgileri birbirinden ayırmaya yardım eder, hangi çizginin ne olduğunu söyleme yükünü taşımaz. Ton kaybolsa, ekran griye dönse ya da sayfa tek renkle basılsa bile ad orada okunmayı bekler.

Kırmızı–yeşil çifti

Grafiklerde en sık görülen renk tuzağı, kırmızı ile yeşili karşıt anlamlar için kullanmaktır: artış yeşil, düşüş kırmızı; hedefe ulaşan yeşil, ulaşamayan kırmızı. Bu eşleme, UX-02'de gördüğümüz durum renkleri geleneğinden gelir ve renk görmesi tipik olan okur için sezgiseldir. Ama iki renk, en sık görülen eksikliğin ayırt edemediği eksenin iki ucunda durur.

Hesap bunu açıkça gösterir. Machado, Oliveira ve Fernandes'in 2009'da yayımladığı fizyolojiye dayalı renk görme eksikliği modeli, bir rengin farklı eksikliklerde nasıl görünebileceğini yaklaşık olarak hesaplar. Bu modeli uygulayan açık kaynak bir kütüphaneyle yapılan hesapta, orta tonlarda bir kırmızı, #D23C3C, ile orta tonlarda bir yeşil, #3CA03C, arasındaki algısal fark, CIELAB'daki ΔE ile ölçüldüğünde yaklaşık 55'tir; bu, iki rengin çok açık biçimde farklı olduğu anlamına gelir. Aynı iki renk tam döteranopi benzetiminden geçirildiğinde fark yaklaşık 4'e düşer: iki renk neredeyse aynıdır. Protanopi benzetiminde fark yaklaşık 24'e iner; ayrım zayıflar ama kaybolmaz.

Aynı hesap, daha güvenli bir çiftin nasıl davrandığını da gösterir. Bir turuncu, #E07B00, ile bir mavi, #2F6FDB, arasındaki fark yaklaşık 66'dır ve döteranopi benzetiminde yaklaşık 65 olarak kalır. Turuncu ile mavi, kırmızı–yeşil eksikliğinin bozmadığı mavi–sarı ekseninde ayrışır. Bu yüzden karşıt iki anlam için turuncu–mavi, kırmızı–yeşilden çok daha dayanıklı bir çifttir.

Renk körü dostu paletler

Bu tür paletlerin tanınmış bir örneği, Masataka Okabe ve Kei Ito'nun «Color Universal Design» adlı kılavuzudur. İki yazar da kılavuzda kendilerini güçlü protanop olarak tanıtır. Kılavuz, hem renk görme eksikliği olanlar hem de olmayanlar için belirsizlik taşımayan bir renk kümesi önerir ve seçimlerini açıklar: yeşil için, kırmızı ya da kahverengiyle karışmasın diye mavimsi bir yeşil; menekşe maviye çok yakın göründüğü için kırmızımsı bir mor seçilir; gök mavisi ile koyu mavi, açıklık ve doygunluktaki farkla ayrılır.

Kılavuzun bir uyarısı özellikle önemlidir: renk körü dostu bir palet bile, çok sayıda seri olduğunda ya da seriler ince çizgilerle çizildiğinde tek başına yetmez. Palet ayrımı kolaylaştırır; etiketler, şekiller ve desenler ise ayrımı renkten bağımsız kılar.

Şekiller ve desenler

UX-07'deki çift kodlama ilkesi, grafiklerde iki araçla uygulanır.

Çizgi grafiklerinde her seriye farklı bir işaretçi şekli vermek, bir çizginin rengini kaybetse bile tanınmasını sağlar. Kesikli ve düz çizgiler de aynı işi görür. Çubuk ve alan grafiklerinde desenler, özellikle tek renkli çıktılarda ve çoğaltılmış kopyalarda, renklerin kaybolduğu yerde ayrımı korur. Bu araçlar dikkatli kullanılmalıdır: çok yoğun desenler grafiği kalabalıklaştırır ve okumayı zorlaştırır. Genellikle iki ya da üç seri için hafif desenler, daha fazla seri için doğrudan etiketler daha iyi sonuç verir.

Benzetimle sınamak

Bir grafiğin erişilebilir olup olmadığını anlamanın en hızlı yolu, onu bir renk görme benzetiminden geçirmektir. UX-08'de gördüğümüz tarayıcı araçları ve grafik kütüphanelerinin benzetim işlevleri, bir grafiği protanopi, döteranopi ve tritanopi için yaklaşık olarak gösterebilir. Benzetimde iki seri birleşiyorsa, bu seriler renk dışında bir kanalla da ayrılmalıdır.

Benzetimin sınırı UX-08'de anlatıldı: bir model gerçek okurun deneyiminin yerini tutmaz. Ama bir grafiğin açıkça başarısız olduğu durumları, kırmızı–yeşil çiftinin döteranopi benzetiminde üst üste binmesi gibi, bir dakikada ortaya çıkarır. Gri tonlama testi de aynı işi açıklık için yapar: gri tonlamada ayırt edilemeyen iki seri, yalnız tonla ayrılıyordur.

Örnek — tenlere göre pozlama grafiği

Bir fotoğraf makinesi üreticisinin kalite ekibi, otomatik pozlamanın farklı tenlerden insanların yüzlerinde ne kadar isabetli olduğunu gösteren bir çizgi grafiği hazırlıyor. Grafikte dört çizgi var; her biri, açıktan koyuya dört ten grubundan birinin ortalama pozlama hatasını gösteriyor. İlk taslakta dört çizgi, gruplara «uysun» diye, tene benzeyen dört kahverengi-turuncu tonla çizilmiş ve anlamları bir köşedeki lejantta verilmiş.

Hesap, bu seçimin iki sorunu olduğunu gösteriyor. Dört çizgi renginin birbirinden algısal farkı, renk görmesi tipik okur için bile yalnız yaklaşık 4 ile 15 arasında; en yakın iki renk neredeyse aynı. Döteranopi benzetiminde bu farklar pek değişmiyor, çünkü sorun renk körlüğünden önce gelir: renkler zaten birbirine çok benzer seçilmiştir. İlginç olan, gerçek ten tonlarının kendilerinin böyle olmamasıdır: ölçtüğümüz dört ten örneğinin, en açıktan en koyuya, komşu farkları yaklaşık 21 ile 23 arasındadır ve benzetimden sonra da korunur, çünkü bu tonlar birbirinden en çok açıklıkla ayrılır. Ama ekip çizgilere gerçek tenleri değil, onlara «benzeyen», açıklığı birbirine yakın tonları vermiştir. VG-01'de gördüğümüz gibi, ten renklerini grup etiketi olarak kullanmak ayrıca grupları bir merdivene dizilmiş gibi gösterir.

Ekip grafiği yeniden kuruyor. Dört çizgi, renk körü dostu bir paletten, sıcak ve soğuk renkler dönüşümlü olacak biçimde seçilen dört renkle çiziliyor. Her çizgiye farklı bir işaretçi şekli veriliyor ve lejant kaldırılıp her çizginin sağ ucuna grubun adı yazılıyor. Sonuç, renk görme benzetimlerinde, gri tonlamada ve siyah beyaz baskıda deneniyor; dört grup her durumda ayrı okunuyor.

Sık yapılan yanlış

Özet

1. Lejant okurdan renk eşleştirmesi ister ve bu, renk görme eksikliği olan okur için tahmine dönüşür; doğrudan etiketleme eşleştirmeyi ortadan kaldırdığı için daha erişilebilirdir.
2. Karşıt anlamlar için seçilen kırmızı ile yeşil, döteranopide neredeyse tek renge iner; turuncu–mavi gibi çiftler ve Okabe ve Ito'nun önerdiği gibi açıklık ve doygunlukla da ayrılan renk körü dostu paletler daha dayanıklıdır.
3. İşaretçi şekilleri ve desenler çift kodlama sağlar, benzetim ve gri tonlama testi kaybolan ayrımları ortaya çıkarır; gruplara tene «benzeyen» renkler vermek herkes için ayrımı zayıflatır ve olmayan bir sıra ima eder.

Kendini sına

1. (Kolay) Lejant nedir?
2. (Kolay) Okabe ve Ito, ince çizgiler ve küçük nesneler için hangi renkleri önerir?
3. (Orta) Lejant yerine doğrudan etiketleme neden daha erişilebilirdir?
4. (Orta) Turuncu–mavi çifti neden kırmızı–yeşil çiftinden daha dayanıklıdır?
5. (Zor) Döteranopi benzetiminde kırmızı–yeşil çiftinin algısal farkı ne kadar değişir ve bu grafik tasarımı için ne anlama gelir?
6. (Zor) Pozlama grafiğindeki tene benzeyen dört çizgi rengi neden renk görmesi tipik okur için bile sorunludur ve ekip grafiği nasıl düzeltir?

Cevaplar

1. Bir grafikteki renklerin, desenlerin ya da işaretçilerin neyi temsil ettiğini açıklayan, grafiğin köşesinde ya da dışında duran anahtar («Lejantın gizli yükü»).
2. Gök mavisi ve sarı yerine daha koyu mavi ve turuncu («Renk körü dostu paletler»).
3. Lejant okurdan küçük bir renk karesini uzaktaki ince bir çizgiyle renk üzerinden eşleştirmesini ister; renk görme eksikliği olan okur için bu eşleştirme tahmine döner. Doğrudan etiketlemede ad çizginin ucunda okunur; ton kaybolsa, ekran gri olsa ya da grafik siyah beyaz basılsa da okunur («Lejantın gizli yükü»).
4. Turuncu ve mavi, kırmızı–yeşil eksikliğinin bozmadığı mavi–sarı ekseninde ayrışır; hesapta farkları yaklaşık 66'dan 65'e iner, kırmızı–yeşil ise 55'ten 4'e düşer («Kırmızı–yeşil çifti»).
5. Fark yaklaşık 55'ten 4'e iner ve iki renk neredeyse aynı görünür. Karşıt anlamlar kırmızı–yeşille gösterilmemeli ya da renk dışında yön okları, simgeler veya etiketlerle de verilmelidir («Kırmızı–yeşil çifti»).
6. Dört renk, açıklıkları birbirine yakın kahverengi-turuncu tonlar olarak seçildiği için birbirinden yalnız yaklaşık 4 ile 15 arasında farklıdır; sorun benzetimden önce vardır. Ayrıca ten renklerini grup etiketi yapmak olmayan bir sıra ima eder. Ekip renk körü dostu bir paletten dört renk seçer, farklı işaretçi şekilleri ekler, lejantı kaldırıp adları çizgilerin ucuna yazar ve sonucu benzetim, gri tonlama ve siyah beyaz baskıyla sınar («Örnek — tenlere göre pozlama grafiği»).

Kaynaklar

• Machado, G. M., Oliveira, M. M. ve Fernandes, L., «A Physiologically-based Model for Simulation of Color Vision Deficiency», IEEE Transactions on Visualization and Computer Graphics, 15(6), 2009, s. 1291–1298.
• Masataka Okabe ve Kei Ito, «Color Universal Design (CUD): How to make figures and presentations that are friendly to Colorblind people», 2002 (2008 güncellemesi).
• Nathaniel J. Smith ve katkıda bulunanlar, «colorspacious», açık kaynak Python kütüphanesi.

Sonraki adım

PZ-01 renk kararını grafikten markaya taşıyor: bir markaya renk seçerken kategoriye uygunluk algısı üzerine yapılan araştırmaların ne söylediğini, rakiplerden ayrışmanın ve bir rengi yıllarca tutarlı kullanmanın neden en az ilk seçim kadar önemli olduğunu bir karar ağacı üzerinden tartışıyor. HS-01 ise bu derste bir kütüphaneye yaptırdığımız hesabın içine giriyor: sRGB'den doğrusal RGB'ye, XYZ'ye, Lab'e ve OKLab'e dönüşüm yapan kodu adım adım yazmayı ve gamma kodu çözülmeden yapılan bir matris çarpımının neden yanlış sonuç verdiğini gösteriyor.