Web'de renk körlüğü: ne anlama geliyor ve buna göre nasıl tasarım yapılır?

Renk körlüğü nedir?

Retinadaki üç tip koni hücresi sayesinde renkleri görüyoruz. Her tip hücre farklı bir ışık aralığına tepki verir: kırmızı, yeşil veya mavi. Eğer bir koni hücresi türü daha az iyi çalışıyorsa veya hiç çalışmıyorsa, insanlar belirli renkleri farklı algılarlar.

Aslında iki formu vardır:

• Renk görme bozukluğu: İnsanlar tüm renkleri görebilir, ancak bazılarını daha zayıf algılarlar. Örneğin, kırmızı ve yeşil birbirine çok benzer görünür.

• Renk körlüğü: İnsanlar bir veya daha fazla rengi hiç algılayamazlar. Akromatopsi olarak adlandırılan tam renk körlüğünde, insanlar yalnızca gri tonlarını görürler.

Günlük dilde "renk körlüğü" terimi genellikle her ikisi için de kullanılır. Etkilenen çoğu kişide tam renk körlüğü değil, renk görme bozukluğu vardır.

En yaygın türler

• Kırmızı-yeşil eksikliği: En yaygın görülen formdur. Kırmızı ve yeşil renkleri birbirinden ayırt etmek zordur. Hangi koninin etkilendiğine bağlı olarak, buna protanomali veya protanopi (kırmızı) ve deuteranomali veya deuteranopi (yeşil) denir.

• Mavi-sarı renk körlüğü (tritanomali veya tritanopi): Nadir bulunurlar. Mavi, yeşil, sarı ve pembe renkleri birbirinden ayırt etmek zordur.

• Tam renk körlüğü (akromatopsi): Çok nadir görülür. Etkilenen kişiler yalnızca ışığı ve karanlığı görür ve genellikle parlamaya karşı çok hassastırlar.

_{Şekil 1: Farklı renk körlüğü türlerinin simülasyonu. Orijinal (sol üst), kırmızı körlüğü (sağ üst), yeşil körlüğü (sol alt) ve mavi körlüğü (sağ alt).}

Kaç kişi etkileniyor?

Almanya Federal Sağlık Bakanlığı'nın portalına göre sağlık.birliği.de Erkeklerin yaklaşık %8'inde ve kadınların %0,4'ünde renk görme bozukluğu bulunmaktadır. 25 kişilik bir erkek grubunda istatistiksel olarak iki kişi bu durumdan etkilenmektedir. Tam renk körlüğü ise çok nadirdir: Almanya'da sadece yaklaşık 2.700 kişi bu durumla yaşamaktadır.

Erkekler çok daha sık etkilenir çünkü kırmızı ve yeşil koni hücrelerine ait genler X kromozomunda bulunur. Erkeklerde sadece bir X kromozomu vardır, bu nedenle bu gendeki bir değişiklik doğrudan etki eder. Kadınlarda ise iki X kromozomu bulunur ve genellikle belirti göstermeyen taşıyıcılardır.

Renk görme yeteneği, örneğin göz hastalıkları nedeniyle yaşam boyunca değişebilir. Ayrıca, birçok insan belirli durumlarda, örneğin parlak güneş ışığında telefonda, renkleri daha az net görür.

Web sitelerinde hangi unsurlar sorunlara yol açar?

Bilginin iletilmesinde yalnızca renk kullanıldığında renk körlüğü bir engel haline gelir. Tipik örnekler:

• Metin içindeki bağlantılar: Bağlantılar yalnızca renkle işaretlenirse ve altı çizilmezse, birçok kişi onları göremez.

• Hata ve başarı mesajları: Bir form alanının etrafına kırmızı bir çerçeve çizmek veya sadece yeşil bir onay işareti koymak yeterli değildir.

• Grafikler ve haritalar: Sadece renk bakımından farklılık gösteren çizgiler, çubuklar veya alanlar birbirinden ayırt edilemez.

• Durum ekranları: Stok durumu veya teslimat durumu gibi kırmızı, sarı ve yeşil göstergeler belirsiz hale geliyor.

• Düğmeler ve seçimler: Etkin durum yalnızca renk değişimiyle gösterilirse, kullanıcılar neyin seçili olduğunu bilemezler.

• Düşük kontrast: Beyaz zemin üzerinde açık gri renkteki metin veya resimlerin üzerindeki metin, yalnızca renk körlüğü olanlar için değil, herkes için okunması zordur.

• Formlardaki yer tutucular: Açık gri yer tutucu metin, önceden girilmiş metinden ayırt edilmesi genellikle zordur.

Sorun yaygın. Buna göre WebAIM Milyon 2026 En iyi bir milyon web sitesinin ana sayfalarının %83,9'unda metinlerin kontrastı çok düşüktü.

Şekil 2, yeşil körlüğü olan birinin bir grafiği nasıl görebileceğini göstermektedir:

^{Şekil 2: Solda değiştirilmemiş diyagram, sağda simüle edilmiş yeşil körlüğü ile birlikte.}

WCAG'in gereksinimleri

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), özellikle renk için önemli olan üç başarı kriteri içermektedir:

• 1.4.1 Renk Kullanımı (A Seviyesi): Renk, tek görsel araç olmak zorunda değil. Bilgi aktarma, bir eylemi belirtme veya bir unsuru ayırt etme amacıyla kullanılır.

• 1.4.3 Kontrast (Minimum) (AA seviyesi): Metnin arka planına göre kontrast oranı en az 4,5:1, büyük metinler için ise en az 3:1 olmalıdır.

• 1.4.11 Metin Dışı Kontrast (AA seviyesi): Düğmeler, form alanı kenarlıkları, odak göstergeleri ve önemli grafikler en az 3:1 kontrast oranına sahip olmalıdır.

Bu kriterler, Avrupa standardı EN 301 549'un bir parçasıdır ve bu standarda göre... Avrupa Erişilebilirlik Yasası temel alınmıştır.

Renk erişilebilirliğine sahip web tasarımı için ipuçları

1. Renkleri asla tek başına kullanmayın: Renkleri metin, simgeler, desenler veya alt çizgiyle birleştirin. Bir hata mesajının sadece kırmızı bir çerçeveye değil, net bir metne ihtiyacı vardır.

2. Bağlantıların altını çiz: Metin içindeki bağlantılar altı çizili veya başka bir şekilde görünür şekilde işaretlenmelidir.

3. Kontrastı kontrol edin: Metnin ve önemli öğelerin WCAG değerlerini karşıladığından emin olmak için bir kontrast denetleyicisi kullanın.

4. Grafikleri doğrudan etiketleyin: Sadece renk göstergesi kullanmak yerine, çizgilerin ve çubukların yanına etiketler yazın. Desenler veya farklı çizgi stilleri de yardımcı olur.

5. Kritik renk kombinasyonlarından kaçının: Kırmızı ve yeşil, yeşil ve kahverengi, mavi ve mor renkleri birçok insan için birbirinden ayırt etmek zordur.

6. Simülasyonla test edin: Birçok tasarım aracı ve tarayıcı geliştirici aracı, farklı renk görme bozukluklarını simüle edebilir. Bu, bilginin nerede kaybolduğunu hızlı bir şekilde gösterir.

7. Renk körlüğünün ötesini düşünün: İyi kontrast ve net sinyaller, yaşlılara, görme engellilere ve dış mekanlarda telefon kullanan herkese de yardımcı olur.

Rehberimiz WCAG ile erişilebilir tasarım ve makalemiz hakkında erişilebilir çevrimiçi formlar Daha fazla pratik ipucu içerir.

Eye-Able nasıl yardımcı olur?

Erişilebilir tasarım temeldir. Buna ek olarak, Eye-Able Yardımı Ziyaretçilerin bir web sitesini kendi ihtiyaçlarına göre ayarlamasına olanak tanır. Özel bir mod, renk körlüğü veya renk görme bozukluğu olan kişiler için renkleri ayarlar ve kontrast modu metnin okunmasını kolaylaştırır.

^{Şekil 3: Ishihara test görüntüleri kullanılarak renk düzeltmesinin gösterimi (Kaynak: Wellcome koleksiyonu CC BY 4.0)}

Şekil 3, renk modunun Ishihara test görüntülerinde farklılıkları nasıl tekrar görünür hale getirebileceğini göstermektedir. Kontrastı veya renk doygunluğunu artırmak da yardımcı olabilir. Şekil 4'teki trafik ışığı da başka bir örnektir:

^{Şekil 4: Normal renkli trafik ışığı (solda), kırmızı renk körlüğü olan kişiler için trafik ışığı (ortada), Eye-Able düzeltmesinden sonra kırmızı renk körlüğü olan kişiler için trafik ışığı (sağda)}

Ancak Assist, erişilebilir tasarımın yerini tutmaz. Bir web sitesinin WCAG kontrast gereksinimlerini karşılayıp karşılamadığı, tasarımına ve uygulamasına bağlıdır. Eye-Able Denetim ve Raporu Böylece web sitenizdeki kontrast hatalarını ve diğer engelleri kontrol edip, bunları kaynağında düzeltebilirsiniz.

Çözüm

Her on iki erkekten birinde renk körlüğü vardır. Onlar için, yalnızca renkle iletilen bilgiler kaybolur. Çözüm basit: asla yalnızca renk kullanmayın, yeterli kontrast sağlayın ve tasarımınızı bir simülasyonla test edin. Bu, web sitelerini herkes için daha kolay kullanılabilir hale getirir.

Kendi web sitenizin ne kadar erişilebilir olduğunu merak ediyor musunuz? Bizim ücretsiz erişilebilirlik kontrolü Size 2 dakikadan kısa sürede ilk genel bakışı sunar.

Sıkça Sorulan Sorular: İnternette Renk Körlüğü

Renk körlüğü ne kadar yaygın?

Erkeklerin yaklaşık %8'inde ve kadınların %0,4'ünde renk görme bozukluğu vardır. En yaygın türü kırmızı-yeşil renk körlüğüdür. İnsanların yalnızca gri tonlarını gördüğü tam renk körlüğü ise çok nadirdir.

Renk körlüğü ile renk görme bozukluğu arasındaki fark nedir?

Renk görme bozukluğu olan kişiler tüm renkleri görürler, ancak bazılarını daha silik bir şekilde algılarlar. Renk körlüğü olan kişiler ise bir veya daha fazla rengi hiç algılayamazlar. Günlük dilde "renk körlüğü" terimi genellikle her ikisi için de kullanılır.

Renk körü kullanıcılar hangi renklerden kaçınmalı?

Farklılık ifade etmek amacıyla kırmızı ve yeşil, yeşil ve kahverengi, mavi ve mor renk kombinasyonlarından kaçının. En önemlisi, rengi asla tek başına bir sinyal olarak kullanmayın; her zaman metin, simge veya desen ekleyin.

WCAG renk hakkında ne diyor?

WCAG başarı kriteri 1.4.1, rengin bilgi iletmenin tek yolu olmaması gerektiğini belirtir. Buna ek olarak, metnin en az 4,5:1 (1.4.3) kontrast oranına ve düğmelerin, form alanlarının ve önemli grafiklerin en az 3:1 (1.4.11) kontrast oranına sahip olması gerekir.

Web sitemin renk körlüğüne karşı uyumluluğunu nasıl test edebilirim?

Tasarım aracınızda veya tarayıcı geliştirici araçlarınızda bulunan renk körlüğü simülasyonunu kullanarak web sitenizi farklı renk körlüğü türlerine sahip kişilerin nasıl gördüğünü inceleyin. Kontrast denetleyicisi veya otomatik erişilebilirlik denetimi, kontrast hatalarını gösterir.