Arayüz tasarımında renk körü kullanıcıları dikkate alıyor muyuz?

1) Daha iyi okunabilirlik için metinlerin ön plan ve arka plan kontrastlarına dikkat edin.

Tasarımda kullanılan metinlerin okunabilirliği sadece renk körü kullanıcıları ilgilendiren bir konu değil, tüm kullanıcı grupları için dikkat edilmesi gereken konuların başında geliyor. Kullanıcıların içeriği etkin biçimde okuyabilmesinin önündeki en büyük engellerden birini ise, ön plan-arka plan renk seçimlerindeki uygunsuzluklar oluşturuyor. Bu sebeple, metinlerin arka planlarında yer alan renklendirmelerde özellikle dikkatli olmakta fayda var.

Erişilebilirlik konusunda kabul görmüş WCAG (Web Content Accessibility Guidelines) rehberi, AA seviyesinde kontrast oranlarını normal metinler için 4.5:1, büyük metinler için 3:1 olarak belirlemiştir. AAA seviyesinde ise kontrast oranları, normal metinler için 7:1 ve büyük metinler için 4.5:1’dir. Burada büyük metinden kasıt 14 punto ve üzeri yazılardır.

Web Accessibility in Mind (WebAIM) tarafından sağlanan şu linkten, tasarımınızda kullanmayı planladığınız renklerin kontrastlarına yönelik bilgi alabilirsiniz. Renk kodlarını yazdığınızda, normal ve büyük metinler için kontrastın uygun olup olmadığını görebilirsiniz.

2) Sorunlu renk kombinasyonlarından kaçının.

Kırmızı, yeşil ve mavi renklerin gerek kendi içindeki kombinasyonları, gerek diğer bazı renklerle birlikte kullanımları; renk körü insanlara sunulan içeriğin algılanmasını zorlaştırabiliyor. Aşağıdaki renk kombinasyonlarına, bu bağlam dahilinde mümkün olduğu kadar dikkat etmek gerekiyor. Ancak kırmızı-yeşil renk körlüğünün, en yaygın görülen renk körlüğü grubu olduğunu da unutmayın.

• Yeşil – Kırmızı
• Yeşil – Kahverengi
• Mavi – Mor
• Yeşil – Mavi
• Açık yeşil – Sarı
• Mavi – Gri
• Yeşil – Gri
• Yeşil – Siyah

3) Renkleri ve sembolleri birlikte kullanın.

Kullanıcılara mesaj vermek ya da onları bilgilendirmek için renklere tek başına bağlı kalmayın. Renk körlüğü sorunu yaşayan kullanıcıların bu durumdan ciddi şekilde muzdarip olacağını unutmamak gerekiyor. Kırmızı-yeşil renk körlüğünün en yaygın görülen tür olduğu dikkate alındığında, özellikle hata mesajlarında kullanılan kırmızı renkli bilgilendirmelerin pek çok renk körü kullanıcı tarafından doğru şekilde algılanmadığı söylenebilir. Facebook tarafından kullanılan giriş ekranı, bu durumu açıklayan iyi bir örnek olarak gösterilebilir. Görüldüğü gibi, ilgili veri giriş alanının çerçevesini kırmızı renkle göstermenin yanında, ünlem işareti ile de hata mesajları vurgulanmış ve kullanıcılara hangi alanlarda sorun olduğu net olarak belirtilmiş (bu arada Facebook kurucusu Mark Zuckerberg’in de renk körü olduğunu hatırlatalım).

Benzer şekilde aşağıdaki form ekranında, veri giriş esnasında kullanıcıya verilen geribildirimlerin sadece renklerle sınırlı olduğunu düşünün. Her veri giriş alanının sağ tarafında bulunan onay veya uyarı ikonları olmasa, kullanıcının hangi veri giriş alanında sorun olduğunu anlaması ilk bakışta imkansız hale gelecek. Bu sebeple, form tasarımında renk körü kullanıcıların bu farkı anlayamamasından kaynaklanacak sorunları önlemenin en etkili yolu, sadece renklere bağlı kalmak yerine sembollerle de mesajı güçlendirmektir.

 4) Grafiklerle bilgi verirken desen ve modeller kullanın.

Kullanıcılara, bol yazı ve açıklamalarla anlatılması gereken içeriğin, tek bir görsel üzerinden daha etkili biçimde aktarılması amacıyla kullanılan grafikler, arayüzün neredeyse vazgeçilmezlerinden biri. Ancak grafik üzerindeki bilgileri kullanıcılara sunarken sadece renklere bağlı kalmak, yapılan en büyük hatalardan biri. Özellikle desen ve modeller ile grafik içeriğindeki farklılıkların vurgulanması, renk körü kullanıcıların grafiği daha doğru yorumlamalarına olanak sağlayacaktır. Bunun için, aşağıdaki görselde olduğu gibi, soldaki grafik yerine sağdaki gibi bir görsel kullanımı tavsiye edilmekte. Farklı desenler kullanarak renk körü kullanıcıların içeriği daha iyi anlamasını sağladıktan sonra, grafik içine yazı eklemek zorunda değilsiniz elbette.

Sonuç olarak;

Renk körlüğü, günümüzde tahminlerin de ötesinde bir yaygınlığa sahip. Dolayısıyla, etrafımızda bu kadar yaygın olarak bulunan bir soruna karşı arayüz tasarımında çözüm üretmemek ve bu sorunla yaşayan kullanıcı gruplarını gözardı etmek, büyük bir hata.

Bir arayüz tasarımında unutulmaması gereken konu, kullanıcıların, sizin vermek istediğiniz mesajları veya yapacağınız bilgilendirmeleri eşit seviyede algılayabilmesi gerekliliği. Aksi durumda, tasarımınızdan ve sunduğunuz deneyimden memnun olmayan bir kitlenin oluşması işten bile değil. Bunun, orta ve uzun vadede, sahip olduğunuz uygulamaya ve arkasındaki marka değerine verebileceği olası zararları düşünmeniz gerekir.

Bu yazıda bahsedildiği gibi, renk körü kullanıcılar için üretilecek çözümler oldukça basit. Tek bir kalıbın herkese uyabileceğini düşünmek (one-size-fits-all) yerine, tasarımınızda yapacağınız küçük ama yansıması büyük olacak iyileştirmeler sayesinde, renk körlüğü yaşayan kullanıcıların daha iyi bir deneyim yaşamalarını sağlayabilirsiniz.

Konuyu bu yazının başlığı ile bitirmek daha doğru olacak sanırım: Arayüz tasarımında renk körü kullanıcıları dikkate alıyor muyuz?

Referanslar ve daha fazla okuma önerisi:

• How to Design for Color Blindness
• Accessibility for Visual Design