Ekranda metin okumayı denediğinizde renk şeması nedeniyle okumakta zorlandığınız veya ekranı çok parlak ya da loş bir ortamda görmekte zorlandığınız oldu mu? Ya da tahminen renk körlüğü olan 300 milyon kişi veya az gören 253 milyon kişi gibi daha kalıcı renk körlüğü olan bir kişi misiniz?
Bir tasarımcı veya geliştirici olarak geçici, durumsal veya kalıcı olarak insanların renk ve kontrastı nasıl algıladığını anlamanız gerekir. Bu sayede müşterinin görsel ihtiyaçlarını en iyi şekilde karşılayabilirsiniz.
Bu modül, renk ve kontrastla ilgili temel bilgileri edinmenizi sağlayacaktır.
Algılanan renk
Nesnelerin renge sahip olmadığını, ancak ışığın dalga boylarını yansıttığını biliyor muydunuz? Renk gördüğünüzde, gözleriniz bu dalga boylarını alıp işler ve bunları renklere dönüştürür.
Dijital erişilebilirlik söz konusu olduğunda, bu dalga boylarından ton, doygunluk ve açıklık (HSL) bakımından bahsediyoruz. HSL modeli, RGB renk modelinin alternatifi olarak oluşturulmuştur ve bir insanın rengi algılama biçimiyle daha uyumludur.
Ton, kırmızı, yeşil veya mavi gibi bir rengi tanımlamanın kalitatif bir yoludur. Bu renk spektrumunda her ton, 0 ile 360 arasında, kırmızı 0 ile 360 arasında bir değere sahip belirli bir noktaya sahiptir, 120 değerinde yeşil ve 240 derecede mavidir.
Doygunluk, bir rengin %0 ile %100 arasındaki yüzdelerle ölçülen yoğunluğudur. Tam doygunluk (%100) olan bir renk çok canlı olur, doygunluğu olmayan (%0) bir renk ise gri tonlamalı veya siyah beyaz olur.
Açıklık, bir rengin %0 (siyah) ile %100 (beyaz) arasındaki yüzdelerle ölçülen açık veya koyu bir karakterdir.
Renk kontrastını ölçme
WAI grubu, çeşitli görme engelli bireyleri desteklemek için bir renk kontrastı formülü geliştirerek metin ile arka planı arasında yeterli kontrast yarattı. Bu renk kontrastı oranları takip edildiğinde, orta düzeyde az gören kişiler kontrast artıran yardımcı teknolojilere ihtiyaç duymadan arka plandaki metinleri okuyabilirler.
Şimdi canlı bir renk paletine sahip resimlere bakalım ve bu resmin, belirli renk körlüğüne sahip olan resimlere nasıl görüneceğini karşılaştıralım.
Sol taraftaki resimde gökkuşağı renginde mor, kırmızı, turuncu, sarı, su yeşil, açık mavi ve koyu mavi renkler gösterilmektedir. Sağ tarafta ise daha parlak, rengarenk bir gökkuşağı deseni görülüyor.
Yeşil körlüğü
Deuteranopi (yaygın olarak yeşil kör olarak bilinir) erkeklerin %1-5'inde, kadınların ise %0,35 ila %0,1'inde görülür.
Dötranopi olan kişilerin 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ör olarak bilinir), erkeklerin %1,01-1,08'inde ve kadınların %0,03'ünde görülür.
Protanopisi 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.
Renk körlüğü veya monokromatizm
Akromatopsi veya Monokromatizm (veya tam renk körlüğü) çok nadiren görülür.
Renk körlüğü veya monokromatizmli kişilerde kırmızı, yeşil veya mavi ışık algısı hemen hemen hiç yoktur. Bu renk körlüğü filtresi, bu tür renk körlüğünün nasıl görünebileceğini simüle eder.
Renk kontrastını hesaplama
Renk kontrastı formülü, 1 ile 21 arasında değişen kontrastın belirlenmesine yardımcı olmak için renklerin göreceli parlaklığını kullanır. Bu formül genellikle [color value]:1 olarak kısaltılır. Örneğin, saf beyaz ile saf siyah arasındaki renk kontrastı, 21:1 ile en yüksek renk kontrastına sahiptir.
(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors
Minimum WCAG renk gereksinimlerini karşılamak için, metin resimleri dahil olmak üzere normal boyutlu metinlerin renk kontrastı oranı 4.5:1 olmalıdır.
Büyük boyutlu metin ve gerekli 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 harflerle tanımlanır. Logolar ve dekoratif öğeler bu renk kontrastı gereksinimlerinden muaftır.
Neyse ki sizin için renk kontrastı hesaplamalarını yapacak birçok araç bulunduğundan ileri düzey matematik işlemlerine gerek yoktur. Adobe Color, Renk Kontrast Analizcisi, Leonardo ve Chrome'un DevTools renk seçici gibi araçlar, renk kontrastı oranlarını hızla söyleyebilir ve en kapsayıcı renk çiftlerini ve paletleri oluşturmanıza yardımcı olacak öneriler sunabilir.
Renk kullanma
İyi bir renk kontrastı düzeyleri olmadığında, kelimeler, simgeler ve diğer grafik öğelerin keşfedilmesi zor olur ve tasarım kısa sürede erişilemez hale gelebilir. Ancak bilgileri veya eylemleri aktarmak ya da görsel bir öğeyi ayırt etmek için tek başına renk kullanamayacağınızdan, ekranda rengi nasıl kullanıldığına dikkat etmek de önemlidir.
Örneğin, "devam etmek için yeşil düğmeyi tıklayın" derseniz ancak düğmedeki ek içerikleri veya tanımlayıcıları çıkarırsanız belirli renk körlüğü olan kişilerin hangi düğmeyi tıklayacaklarını bilmeleri zor olur. Benzer şekilde, birçok grafik, tablo ve tablo, bilgi aktarmak için yalnızca renk kullanır. Desen, metin veya simge gibi başka bir tanımlayıcı eklemek, kullanıcıların içeriği anlamalarına yardımcı olmak açısından çok önemlidir.
Dijital ürünlerinizi gri tonlamalı olarak incelemek, olası renk sorunlarını hızla tespit etmenin iyi bir yoludur.
Renk odaklı medya sorguları
Ekranınızda renk kontrastı oranlarını ve renk kullanımını kontrol etmenin yanı sıra, kullanıcılara ekranda görüntülenen öğeler üzerinde daha fazla kontrol olanağı sunan, gittikçe daha popüler hale gelen ve desteklenen medya sorgularını uygulamayı düşünmelisiniz.
Örneğin, @prefers-color-scheme medya sorgusunu kullanarak koyu bir tema oluşturabilirsiniz. Bu tema, fotofobisi veya ışığa karşı hassasiyeti olan kişiler için faydalı olabilir. Ayrıca renk eksikliği ve kontrast hassasiyeti olan kişileri destekleyen @prefers-contrast ile yüksek kontrastlı bir tema oluşturabilirsiniz.
Renk şemasını tercih eder
@prefers-color-scheme medya sorgusu, kullanıcıların ziyaret ettikleri web sitesinin veya uygulamanın açık ya da koyu temalı bir sürümünü seçmesine olanak tanır. Açık/koyu tercih ayarlarınızı değiştirerek ve bu medya sorgusunu destekleyen bir tarayıcıya giderek bu tema değişikliğini uygulamalı olarak görebilirsiniz. Koyu mod için Mac ve Windows talimatlarını inceleyin.
Kontrastı tercih eder
@prefers-contrast medya sorgusu, yüksek kontrastın açılıp açılmadığını görmek için kullanıcının işletim sistemi ayarlarını kontrol eder. Kontrast tercihi ayarlarınızı değiştirerek ve bu medya sorgusunu destekleyen bir tarayıcıya (Mac ve Windows kontrast modu ayarları) giderek bu tema değişikliğini uygulamalı olarak görebilirsiniz.
Medya sorgularını katmanlandırma
Kullanıcılarınıza daha fazla seçenek sunmak için renk odaklı birden fazla medya sorgusu kullanabilirsiniz. Bu örnekte, @prefers-color-scheme ve @prefers-contrast öğelerini gruplandırdık.
Öğrendiklerinizi sınayın
Renk ve kontrast bilginizi test edin
Renk, dokümanlar için tek başına yeterli bir tanımlayıcı değildir. Okuyucuların kullanıcı arayüzü öğelerini tanımlamasına yardımcı olacak başka neler var?