Renk körlüğü testi ile renk körlüğü simülatörü aynı şey mi?

Hayır. Renk körlüğü testi bir kişinin renk görmesini ölçer. Simülatör ise tasarımınızın renk görme eksikliği olan birine yaklaşık nasıl görünebileceğini gösterir. Tanı koymaz.

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

Colour Blind Awareness'a göre yaklaşık 12 erkekten 1'i ve 200 kadından 1'i renk körüdür. En yaygın grup kırmızı-yeşil türüdür.

Kırmızı ve yeşili hiç kullanmamalı mıyım?

Kullanabilirsiniz. WCAG 1.4.1 rengi yasaklamaz, rengin tek ipucu olmasını yasaklar. Yanına yazı, şekil ya da desen koyun ve iki rengin açıklığını ayırın.

Simülasyon ne kadar doğru?

Yaklaşıktır. Matrisler Machado, Oliveira ve Fernandes'in 2009 modelinden gelir ve tam biçimi gösterir. Hafif biçimli birinde renk kaybı, ekranda gördüğünüzden azdır.

"Karışabilir" uyarısı bir WCAG kuralı mı?

Hayır. 0,10 eşiği bu aracın demo kuralıdır. WCAG 1.4.1'de geçen sayı, açıklık farkı için verilen 3:1 kontrast oranıdır.

Renk körlüğü simülatörü: renklerinizi test edin

Renklerinizi deneyin

Renk körlüğü simülatörü

Bu haftaki başvurular (örnek veri)

İnceleniyor
Reddedildi
Onaylandı
Beklemede

Durum etiketleri

İnceleniyor
Reddedildi
Onaylandı
Beklemede

Başvurunuz incelemede. Ayrıntılar için başvuru sayfasına bakın.

Renk çiftleri (simüle edilmiş renklerle)

Normal görüşte karışan çift yok.

İnceleniyor ve ReddedildiFark 0,37 · açıklık 1,03:1Ayrışıyor
İnceleniyor ve OnaylandıFark 0,33 · açıklık 1,47:1Ayrışıyor
İnceleniyor ve BeklemedeFark 0,44 · açıklık 2,40:1Ayrışıyor
Reddedildi ve OnaylandıFark 0,33 · açıklık 1,42:1Ayrışıyor
Reddedildi ve BeklemedeFark 0,25 · açıklık 2,33:1Ayrışıyor
Onaylandı ve BeklemedeFark 0,26 · açıklık 1,63:1Ayrışıyor

Protanopi simülasyonunda 1 çift karışabilir: Onaylandı ve Beklemede.

İnceleniyor ve ReddedildiFark 0,30 · açıklık 1,67:1Ayrışıyor
İnceleniyor ve OnaylandıFark 0,31 · açıklık 1,32:1Ayrışıyor
İnceleniyor ve BeklemedeFark 0,37 · açıklık 1,73:1Ayrışıyor
Reddedildi ve OnaylandıFark 0,19 · açıklık 2,21:1Ayrışıyor
Reddedildi ve BeklemedeFark 0,27 · açıklık 2,90:1Ayrışıyor
Onaylandı ve BeklemedeFark 0,08 · açıklık 1,31:1Karışabilir

Döteranopi simülasyonunda 1 çift karışabilir: Reddedildi ve Onaylandı.

İnceleniyor ve ReddedildiFark 0,32 · açıklık 1,25:1Ayrışıyor
İnceleniyor ve OnaylandıFark 0,31 · açıklık 1,41:1Ayrışıyor
İnceleniyor ve BeklemedeFark 0,44 · açıklık 2,65:1Ayrışıyor
Reddedildi ve OnaylandıFark 0,04 · açıklık 1,12:1Karışabilir
Reddedildi ve BeklemedeFark 0,20 · açıklık 2,11:1Ayrışıyor
Onaylandı ve BeklemedeFark 0,18 · açıklık 1,87:1Ayrışıyor

Tritanopi simülasyonunda 1 çift karışabilir: İnceleniyor ve Onaylandı.

İnceleniyor ve ReddedildiFark 0,34 · açıklık 1,06:1Ayrışıyor
İnceleniyor ve OnaylandıFark 0,08 · açıklık 1,21:1Karışabilir
İnceleniyor ve BeklemedeFark 0,31 · açıklık 1,87:1Ayrışıyor
Reddedildi ve OnaylandıFark 0,35 · açıklık 1,28:1Ayrışıyor
Reddedildi ve BeklemedeFark 0,19 · açıklık 1,98:1Ayrışıyor
Onaylandı ve BeklemedeFark 0,29 · açıklık 1,54:1Ayrışıyor

Akromatopsi simülasyonunda 3 çift karışabilir: İnceleniyor ve Reddedildi; İnceleniyor ve Onaylandı; Reddedildi ve Onaylandı.

İnceleniyor ve ReddedildiFark 0,01 · açıklık 1,03:1Karışabilir
İnceleniyor ve OnaylandıFark 0,09 · açıklık 1,47:1Karışabilir
İnceleniyor ve BeklemedeFark 0,23 · açıklık 2,41:1Ayrışıyor
Reddedildi ve OnaylandıFark 0,09 · açıklık 1,42:1Karışabilir
Reddedildi ve BeklemedeFark 0,22 · açıklık 2,33:1Ayrışıyor
Onaylandı ve BeklemedeFark 0,13 · açıklık 1,63:1Ayrışıyor

JavaScript kapalı olduğu için renkleri değiştiremezsiniz. Görüş türü seçimi ve örnek renklerin sonuçları yine çalışır.

Hex kodunu yazın ya da renk seçiciyi kullanın, sonra bir görüş türü seçin. Grafik değerleri örnektir. Bağlantı bilerek yalnızca renkle ayrılıyor. "Karışabilir" uyarısı bu aracın kuralıdır, bir standart değildir.

Renk körlüğü türleri

ABD Ulusal Göz Enstitüsü (NEI), renk körlüğünü renk görme eksikliği adıyla anlatır. Colour Blind Awareness'a göre yaklaşık 12 erkekten 1'ini (%8) ve 200 kadından 1'ini etkiler. Dünyada bu yaklaşık 300 milyon kişi demek.

En yaygın grup kırmızı-yeşil türüdür. NEI simülatördeki türleri şöyle tanımlar:

Tür	Grup	Ne olur
Protanopi	Kırmızı-yeşil	Kırmızı ile yeşil hiç ayırt edilemez.
Döteranopi	Kırmızı-yeşil	Kırmızı ile yeşil hiç ayırt edilemez.
Tritanopi	Mavi-sarı, daha az yaygın	Mavi ile yeşil, mor ile kırmızı, sarı ile pembe ayırt edilemez. Renkler daha soluk görünür.
Akromatopsi (monokromasi)	Tam renk görme eksikliği, nadir	Hiç renk görülmez.

Bu türlerin hafif biçimleri de var. NEI'ye göre döteranomali bazı yeşilleri daha kırmızı gösterir. Protanomali bazı kırmızıları daha yeşil ve daha soluk gösterir. İkisi de hafiftir ve günlük işleri genelde engellemez.

Simülatör tam biçimleri gösterir. Hafif biçimli birinde renk kaybı, ekranda gördüğünüzden azdır.

Simülatör nasıl çalışıyor

Simülasyon matrisleri Machado, Oliveira ve Fernandes'in 2009 tarihli makalesinden geliyor. Fizyolojiye dayanan bu model her tür için 3×3'lük bir renk matrisi verir. Ben şiddet 1,0 satırını, yani tam biçimi kullandım.

Matrisleri sayfaya SVG'nin feColorMatrix filtresiyle uyguluyorum. W3C'nin Filter Effects belirtimine göre bu filtreler varsayılan olarak doğrusal RGB (linearRGB) uzayında çalışır. Makale, renklerin hangi kodlamada olduğunu belirtmiyor. Çift hesabını ben de aynı uzayda yapıyorum.

Makalede akromatopsi matrisi yok. Akromatopsiyi feColorMatrix'in saturate değerini 0 yaparak çiziyorum. Bu ayar rengi tamamen griye çevirir, sonuç bir yaklaşımdır.

Uyarı kuralı benim demo kuralım, bir standart değil. Simüle edilmiş iki rengin Oklab renk uzayındaki farkını (ΔEOK) hesaplıyorum. CSS Color 4 bu farkı Oklab'daki Öklid uzaklığı olarak tanımlar. Fark 0,10'un altındaysa çift "karışabilir" diye işaretlenir.

Neden kontrast oranı değil? Önce onu denedim. Örnek renklerde kırmızı ile yeşilin oranı normal görüşte 1,42:1, döteranopide 1,12:1 çıktı. Oran az değişiyor, kaybolan şey ton farkı. WCAG açıklık farkına baktığı için oranı yine de her satıra yazdım.

WCAG 1.4.1: renk tek ipucu olamaz

WCAG 2.2'nin 1.4.1 Renk Kullanımı ölçütü A düzeyindedir. Renk; bilgi vermenin, bir eylemi göstermenin, yanıt istemenin ya da bir öğeyi ayırmanın tek görsel yolu olamaz.

W3C'nin açıklama sayfası gerekçeyi açık yazar: renk farkı, renk görme eksikliği olan kullanıcıya ulaşmayabilir. Sayfa, az gören kişilerin ve birçok yaşlı kullanıcının da renkleri iyi görmediğini not eder.

Ölçüt rengi yasaklamaz. Rengin yanına ikinci bir görsel ipucu ister: metin, şekil ya da desen. W3C'ye göre açıklık farkı en az 3:1 kontrast oranı veriyorsa o da görsel ayrım sayılır.

Simülatördeki parçalar 1.4.1'in tipik durumlarını gösteriyor:

Grafik: Seriler yalnızca renkle ve bir lejantla ayrılıyor. W3C'nin teknik listesinde renk ile deseni birlikte kullanmak var (G111).
Bağlantı: Altı çizili değil, yalnızca rengi farklı. Renk görmeden fark edilmeyen bağlantıyı W3C, F73 numaralı hata olarak listeler. Altını çizmiyorsanız bağlantı ile çevresindeki metin arasında en az 3:1 oran arayın (G183).
Durum etiketleri: Renkli noktanın yanında yazı var. Bu doğru kullanım. Formlarda zorunlu ya da hatalı alanı yalnızca renkle göstermek ise F81 numaralı hatadır.

Metin kontrastını kontrast hesaplayıcıyla ayrıca ölçebilirsiniz. Ölçütün geri kalanını WCAG rehberinde anlattım.

Karışan renkleri nasıl ayırırım

İşe paletten önce, rengin taşıdığı anlamdan başlayın. Renk bir anlam taşıyorsa yanına yazı koyun. Grafik serilerine doğrudan etiket ya da desen ekleyin. Bağlantıların altını çizin.

Sonra paleti düzeltin. Karışan iki rengin açıklığını birbirinden uzaklaştırın: biri koyu, biri açık olsun. Simülatörde iki rengi değiştirin ve uyarının kalkıp kalkmadığına bakın.

Tek bir öğeyi renkle öne çıkarıyorsanız Von Restorff etkisine güveniyorsunuz. Öğe yalnızca renkle ayrılıyorsa renk körü bir kullanıcı bu farkı göremeyebilir. Renge ek olarak boyut ya da kalınlık farkı kullanın.

Benim notum

Dashboard'larda yeşil "iyi", kırmızı "kötü" anlamına geliyorsa ve ikisi aynı açıklıktaysa bu araçla mutlaka bakın. Örnek renklerle döteranopiyi seçin: Reddedildi ile Onaylandı neredeyse aynı zeytin rengine döner.

Simülatör bir başlangıç noktasıdır ve gerçek kullanıcılarla yapılan testin yerini tutmaz. Yine de en bariz karışmaları yayından önce gösterir.

Ürününüzün bir akışını baştan sona inceletmek isterseniz UX Audit, WCAG 2.2'nin temel kontrollerini de kapsar.