Renk körü için kullanılabilir iyi renk paleti.


13

Şu anda bir grafik tasarlıyorum, yavaşça daha fazla öğe eklenecek. Renk körü için her bir öğe arasında ayrım yapmak için en kullanışlı olacak öğeler için bir renk listesi / sipariş oluşturmak istiyorum. Nasıl / nereden başlayacağına dair bir fikrin var mı?

Yanıtlar:


14

"Deneme ve yanılma" yaklaşımı ile gitmek istiyorsanız , bilgisayar ekranınızda renk körlüğü, renk körlüğü / renk körlüğü türlerini taklit Renk Oracle (çapraz platform) adlı bir araç öneririm .

(Ayrıca Photoshop'ta ViewProof Setup(en azından CS5'te en az) renk körlüğü önleme kurulumları bulunur . Ancak, bir grafik tasarlamak üzereyseniz Photoshop biraz aşırı olabilir.)


1
+1hop kanıtı için geçen gün deniyordum. Oldukça harika
JamesHenare

Mesele şu ki, test doğru yaklaşımdır; "güvenli" bir palet seçmek gereksiz yere kısıtlayıcı olacaktır.
Charles Stewart

7

Ne tür renk körlüğüne hitap etmeye çalışıyorsunuz? Bu bağlantı

http://en.wikipedia.org/wiki/Color_blindness

renk körlüğü türüne dayanmaktan kaçınmak için çeşitli renkler hakkında iyi bir fikir vermelidir.

Genel olarak, maviler ve yeşillikler arasında seçim yapmaya bağımlı bir şey yapmak zor olabilir; eşyalarınızın nasıl tek renkli göründüğünü görmek isteyebilirsiniz.

Bir dizi "renk körlüğü" olduğundan, muhtemelen kontrollerin vb. Yedekliliğe sahip olduğundan daima emin olmak istersiniz (örn. Büyük kırmızı düğme aynı zamanda hoş bir kontrast renkte (kırmızı üzerine siyah) "Kendini Yok Etme düğmesi" olarak etiketlenmelidir veya kırmızı üzerine beyaz).


işten çıkarılma için iyi çağrı
JamesHenare

1
@Lauren: Şeytani inin için kullanıcı arayüzleri tasarlarken çok dikkatli
olamazsın

Evet, ve büyük planlarınızı test etmek için beş yaşında bir çocuk kiraladığınızdan emin olun. :)
Lauren-Clear-Monica-Ipsum

5

Birçok renk körlüğü vardır. Anahtar, yeterli kontrast olduğundan emin olmaktır. Daha da iyisi, sadece renge güvenmeyin - aynı bilgilerin her zaman öğelerin şekli, kontrastı veya sırası ile kaplanmasını sağlayın. Resminizin siyah beyaz olarak anlaşılması kolaysa geçer.


Teknik olarak birçok çeşit olsa da, büyük çoğunluğun deuteranopisi veya daha hafif deuteranomalisi vardır. Geri kalanların neredeyse tamamı protanopi veya protanomaliye sahiptir. Yukarıdakilerin hepsi kırmızı-yeşil kaybıdır. Kalan tüm tipler birlikte (mavi-sarı veya tek renkli) anladığım kadarıyla nüfusun% 0.01'inden daha az. Bu nedenle, esas olarak normal vizyonu ve döteranopiyi (Adobe simülasyonunu kullanarak) hedefliyorum ve sonra protanopi simülasyonunu kullanarak biraz ince ayar yapıyorum.
Jon Coombs

Kırmızıyı tamamen kullanılmayan bir renkle (genellikle macenta veya turuncu) değiştirirseniz, bu yardımcı olur. Android bunlardan çok şey yaptı. (Veya yeşilin yerini değiştirebilirsiniz.) Yalnızca bazı simgelerinizde kırmızı (veya yeşil) kullanıyorsanız renkli simgeleri değiştirmek kolay değildir. (Bizim için, eski simgelerimiz tek renkli olamaz.) Değiştirilebilir paletler lüksüne sahipseniz, deut için ayrı ayrı optimize edebilirsiniz. ve prot. ve hatta tritanopi / tritanomali için üçüncü bir seçenek ekler. Değiştirilebilirseniz, yüksek kontrastlı bir moda (karanlık bg'de açık metin) sahip olmak çok fazla ikame ancak daha da yararlıdır.
Jon Coombs

4

Ben renk körüyüm. "Biz", grafiklerin "siz" kadar renk kullanılarak da ayrıştırılmasını seviyoruz - dünyamızda sizinkinden daha az renk var. İşte 80/20 kuralının ruhunda pragmatik bir öneri.

İlk renk sensörünüz (proto) çalışmazsa görüşünüz proto-anopiktir. Eğer biraz yanlış davranırlarsa proto-anomolous olursunuz. Diğer iki renk sensörü türü için tekrarlayın ve 'proto' yerine 'deuter' veya 'trito' kullanın. (Bence bunlar 1,2,3 için Yunanca).

Pragmatik fırsat, deuteranomalinin diğer tiplerden çok daha yaygın olması gerçeğinden kaynaklanmaktadır; Tüm erkeklerin% 5'i. Diğerleri erkeklerde% 1'den az, kadınlarda bile daha az puan almaktadır. Öyleyse, deuteranomalistler için basit bir çözüm uzun bir yol kat ediyor - kişisel olarak sadece bir grafikteki çizgilerdeki farkı görebilmek için renkleri kendim yapılandırmak istemiyorum. (Hangi TÜM zaman olur).

Aşağıdakileri zahmetsizce görebildiğim küçük bir renk seti ekledim. Daha fazlasını koymak için başarısız oldum - bu yüzden paletin ne kadar küçük olması gerektiği hakkında bir fikir verir.

Nb. Unutmayın, yarattığınız kullanıcı deneyiminde bu renklere göre isimlendirmenin bir yararı yoktur. Bizim için Deuts - Görünüşe göre "sen" hemen hemen aynı renkler için çok fazla gereksiz çoğaltılmış isimleri icat etmiş gibi görünüyor :-)

rgb (255, 204, 153)

rgb (204, 204, 255)

rgb (255, 102, 102)

rgb (139, 230, 2)

kırmızı

Sarı

rgb (51, 51, 255)

rgb (153, 153, 153)

rgb (153, 0, 0)

rgb (51, 51, 51)

rgb (0, 0, 102)

rgb (120, 102, 75)


1
Renkleri göstermek için kopyaladığım html parçası düzgün görünmedi - bu yüzden tekrar deneyeyim:
40'ta pete howard

işte ya gitmek jsfiddle.net/kgasj68o
santa

2

En yaygın renk körlüğü türü kırmızı-yeşil renk körlüğüdür (bu, kırmızıyı tespit etmede veya yeşili tespit etmede bir kusur olabilir, ancak nadiren her ikisi de). Bu yüzden spektrumun kırmızı-yeşil kısmındaki farklılıklara güvenmekten kaçının. (Açık yeşil ve açık turuncu, örneğin bu insanlar için aynı görünme eğiliminde olacaktır.)

Özellikle temkinli olmak istiyorsanız, renklerinizi mavi-sarı bir eksene (çok derin mavi; aqua; beyaz; chartreuse; kahverengi) yerleştirebilirsiniz; tüm kırmızı-yeşil problemler hala bireyi mavinin farklı olduğunu söyleyebilmektedir; sarı, hem yeşil hem de kırmızı konileri aktive etme avantajına sahiptir, bu nedenle ikisinden biri ile ilgili bir sorun varsa, hala bolca görülebilir. Alternatif olarak, parlaklığın arttığı herhangi bir esneme (örn. Kırmızı-> sarı-> beyaz) çoğu insan tarafından görülebilir. Ancak kırmızının siyahtan farklı olduğunu varsaymayın.


2

Firefox için bazı araçlar var Örnek

Afaik, ayrıca bazı yönergeleri olan bir sertifika var. Kağıtlarıma baktım ama şimdiye kadar bulamadım. Google, kesinlikle ülkeniz için mevcut olan farklı sertifikalar hakkında bir şeyler söyleyecektir.


2

Bunu diriliyorum çünkü somut örnekler veya Nasıl Yapılırlar bulmak zor.

Deuteranopia'yı hedeflemenin çoğunluğu kapsadığını ve Protanopia'yı desteklemenin neredeyse herkesi kapsadığını aklınızda tutarak, bu hedefi gerçekleştirmek için simülatörleri kullanabilirsiniz. (Geri kalanların nüfusun% 0.01'inden az olduğuna inanıyorum.)

Illustrator gibi Adobe ürünlerinde, renklerinizi ayarlarken anında canlı yan yana yorumlama yapabilen çok yararlı simülatörler bulunur (yeni bir Pencere açın ve Görünüm> Prova Kurulumu> Renk Körlüğü ... 'ni seçin). Ve Renk Kontrast Analizörü gibi ücretsiz bağımsız araçlar da var.

Aşağıda, Illustrator'dan altı renk paleti (altıncı rengin her ikisi de değil Kırmızı veya Macenta olduğu) ve her iki simülasyonu gösteren örnek bir ekran görüntüsü yer almaktadır. Sol alt, istatistiksel olarak en kritik olanıdır.

Bu durumda morun sadece marjinal olarak yararlı hale geldiğini (oldukça soluk olduğunu ve yine de mavi ve / veya macenta ile düşük kontrastlı olduğunu) unutmayın. Ayrıca, "en güvenli" seçenek (Kırmızı yerine tam Macenta) oldukça yüksek olabilir. CVD'li çoğu insan için, kırmızı ve yeşilin doygunluğunu / parlaklığını ayarlamak tanınabilir kontrast sağlayabilir.

umarım renk açısından güvenli bir palet

(Bu paleti / resmi tamamen kullanmadan önce lütfen benimle kontrol edin.)

HSL renk uzayını kullanmanızı şiddetle tavsiye ederim. HSB (diğer adıyla HSV), özellikle RGB veya CMYK ile karşılaştırıldığında oldukça kolay. (Bilginize, iki sistemde yalnızca H ton değerleri aynı olacaktır.) Burada, her sütun tek bir ton numarası kullanır. RGB kodlarını daha sonra Adobe'den veya colorizer.org'daki mükemmel araçları kullanarak istediğiniz zaman çıkarabilirsiniz . Hex RGB kodları, ne yazık ki, programcılar vb. Tarafından en özlü ve doğrudan kullanılabilir. CSS'de çalışıyorsanız, doğrudan HSL'yi (yay) destekler.

Blue'nun buradaki doygunluğu kasıtlı olarak (a) daha yumuşak bir bağlantı / düğme rengi olmak ve (b) bu ​​iyi doymuş macenta ve morlarla daha fazla kontrast oluşturmak için düşüktür. Bir sütun içinde ana varyasyon parlaklıktır, ancak bazı doygunluk varyasyonlarından da kurtulabilirsiniz.


1

Photoshop'ta değilseniz veya yukarıda belirtilen renk körü prova görünümüne sahip olmayan daha eski bir sürümdeyseniz, gri tonlamaya dönüştürerek tasarımınızın parlaklık kontrastını kontrol edebilirsiniz. Ya da PS'nin daha önceki bir sürümü ise, doygunluk tamamen aşağı çevrilmiş bir renk tonu ve doygunluk katmanı ya da degrade olarak siyahtan beyaza bir degrade haritası kullanabilirsiniz. Bu katmanı belgenizdeki en üst katman olarak yerleştirin, ardından kontrastı kontrol etmek istediğinizde açın. Degrade haritayı tercih ederim, çünkü renklerin parlaklık açısından hangi kontrastla karşılaştırılması açısından daha doğrudur (kırmızı, sadece desaturate ettiğinizden biraz daha hafif gösterir), ancak her ikisi de tasarımdaki sorunlu alanları gösterebilir. Sayfanız bu görünümde iyi göründüğü sürece, renk körü bir kullanıcı için uygun olmalıdır.


0

resim açıklamasını buraya girin

Şekil 1: Ishihara renk körlüğü testi .

Benzer bir soruyu kısa bir süre içinde yanıtladım:

Renk körü bir kullanıcıya sağlamak için iyi bir renk paleti kaynağı nedir?

Temel sonuç şudur: kullanıcı tabanınızın (renkte önemli bir varyans olduğu gibi) belirli renk körü deneyimi araştırmaya değer; paletiniz muhtemelen renk körü gözlerle görebileceğinizden gelişecektir.

Pic ile ilgili:

Renk körü vs trikromatik


Ancak bazı renk körlüğü biçimlerinin ne kadar yaygın olduğu göz önüne alındığında tuhaf görünüyor, sadece uygun paletleri listeleyen web siteleri yok. Her seferinde tekerleği yeniden icat etmek gibi geliyor.
dumbledad

0

Ben zaten bu q - cevap biliyorum biliyorum ama ben sadece buldum:

http://disturbmedia.com/max/colour-blindness.html

... bu, özellikle görev için çok uygun görünen bir renk körlüğü simülatörüdür. Ona baktım ve renk körü için o kadar kötü hissettim ki, onlar için de işe yarayan paletleri merhamet dışında düşünmeye zorlandım. Gerçekten - Ben tamamen şaka değilim; bir göz atın.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.