Grafikleri Renk Körlüğüne Uygun Hale Getirme

Bir grafik teknik olarak doğru olabilir ve yine de okuyucunun anlamasını engelleyebilir. Alışılmış suçlu, tüm işi rengin yüklenmesidir: kırmızı çizgi bir şeyi, yeşil çizgi başka bir şeyi anlatır ve tek anahtar açıklama kutusudur. Renk görme kusuru olan kişiler için — ve grafiği parlama altında, kötü bir ekranda ya da tek renkte görenler için — bu gereksiz bir güçlük yaratır.

Çözüm renk kullanmayı bırakmak değildir. Rengi birkaç ipucundan biri olarak kullanın. Bu rehber, bu ilkeyi grafikler, panolar, haritalar ve bilgi grafikleri için pratik kararlara dönüştürür.

Temel kural: renk tek ipucu olamaz

WCAG Başarı Ölçütü 1.4.1, rengin bilgiyi aktarmak, bir eylemi belirtmek, yanıt istemek ya da görsel bir öğeyi ayırt etmek için kullanılan tek görsel araç olmamasını şart koşar. Veri grafiklerinde bu, okuyucunun kategorileri, dizileri, durumları ya da anlamı bir tonu tanımadan ayırt edebilmesi demektir.

İyi alternatifler:

Doğrudan metin etiketleri ve değerler
Çizgi ya da noktalarda farklı işaretçi şekilleri
Düz, kesik ve noktalı çizgi biçimleri
Çubuklarda ve alanlarda desenler, dokular ya da dış çizgiler
Açık simgeler ve açıklayıcı açıklama metni
Aynı temel bilgiyi veren bir veri tablosu ya da metin özeti

En iyi birleşim, grafik türüne ve okuyucunun hızlı bir genel bakış mı yoksa kesin değerler mi istediğine bağlıdır.

Grafiği sorunun etrafında kurun

Renkleri seçmeden önce grafiğin ana iletisini tek cümleyle yazın. Örneğin: “Satışlar tüm bölgelerde arttı, en güçlü büyüme batıda oldu.” Sonra grafik gri tonlarında görülseydi okuyucunun bu soruyu yanıtlayıp yanıtlayamayacağını denetleyin.

Yanıt hayırsa renk dışı bir ipucu ekleyin. Bu tek sınama, en sık yapılan erişilebilirlik hatasını yakalar: çekici görünen ama bilgiyi yalnızca tonla kodlayan bir palet kullanmak.

Uzaktaki açıklama kutusundan önce doğrudan etiketler

Açıklama kutuları, okuyucuyu küçük bir renk örneğini grafik öğesiyle eşleştirmeye zorlar; bu kimi zaman defalarca yinelenir. Renkler benzerse ya da çizgiler kesişiyorsa bu daha da zorlaşır. Yer varsa diziyi çizginin ucunda etiketleyin, değerleri çubukların yanına koyun ya da önemli noktayı doğrudan işaretleyin.

Örneğin, altta açıklama kutusu bulunan mavi, turuncu ve yeşil çizgiler yerine her çizginin son noktasının yanına kategori adını yazın. Etiketi başka bir diziyle karıştırılmayacak kadar yakın tutun. Renk yardımcı olmayı sürdürür, ama tanımlamayı metin yapar.

Yedek ipuçlarını grafik türüne uydurun

Çizgi grafikleri

Çizgi biçimi, işaretçi şekli ve uç etiketlerini birlikte kullanın. Daireli düz bir çizgi, kareli kesik bir çizgi ve üçgenli noktalı bir çizgi, renkleri benzer görünse bile ayırt edilebilir kalır.

Tek grafikte çok fazla dizi bulundurmaktan kaçının. Dizi çoksa, okuyucudan yoğun bir açıklama kutusunu çözmesini beklemek yerine küçük çoklu grafikler — tutarlı ölçekli ayrı grafikler — kullanmayı düşünün.

Çubuk grafikleri

Doğrudan kategori etiketleri ve değerler kullanın. Çubuklar aynı grup içinde ayırt edilmesi gereken kategorileri temsil ediyorsa, rengin yanı sıra desen ya da belirgin bir dış çizgi ekleyin. W3C’nin G111 tekniği, çubuklarda renk ile deseni birlikte kullanmayı özellikle anlatır.

Yığılmış çubuklarda mümkün olduğunda segmentleri doğrudan etiketleyin ve destekleyici bir tablo sunun. İnce segmentleri okumak, iyi bir paletle bile herkes için zordur.

Saçılım ve balon grafikleri

İşaretçi şekillerini renkle eşleştirin; işaretçilerin kaybolmaması için yeterli boyut ve karşıtlık kullanın. Dolgu açıksa ya da arka plan yoğunsa noktalara kenarlık ekleyin. Noktalar üst üste biniyorsa filtreleme, veri tablosu ya da grupları ayıran ikinci bir görünüm sunun.

Haritalar ve ısı haritaları

Dolgu renginin yanında etiketler, sınırlar, simgeler ya da desenler kullanın. Örneğin bir toplu taşıma haritası, her hat rengini ayırt edici bir durak işaretiyle eşleştirebilir. Koroplet haritada asıl iletiyi yalnızca ince bir açıktan koyuya geçişe bağlamayın; görünür bir ölçek, değerler ve bir tablo ya da metin çıkarım ekleyin.

Yalnızca farklı tonlar için değil, karşıtlık için tasarlayın

Renkler tonda farklı ama açıklıkta benzer olabilir; böylece gri tonlarında ya da bir renk görme farkı altında birbirine karışır. Karşıtlık özellikle ince çizgiler, küçük işaretçiler, grafik sınırları ve metin için önemlidir.

Grafiği anlamak için gerekli metin dışı görsel nesnelerde, WCAG’nin metin dışı karşıtlık yönergesi genellikle bitişik renklere göre 3:1 eşiği kullanır. Bağlam önemlidir ve bir etiket ya da eşdeğer tablo, okuyucunun grafiği tek başına ayırt etmesini gerektirmeden bilgiyi aktarabilir. Karşıtlık denetimini, etiketlerin ve yedek ipuçlarının yerine geçen bir şey değil, tasarım incelemesinin bir parçası olarak görün.

Arayüz metni ve basit görsel öğeler için ön plan/arka plan karşıtlığını incelemek üzere kontrast denetleyiciyi kullanın. Ardından grafiğin tamamını inceleyin: gerçek düzenler, tek bir renk çifti denetiminin yakalayamayacağı bitişiklikler, ince çizgiler, üzerine gelme durumları ve katmanlar getirir.

Okuyuculara resmin arkasındaki veriyi verin

Grafikler özettir, veriye erişimin yerine geçmez. Bir grafik önemli bir karar ya da iddia taşıyorsa şunlardan birini ya da birkaçını ekleyin:

Kategorileri ve değerleri içeren, yakında duran bir tablo
Ana çıkarımın kısa yazılı bir özeti
CSV gibi erişilebilir bir indirme
Karmaşık görsel ilişkiler için uzun bir açıklama
Etkileşimli grafiklerde klavyeyle erişilebilir ipuçları ya da odaklanılabilir bir veri görünümü

Bu, hem ekran okuyucu kullananlar hem de her görsel kodlamayı ayırt edemeyenler için kullanılabilirliği artırır. Ayrıca okuyucunun, çubuk yüksekliklerini ya da pasta dilimlerini tahmin etmeden iletiyi doğrulamasını sağlar.

Uygulanabilir bir grafik inceleme listesi

Bir rapor, sunum, ürün panosu ya da makale yayımlamadan önce şunları kullanın:

Başlık, grafiğin neyle ilgili olduğunu ve dönemi belirtiyor mu?
Her dizi ya da kategori yalnızca renge dayanmadan tanımlanabiliyor mu?
Temel değerler etiketlenmiş, bir tabloda mevcut ya da yakındaki metinde açıklanmış mı?
Çizgiler, işaretçiler, çubuklar ve açıklama öğeleri, birbirine değdikleri ya da bindikleri yerde yeterli karşıtlığa sahip mi?
Etiketler olağan yakınlaştırmada ve küçük ekranda okunabiliyor mu?
Grafik, metin ya da simge olmadan “iyi” ve “kötü” gibi belirsiz kırmızı/yeşil durum etiketlerinden kaçınıyor mu?
Klavye kullanan biri etkileşimli grafiğin bilgisine erişebiliyor mu?
Gri tonlarında ya da renk görme benzetimiyle yapılan inceleme belirsiz öğeler ortaya çıkarıyor mu?

Gerçek içerikle ve gerçek insanlarla sınayın

Otomatik denetimler ve benzetimler yararlı erken uyarı araçlarıdır, ancak bir grafiğin herkes için işe yaradığının kanıtı değildir. Bitmiş grafiği gerçek boyutunda, görüneceği ürün ya da belge içinde sınayın. Bir katılımcıdan yönlendirme olmadan en önemli diziyi, en yüksek değeri ve ana çıkarımı belirtmesini isteyin.

Renk görme simülatörümüz, tasarımcıların bir görselin birkaç yaygın renk görme farkında nasıl görünebileceğini incelemesine yardımcı olabilir. Onu kullanıcı araştırmasının ya da WCAG değerlendirmesinin yerine geçen bir şey değil, ek bir inceleme adımı olarak görün.

Daha geniş arayüz rehberliği için renk körlüğü için tasarım yazısına bakın.

Örnek: bir durum grafiğini iyileştirmek

Beş bölümün yer aldığı bir pano düşünün: yeşil çubuklar hedefte, kırmızı çubuklar hedefin gerisinde, sarı çubuklar risk altında anlamına geliyor. Daha erişilebilir bir sürüm şunları yapabilir:

Her çubuğa durum sözcüğünü ekleyin: “Hedefte”, “Risk altında” ya da “Geride”.
Etikette bir simge kullanın — onay işareti, uyarı üçgeni ya da ok — ve onu açıklayan bir metin ekleyin.
İkinci bir görsel ipucu olarak desen ya da dış çizgi kullanın.
Gerçek yüzdeyi ve hedef değeri gösterin.
Grafiğin altında bölüm, güncel değer, hedef ve durumu içeren bir tablo sunun.

Renk, birçok kullanıcı için örüntüyü daha hızlı taramayı sağlamayı sürdürür. Yalnızca anlamaya giden tek yol olmaktan çıkar.

Özetle

Erişilebilir grafikler iletiyi dayanıklı kılar. Doğrudan etiketler, desenler, çizgi biçimleri, karşıtlık ve eşdeğer veriler, renk görme kusuru olan kişilerin herkesle aynı bilgiyi anlamasına yardımcı olur — ve işinizi tüm izleyici için daha net kılar.

Kısa yanıt