Renk ve kontrast

Ekrandaki metni okumaya çalışıp veya ekranı çok parlak ya da çok ışıkta görmekte düşük ışıklı bir ortamda mı? Ya da belki daha kalıcı bir renge sahip birisin Renk körlüğü olan tahmini 300 milyon kişi gibi görme sorunu az gören 253 milyon kişi için mi geçerli?

Tasarımcı veya geliştirici olarak insanların rengi nasıl algıladığını anlamalısınız. ve kontrastı ayırt edebiliyorsunuz. Bu, kullanıcıların görsel ihtiyaçlarını en iyi şekilde karşılamanız gerekir.

Bu modülde, renk ve kontrastla ilgili erişilebilir temel bilgileri öğreneceksiniz.

Rengi algılama

Nesnelerin renge sahip olmadığını ancak elementlerin dalga boylarını yansıttığını hafif mi? Renkli gördüğünüzde gözleriniz bu dalga boylarını alıp işler ve bunları renge dönüştürebilirsiniz.

Dijital erişilebilirlik bağlamında bu dalga boylarından bahsediyoruz. (HSL) görebilirsiniz. HSL modeli alternatifi vardır ve insan gücüyle daha yakından renk algılar.

Ton, kırmızı, yeşil veya mavi gibi renkleri tanımlamanın nitel bir yoludur. Bu örnekte her tonun, renk spektrumunda şu aralıklara sahip belirli bir noktası vardır: 0 ile 360 arasında, kırmızı 0, yeşil 120 ve mavi için 240.

Doygunluk, bir rengin yoğunluğudur ve %0 ile %0 arasındaki yüzdelerle ölçülür. dönüşüm oranını %100'e yükseltin. Tam doygunluğu olan bir renk (%100) çok canlı, diğeri ise olmayan (%0) değeri gri tonlamalı veya siyah-beyaz olur.

Açıklık, bir rengin açık veya koyu karakteridir ve şu aralıklarla ölçülür: %0 (siyah) ile %100 (beyaz) arasında bir değerdir.

Renk kontrastını ölçme

WAI grubu, çeşitli görme engelli bireyleri desteklemek için renk kontrastı formülü yeterli kontrastın bulunduğundan emin olun. metin ile arka planı arasına yerleştirin. Bu renk kontrastı oranları az gören kişiler de arka plandaki metni okuyabiliyor. Bu sayede, kontrastı artıran yardımcı teknolojilere ihtiyaç duymazsınız.

Canlı renk paletine sahip resimlere bakıp bu resmin farklı belirgin renk körlüğü türlerine sahip olan kişiler tarafından görülebilir.

ziyaret edin.

'nı inceleyin.

Solda, resimde mor, kırmızı, turuncu, sarı, turkuaz yeşil, açık mavi ve koyu mavi renklerde gökkuşağı kumları gösterilmektedir. Sağ tarafta daha parlak ve çok renkli bir gökkuşağı deseni bulunmaktadır.

Döteranopi

Döteranopi (yaygın olarak yeşil körlük olarak bilinir), erkeklerin %1 ila %5'inde, erkeklerin ise %0,35 ile yardımcı olur.

Döteranopia hastalarının yeşil ışığa karşı hassasiyeti daha düşüktür. Bu renk körlüğü filtresi bu tür renk körlüğünün nasıl görünebileceğini simüle eder.

Kırmızı körlüğü

Protanopi (yaygın olarak kırmızı körlük olarak bilinir), erkeklerin% 1,01 ile% 1,08'i arasında ve erkeklerin% 0,02'sinde kadınların% 0,03'ü.

Protanopi olan kişilerin kırmızı ışığa karşı hassasiyeti daha düşüktür. Bu renk körlüğü filtresi bu tür renk körlüğünün nasıl görünebileceğini simüle eder.

Ahromatopsi veya Monokromatizm

Akromatopsi veya monokromatizm (ya da tam renk körlüğü) çok nadir görülür.

Ahromatopsi veya monokromatizma hastaları neredeyse hiç kırmızı, yeşil veya mavi ışık. Bu renk körlüğü filtresi bu tür nasıl yardımcı olabileceğine bakalım.

Renk kontrastını hesaplama

Renk kontrastı formülünde göreceli parlaklığı kullanarak 1 ile 21 arasında değişebilen bir renk değerini seçin. Bu formül genellikle [color value]:1 olarak kısaltılır. Örneğin, saf siyah yerine saf siyah beyaz, 21:1 konumunda en yüksek renk kontrast oranına sahip.

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

Metin resimleri de dahil olmak üzere normal boyutlu metinlerin bir renk kontrastı oranına sahip olması gerekir 4.5:1 renk için minimum WCAG gereksinimleri. Büyük boyutlu metnin ve önemli simgelerin renk kontrast oranı 3:1 olmalıdır. Büyük boyutlu metinler en az 18 pt / 24 piksel veya 14 pt / 18,5 piksel kalın. Logolar ve dekoratif öğeler bu renklerden muaftır kontrast gereklilikleri.

Neyse ki ileri düzey matematik gerekmez çünkü sizin yerinize renk kontrastı hesaplamalarını yapabilirsiniz. Benzer araçlar Adobe Rengi, Renk Kontrast Analiz Aracı Leonardo ve Chrome Geliştirici Araçları renk seçici size renk kontrastı oranlarını hızlı bir şekilde söyleyebilir ve ve en kapsayıcı renk çiftlerini ve paletlerini oluşturmaktır.

Renk kullanma

Renk kontrastı düzeyleri iyi değilse, kelimeler, simgeler ve diğer grafiksel öğeler öğelerin bulunması zordur. ve tasarım kısa sürede erişilemez hale gelebilir. Ama bir paydaşın rengin nasıl kullanıldığına dikkat edin yalnızca renk kullanarak bilgi, eylem veya görüntü görsel bir öğeyi ayırt etmeye çalışın.

Örneğin, "devam etmek için yeşil düğmeyi tıklayın" derseniz ancak düğmeye herhangi bir ek içerik veya tanımlayıcı eklemeyin, belirli renk körlüğü olan kişilerin hangi düğmenin tıklayın. Benzer şekilde birçok grafik, tablo ve tablo, kullanıcının ne istediğini aktarmak için yalnızca rengi kullanır. ekleyebilirsiniz. Desen, metin veya simge gibi başka bir tanımlayıcı eklemek insanların içeriği anlamasına yardımcı olmak açısından çok önemlidir.

Dijital ürünlerinizi gri tonlamalı olarak incelemek, olası renk sorunlarını hızlı bir şekilde tespit etmenin iyi bir yoludur.

Renk odaklı medya sorguları

Ekranınızda renk kontrastı oranlarını ve renk kullanımını kontrol etmenin ötesinde her gün daha da popüler hale gelen ve desteklenen medya sorguları ile ekranda görüntülenenler üzerinde daha fazla kontrol.

Örneğin, @prefers-color-scheme medya sorgusunu kullanarak koyu renkli bir tema oluşturabilirsiniz. Bu özellik, fotofobisi veya ışığa hassasiyeti olan kişiler için faydalı olabilir. Renk bozuklukları olan ve kontrast hassasiyeti olan kişileri destekleyen @prefers-contrast ile yüksek kontrastlı bir tema da oluşturabilirsiniz.

Renk şemasını tercih eder

@prefers-color-scheme medya sorgusu, kullanıcıların bir ışık veya Ziyaret ettikleri web sitesinin veya uygulamanın koyu temalı sürümü Bunu görebilirsiniz açık/koyu tema ayarlarınızı değiştirerek ve bu medya sorgusunu destekleyen bir tarayıcıya gidilir. Şu göz atın: Mac ve Koyu mod için Windows talimatları.

Açık ve koyu modu karşılaştırın.

ziyaret edin.

Kontrastı tercih ediyor

@prefers-contrast medya sorgusu, yüksek kontrastın açık olup olmadığını görmek için kullanıcının işletim sistemi ayarlarını kontrol eder veya devre dışı bırakın. Kontrastı değiştirerek bu temanın nasıl çalıştığını görebilirsiniz tercih ayarları ve bu medya sorgusunu destekleyen bir tarayıcıya gitme (Mac ve Windows kontrast modu ayarları).

Normal ve yüksek kontrastı karşılaştırma.

ziyaret edin.

Medya sorgularını katmanlandırma

Kullanıcılarınıza daha da fazla değer sunmak için renk odaklı birden fazla medya sorgusu kullanabilirsiniz. tercih edebilirsiniz. Bu örnekte @prefers-color-scheme ve @prefers-contrast birlikte.

Renk ve kontrastı karşılaştırın.

ziyaret edin.

ziyaret edin.

Öğrendiklerinizi sınayın

Renk ve kontrast bilginizi test edin