Renk Körlüğü İçin Tasarım: Kapsamlı Rehber

Dünyada yaklaşık 300 milyon kişide bir tür renk görme kusuru var. Web siteniz, uygulamanız ya da veri görselleştirmeniz bilgiyi yalnızca renkle aktarıyorsa, izleyicinizin önemli bir bölümü onu kullanmakta zorlanacaktır.

İyi haber: renk körlüğünü gözeten tasarım herkesin işine yarar. Erişilebilir renk seçimleri, renk görme kusuru olsun olmasın tüm kullanıcılar için netliği, okunabilirliği ve kullanılabilirliği artırır.

Neden önemli

Renk görme kusuru yaklaşık erkeklerin %8’ini ve kadınların %0,5’ini etkiler. Uygulamada bu şu demek:

20 erkekten oluşan bir ekipte yaklaşık 1–2 kişide kusur olur
1 milyonluk bir izleyici kitlesinde yaklaşık 80.000 erkekte bir tür kırmızı-yeşil kusur bulunur
Kırmızı-yeşil karışması en yaygın biçimdir ve olguların ~%98’ini oluşturur

Renk körlüğü için tasarım giderek bir yasal gereklilik de hâline geliyor. Web İçeriği Erişilebilirlik Kılavuzu (WCAG) 2.1, renkle aktarılan bilginin başka yollarla da erişilebilir olmasını açıkça şart koşar.

Altın kural: asla yalnızca renge güvenmeyin

Renk körlüğüne dostane tasarımın en önemli ilkesi basittir:

Rengi bilgiyi aktarmanın tek yolu olarak asla kullanmayın.

Rengi her zaman en az bir görsel ipucuyla birlikte kullanın:

Metin etiketleri — kategoriyi ya da durumu açıkça adlandırın
Simgeler ya da işaretler — renkten bağımsız şekiller kullanın
Desen ya da doku — özellikle çizelgelerde ve haritalarda yararlıdır
Konum — hiyerarşiyi aktarmak için yerleşimden yararlanın
Şekil — farklı veri kategorileri için farklı şekiller kullanın

Sorunlu renk birleşimlerinden kaçının

Bazı renk çiftleri kırmızı-yeşil renk körü kullanıcılar için özellikle zordur:

Kaçınılması gereken yüksek riskli birleşimler

Kaçının	Nedeni	Alternatif
Yeşil üzerine kırmızı	Döteranopide tümüyle görünmez	Turuncu üzerine mavi kullanın
Kırmızı üzerine yeşil	Aynı sorun	Mavi üzerine sarı kullanın
Kırmızı ve yeşil düğmeler	Geçti/kaldı ayırt edilemez	Simge (✓/✗) ve metin ekleyin
Kırmızı ve siyah metin	Kırmızı koyu gri görünebilir	Vurgu için kalın ya da altı çizili kullanın
Pembe ve gri	Protanopide aynı görünür	Mavi ve gri kullanın

Daha güvenli birleşimler

Kırmızı-yeşil kusuru olan kullanıcılar için mavi ve turuncu en güvenilir erişilebilir renk çiftidir — bu tonlar hemen hemen tüm kusur türlerinde ayırt edilebilir kalır.

Diğer güvenli çiftler:

Mavi + sarı (hem kırmızı-yeşil hem mavi-sarı kusurlar için çok iyi)
Mavi + beyaz
Siyah + sarı (en yüksek karşıtlık)
Mor + sarı

Renk körlüğüne uygun çizelge ve grafikler

Veri görselleştirme, renk körlüğünün en çok etkili olduğu alandır. Sık yapılan hatalar:

Olumlu/olumsuz değerler için kırmızı/yeşil kullanmak
Kırmızı-sarı-yeşil geçişli ısı haritaları kullanmak
Birden fazla veri dizisini yalnızca renkle ayırmak

Çizelgeler için çözümler

1. Renklerin yanında desen dolgusu kullanın Renkler benzer görünse bile ayırt edilebilir kalmaları için çizelge alanlarına tarama, nokta ya da çapraz tarama ekleyin.

2. Verileri doğrudan etiketleyin Renkli bir açıklama kutusuna güvenmek yerine veri dizilerini doğrudan çizelge üzerinde etiketleyin. Bu yalnızca renk körlerine değil, herkese yardımcı olur.

3. Renk körlüğüne uygun bir palet kullanın Önerilen erişilebilir paletler:

Okabe-Ito paleti: bilimsel şekillerde renk körlüğü erişilebilirliği için özel olarak tasarlanmıştır
ColorBrewer paletleri: haritalar ve çizelgeler için araştırmaya dayalı paletler
Çizelgelerinizin benzetim altında ayırt edilebilir kaldığını doğrulamak için renk körlüğü simülatörümüzü kullanın

4. Alternatif veri biçimleri sunun Her çizelgenin yanında bir tablo görünümü ya da veri indirme bağlantısı sunun; böylece görsel gösterimle zorlanan kullanıcılar da temel bilgiye ulaşabilir.

Form tasarımı ve arayüz durumları

Formlar, durum göstergeleri genellikle renge dayandığı için renk körü kullanıcılar açısından yüksek riskli bir alandır:

Sık görülen sorunlar

Geçersiz alanlarda kırmızı, geçerli alanlarda yeşil çerçeve
“Durum: Etkin” yalnızca yeşil metinle gösterilir
Hata iletileri yalnızca kırmızı ile gösterilir

Erişilebilir alternatifler

Doğrulama durumları:

❌ Yapmayın: Kırmızı çerçeve = hata, yeşil çerçeve = başarı
✅ Yapın:    Hata simgesi (⚠) + kırmızı çerçeve + açıklayıcı hata metni
             Başarı simgesi (✓) + yeşil çerçeve + “Her şey yolunda!” metni

Durum göstergeleri:

❌ Yapmayın: • (yeşil nokta) = Çevrim içi, • (kırmızı nokta) = Çevrim dışı
✅ Yapın:    ✓ Çevrim içi, ✗ Çevrim dışı (ya da ayrı şekiller: ●/○)

Düğmeler ve eylem çağrıları:

❌ Yapmayın: Yeşil “Onayla” / kırmızı “İptal” — protanopide aynı görünür
✅ Yapın:    Düğmeleri açıkça etiketleyin + yeterli karşıtlık sağlayın + simge ekleyin

Renk karşıtlığı gereklilikleri (WCAG)

Renk seçiminin ötesinde, okunabilirlik için yeterli karşıtlık oranı şarttır. Birleşimlerinizi doğrulamak için kontrast denetleyicimizi kullanın.

Gereklilik	En düşük oran	Bağlam
WCAG AA	4,5:1	Normal metin (18pt altı)
WCAG AA	3,0:1	Büyük metin (18pt+ veya 14pt kalın)
WCAG AAA	7,0:1	Gelişmiş — normal metin
WCAG AAA	4,5:1	Gelişmiş — büyük metin

Önemli: Bu oranlar metin ile arka planın parlaklığı arasında ölçülür ve tüm kullanıcı türleri için — renk körlüğü benzetimi altında da — karşılanmalıdır.

Tasarımlarınızı sınamak

Tasarımlarınızı her zaman birkaç yöntemle sınayın:

1. Bir renk körlüğü simülatörü kullanın

Ekran görüntülerini ColorVision simülatörüne yükleyip tasarımlarınızın her kusur türünde nasıl göründüğünü görün. Dört türü de sınayın: protanopi, döteranopi, tritanopi ve akromatopsi.

2. Tarayıcı geliştirici araçlarını kullanın

Chrome ve Firefox’ta yerleşik benzetim vardır:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Karşıtlık oranlarını denetleyin

Her metin/arka plan birleşimini, benzetim de gösteren bir kontrast denetleyiciden geçirin.

4. Gerçek geri bildirim alın

Mümkünse gerçek renk körü kullanıcılarla test edin. Bu kullanıcılar çoğu kez benzetimlerin gözden kaçırdığı sorunları bulur.

Platforma özgü ipuçları

Web tasarımı

Renkle kodlanmış öğelere aria-label ve title öznitelikleri eklemek için CSS’ten yararlanın
:focus durumlarını yalnızca renkle biçimlendirmeyin
Formlardaki hata durumlarının yalnızca renk değişimi değil, simge + metin içerdiğinden emin olun

Veri bilimi ve araştırma

R, Python (matplotlib) ya da herhangi bir grafik kitaplığında varsayılan olarak Okabe-Ito paletini kullanın
Renkler kendini açıklıyor gibi görünse bile her zaman metin etiketli bir açıklama kutusu ekleyin

Mobil uygulamalar

iOS ve Android erişilebilirlik ayarlarında benzetimi destekler
Her büyük sürümden önce uygulamanızı bu ayarlar açıkken sınayın

Basılı tasarım

Durum için kırmızı/yeşil trafik ışığı benzetmesine güvenmeyin
Bilgi grafiklerinin siyah-beyaz fotokopide de anlamlı kaldığından emin olun

Önerilen araçlar

Araç	Amaç
ColorVision Simülatörü	Herhangi bir görselin renk körlüğünde nasıl göründüğünü benzetir
Kontrast Denetleyici	Renk körlüğü önizlemesiyle WCAG uyumunu denetler
Colour Oracle (masaüstü uygulaması)	Sistem genelinde benzetim katmanı
Who Can Use	Farklı engel durumlarında karşıtlık oranlarını benzetir
Figma Erişilebilirlik Eklentisi	Figma’da gerçek zamanlı denetimler

Sık Sorulan Sorular

Renk körlüğüne uygun tasarım tüm renkleri kaldırmayı mı gerektirir? Hayır. Renk yine bolca kullanılabilir — yalnızca bilgiyi aktarmanın tek yolu olmamalıdır. Rengin yanına ikincil ipuçları (metin, simge, desen) ekleyin.

Yalnızca kırmızı-yeşil kusuru için mi tasarlamalıyım? Kırmızı-yeşil kusur olguların ~%98’ini kapsar, ancak ona göre tasarlamak diğer türlerdeki kullanıcılara da yardımcı olma eğilimindedir. En kapsayıcı yaklaşım, bir simülatörle tüm türleri sınamaktır.

Renk körü kullanıcılar ekran okuyucu kullanır mı? Zorunlu olarak hayır. Renk görme kusuru körlükten farklıdır. Bu kullanıcıların görme keskinliği genellikle tamdır ve ekran okuyucu kullanmazlar; alternatif metne değil, renkten bağımsız görsel ipuçlarına gereksinim duyarlar.

Renk körlüğü erişilebilirliğini denetlemek için en iyi ücretsiz araç hangisi? Bu sitedeki simülatör ve kontrast denetleyici tümüyle ücretsizdir. Figma için ücretsiz “Able” eklentisi gerçek zamanlı karşıtlık denetimi sunar.

Kısa yanıt