Renk ve kontrast

Hiç ekrandaki metni okumaya çalışıp renk şeması nedeniyle okumakta zorlandınız mı veya çok parlak ya da loş ışıklı bir ortamda ekranı görmekte zorlandınız mı? Belki de 300 milyon renk körü veya 253 milyon az gören gibi daha kalıcı bir renk görme sorununuz vardır.

Tasarımcı veya geliştirici olarak, insanların renk ve kontrastı geçici, duruma bağlı veya kalıcı olarak nasıl algıladığını anlamanız gerekir. Bu sayede, kullanıcının görsel ihtiyaçlarını en iyi şekilde karşılayabilirsiniz.

Bu modülde, erişilebilir renk ve kontrastla ilgili bazı temel bilgiler verilecektir.

Rengi algılama

Nesnelerin rengi olmadığını, ancak ışığın dalga boylarını yansıttığını biliyor muydunuz? Renkleri gördüğünüzde gözleriniz bu dalga boylarını alıp işler ve renklere dönüştürür.

Dijital erişilebilirlik söz konusu olduğunda bu dalga boylarını renk tonu, doygunluk ve parlaklık (HSL) açısından ele alırız. HSL modeli, RGB renk modeline alternatif olarak oluşturulmuştur ve renklerin insanlar tarafından algılanma şekliyle daha uyumludur.

Renk tonu, bir rengi niteliksel olarak tanımlamanın bir yoludur (ör. kırmızı, yeşil veya mavi). Her renk tonu, renk spektrumunda belirli bir noktaya sahiptir. Değerler 0 ile 360 arasında değişir. Kırmızı 0, yeşil 120 ve mavi 240'tır.

Doygunluk, bir rengin yoğunluğudur ve %0 ile %100 arasında değişen yüzdelerle ölçülür. Tam doygunluğa (%100) sahip bir renk çok canlı olurken doygunluğu olmayan (%0) bir renk gri tonlu veya siyah beyaz olur.

Açıklık, bir rengin açık veya koyu karakteridir ve %0 (siyah) ile %100 (beyaz) arasında değişen yüzdelerle ölçülür.

Renk kontrastını ölçme

WAI grubu, çeşitli görme engelleri olan kişileri desteklemek amacıyla metin ile arka planı arasında yeterli kontrast olmasını sağlamak için renk kontrastı formülü oluşturdu. Bu renk kontrastı oranları uygulandığında, görme yetisi orta düzeyde az olan kişiler, kontrastı artıran yardımcı teknolojiye ihtiyaç duymadan arka plandaki metni okuyabilir.

Canlı bir renk paletine sahip resimlere göz atın ve bu resmin, belirli renk körlüğü türlerine sahip kişiler için nasıl görüneceğini karşılaştırın.

Soldaki resimde mor, kırmızı, turuncu, sarı, su yeşili, açık mavi ve koyu mavi renklerde gökkuşağı kumu gösteriliyor. Sağ tarafta daha parlak ve çok renkli bir gökkuşağı deseni bulunur.

Yeşil körlüğü

Deuteranopia (genellikle yeşil körlüğü olarak bilinir) erkeklerin %1-5'inde, kadınların %0,35-0,1'inde görülür.

Döteranopi olan kişiler yeşil ışığa karşı daha az hassastı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 (genellikle kırmızı körlüğü olarak bilinir) erkeklerin% 1,01 ila% 1,08'inde, kadınların ise% 0,02 ila% 0,03'ünde görülür.

Protanopi olan kişiler kırmızı ışığa karşı daha az hassastı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 tek renkli görme

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

Akromatopsi veya monokromatizm olan kişiler kırmızı, yeşil ya da mavi ışığı neredeyse hiç algılayamaz. 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ü, kontrastı belirlemeye yardımcı olmak için renklerin göreli parlaklığını kullanır. Kontrast 1 ile 21 arasında değişebilir. Bu formül genellikle [color value]:1 olarak kısaltılır. Örneğin, saf beyazla saf siyah arasındaki renk kontrastı oranı 21:1 ile en yüksek seviyededir.

(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 metinler, renkle ilgili minimum WCAG koşullarını karşılamak için 4.5:1 renk kontrast oranına sahip olmalıdır. Büyük boyutlu metin ve temel simgeler 3:1 renk kontrast oranına sahip olmalıdır. Büyük boyutlu metinler en az 18 punto / 24 piksel veya 14 punto/18,5 piksel kalın olarak tanımlanır. Logolar ve dekoratif öğeler, bu renk kontrastı şartlarından muaftır.

Neyse ki renk kontrastı hesaplamalarını sizin için yapacak birçok araç olduğundan ileri düzey matematik bilgisi gerekmez. Adobe Color, Color Contrast Analyzer, Leonardo ve Chrome'un Geliştirici Araçları renk seçicisi gibi araçlar, renk kontrastı oranlarını hızlı bir şekilde belirlemenize ve en kapsayıcı renk çiftlerini ve paletlerini oluşturmanıza yardımcı olacak öneriler sunmanıza olanak tanır.

Renk kullanma

İyi bir renk kontrastı seviyesi olmadan kelimeleri, simgeleri ve diğer grafik öğelerini bulmak zorlaşır ve tasarım hızla erişilemez hale gelebilir. Ancak bilgileri, işlemleri aktarmak veya görsel bir öğeyi ayırt etmek için tek başına renk kullanamayacağınızdan renklerin ekranda nasıl kullanıldığına da dikkat etmeniz önemlidir.

Örneğin, "Devam etmek için yeşil düğmeyi tıklayın" diyorsanız ancak düğmeyle ilgili ek içerik veya tanımlayıcıları atlıyorsanız belirli renk körlüğü türlerine sahip kullanıcıların hangi düğmeyi tıklayacağını bilmesi zorlaşır. Benzer şekilde, birçok grafik ve tablo da bilgileri aktarmak için yalnızca renk kullanır. İçeriğin anlaşılmasına yardımcı olmak için desen, metin veya simge gibi başka bir tanımlayıcı eklemek çok önemlidir.

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

Renk odaklı medya sorguları

Renk kontrastı oranlarını ve ekranınızda renk kullanımını kontrol etmenin yanı sıra, kullanıcıların ekranda gösterilenler üzerinde daha fazla kontrol sahibi olmasını sağlayan ve giderek daha popüler hale gelen medya sorgularını da uygulamayı düşünebilirsiniz.

Örneğin, @prefers-color-scheme medya sorgusunu kullanarak ışık korkusu veya ışık hassasiyeti olan kullanıcılar için faydalı olabilecek bir koyu tema oluşturabilirsiniz. Ayrıca, renk eksikliği ve kontrast hassasiyeti olan kişileri destekleyen @prefers-contrast ile yüksek kontrastlı bir tema oluşturabilirsiniz.

Tercih edilen renk şeması

Medya sorgusu @prefers-color-scheme, kullanıcıların ziyaret ettikleri web sitesinin veya uygulamanın açık ya da koyu temalı bir sürümünü seçmelerine olanak tanır. Açık veya koyu tercih ayarlarınızı değiştirip bu medya sorgusunu destekleyen bir tarayıcıya giderek tema değişikliğini görebilirsiniz. Koyu modla ilgili Mac ve Windows talimatlarını inceleyin.

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

Kontrastı tercih ediyor

@prefers-contrast medya sorgusu, yüksek kontrastın etkin olup olmadığını görmek için kullanıcının işletim sistemi ayarlarını kontrol eder. Kontrast tercihi ayarlarınızı değiştirip bu medya sorgusunu destekleyen bir tarayıcıya (Mac ve Windows kontrast modu ayarları) giderek bu tema değişikliğini görebilirsiniz.

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

Katman medya sorguları

Kullanıcılarınıza daha fazla seçenek sunmak için renge odaklanan birden fazla medya sorgusu kullanabilirsiniz. Bu örnekte @prefers-color-scheme ve @prefers-contrast değerlerini birlikte yığıyoruz.

Hem rengi hem de kontrastı karşılaştırın.