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.
![Renk çemberine bakan bir göz.](https://web.dev/static/learn/accessibility/color-contrast/image/an-eye-viewing-color-whe-358cdaa2d25c.png?authuser=0000&hl=tr)
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.
![Orijinal gökkuşağı rengi.](https://web.dev/static/learn/accessibility/color-contrast/image/original-rainbow-sand-81e58797919d3.jpg?authuser=0000&hl=tr)
![Orijinal gökkuşağı deseni.](https://web.dev/static/learn/accessibility/color-contrast/image/original-rainbow-pattern-fe7465290afb8.jpg?authuser=0000&hl=tr)
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
![Yeşil körlüğü olan bir kişinin gözünden gökkuşağı rengi.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-aea6b53778f67.jpg?authuser=0000&hl=tr)
![Döteranopi olan bir kişinin gördüğü şekliyle gökkuşağı deseni.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-77926939250f1.jpg?authuser=0000&hl=tr)
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üğü
![Kırmızı renk körlüğü olan bir kişinin gözündeki gökkuşağı rengi.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-7748879c574cf.jpg?authuser=0000&hl=tr)
![Kırmızı körlüğü olan birinin gözündeki gökkuşağı deseni.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-87774aea1888c.jpg?authuser=0000&hl=tr)
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
![Renk körlüğü olan bir kişinin gözündeki gökkuşağı rengi.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-sand-seen-a-pe-211c40daaf52a.jpg?authuser=0000&hl=tr)
![Renk körlüğü olan bir kişinin gözündeki gökkuşağı deseni.](https://web.dev/static/learn/accessibility/color-contrast/image/rainbow-pattern-seen-a-1ada43bf2cc78.jpg?authuser=0000&hl=tr)
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ı.
![Mac ayarları kullanıcı arayüzü](https://web.dev/static/learn/accessibility/color-contrast/image/mac-settings-ui-e918a99520999.png?authuser=0000&hl=tr)
![Açık modda kod örneği.](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-light-mode-36c15d908ac91.png?authuser=0000&hl=tr)
![Koyu modda kod örneği.](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-dark-mode-4860136b85b36.png?authuser=0000&hl=tr)
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ı).
![Kontrast tercihi olmadan açık modda kod örneği.](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-light-mode-cf53e5d577358.png?authuser=0000&hl=tr)
![Yüksek kontrast tercihli koyu modda kod örneği.](https://web.dev/static/learn/accessibility/color-contrast/image/code-example-dark-mode-ef6f55f3ac8c9.png?authuser=0000&hl=tr)
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.
![Açık mod, normal kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/light-mode-regular-contr-7fe03bdb6aba3.png?authuser=0000&hl=tr)
![Koyu mod, normal kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/dark-mode-regular-contra-803d4faa3b4.png?authuser=0000&hl=tr)
![Açık mod, yüksek kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/light-mode-high-contrast-ad3670a5d6f63.png?authuser=0000&hl=tr)
![Koyu mod, yüksek kontrast.](https://web.dev/static/learn/accessibility/color-contrast/image/dark-mode-high-contrast-5e00d4e617fa8.png?authuser=0000&hl=tr)
Öğrendiklerinizi sınayın
Renk ve kontrast bilginizi test edin
Renkler, dokümantasyon için tek başına yeterli bir tanımlayıcı değildir. Okuyucuların kullanıcı arayüzü öğelerini tanımlamalarına başka neler yardımcı olur?