Makale
Bir Görselden Erişilebilir Renk Paleti Çıkarma
Bir fotoğraf veya marka görseli genellikle tam bir renk sisteminin çekirdeğini içerir. Bu çekirdeği çıkarmak, kullanılabilir bir palete dönüştürmek ve erişilebilirlik standartlarına göre doğrulamak üç ayrı adım gerektirir. Bu makale her adımı sırasıyla ele alır: palet çıkarmanın arka planda nasıl çalıştığı, renkler nasıl seçilip ayarlanacağı, WCAG eşiklerine karşı kontrast nasıl kontrol edileceği ve renk körü kullanıcılar için çöken renk çiftlerinin nasıl tespit edileceği.
Palet Nasıl Çıkarılır: Piksel Örnekleme ve Renk Nicemleme
Her dijital görsel, RGB gibi bir uzayda renk değeri taşıyan piksellerden oluşan bir ızgaradır. Bir palet çıkarıcı her pikseli tek tek incelemez: 2 megapiksellik bir fotoğraf 2 milyon veri noktası içerir; bu hem işlemek için yavaş olur hem de kullanışlı bir küme yerine binlerce hafif farklı ton döndürür. Bunun yerine araç, temsili bir alt küme toplayarak piksel ızgarasını düzenli aralıklarla örnekler. Bu alt küme daha sonra bir renk nicemleme algoritmasına beslenir. En yaygın yaklaşım, benzer renkleri bir kümeleme yöntemiyle gruplar; bazen median-cut veya k-means tarzı bölümleme olarak adlandırılır. Algoritma, örneklenen her pikseli renk benzerliğine göre sabit sayıda kovadan birine yerleştirir, ardından her kovanın ortalama rengini hesaplar. Sonuç, görseldeki baskın görsel tonları birlikte temsil eden genellikle 4 ila 16 renk içeren küçük bir listedir. Yalnızca küçük izole alanlarda görünen renkler gözden kaçabilir; bu beklenen bir davranıştır, hata değildir.
Ham Baskın Renklerden Kullanılabilir Palete
Bir palet çıkarıcının ham çıktısı, sıklığa göre sıralanmış renk listesidir; ancak sıklık tek başına bir palet oluşturmaz. Orman fotoğrafından alınan renkler, bir arayüzde ayrı vurgular olarak kullanmak için çok benzer çeşitli yeşiller döndürecektir. Pratik iş, seçmek ve ayarlamaktır. En belirgin ve en az nötr olanı birincil renginiz olarak belirleyerek başlayın. Kalan renklerden birincil ile ve birbirleriyle kontrast oluşturan en fazla iki tanesini seçin; bunlar vurgularınız olur. Çıkarıcının gölgeler ve orta tonlardan döndürdüğü doygunluğu azaltılmış tonlar dahil diğer her şey arka planlar ve kenarlıklar için nötr renk olarak kullanılabilir. Bu kabataslak yapıyı oluşturduktan sonra büyük olasılıkla tek tek değerleri ayarlamanız gerekecektir. color-converter aracı her rengi hex, RGB ve HSL olarak incelemenizi sağlar. HSL burada özellikle kullanışlıdır: tonu sabit tutarak, aynı renk ailesinden ayrılmadan daha sıkı veya daha gevşek bir aile oluşturmak için parlaklığı ya da doygunluğu değiştirebilirsiniz.
Kontrast Kontrolü: Okunabilir Metin İçin WCAG Eşikleri
Metin ve arka plan için aday renkler belirlediğinizde, kombinasyonun okunabilir olup olmadığını kontrol etmeniz gerekir. Web İçeriği Erişilebilirlik Kılavuzları (WCAG) bu amaç için bir kontrast oranı tanımlar. Bu oran, iki rengin göreli parlaklığını karşılaştırır: 1:1 değeri hiç kontrast olmadığını (aynı renk üzerine aynı renk), 21:1 ise maksimumu (beyaz üzerine siyah) ifade eder. WCAG 2.1 Seviye AA, normal boyutlu gövde metni için en az 4.5:1, büyük metin için (18pt veya 14pt kalın) ise 3:1 oran gerektirir. AAA Seviyesi, sırasıyla 7:1 ve 4.5:1 ile daha yüksek eşikler belirler. Parlaklığı elle hesaplamanıza gerek yoktur. Temel bilgi şudur: size iyi aydınlatma altında iyi görünen bir renk çifti ekranda 4.5:1'in altında kalabilir ve kılavuz tam da bu durum için vardır. Renkleri çıkarıp ayarladıktan sonra, kullanmayı planladığınız her metin-arka plan çiftini test edin. Beyaz üzerinde iyi okunan bir orta gri ton, çıkardığınız paletten açık bej bir arka planda tamamen başarısız olabilir.
Renk Körlüğü: Çiftlerin Etkilenen Kullanıcılara Nasıl Göründüğünü Simüle Etme
Erkeklerin yaklaşık 1/12'si, kadınların ise 1/200'ü bir tür renk görme bozukluğuna sahiptir. En yaygın tür yeşile duyarlılığın azaldığı deuteranopiadır, ardından kırmızıya duyarlılığın azaldığı protanopia gelir. Mavi-sarıya duyarlılığın azaldığı tritanopia ise daha nadirdir. Her tür için görsel sistem, etkilenmeyen izleyicilerin farklı gördüğü bazı dalga boylarını aynı algılanan renge eşler. Bir palet için pratik sorun, normal görüş altında açıkça farklı görünen iki rengin renk körü bir kullanıcı için aynı tona çökmesi ve örneğin başarı ile hatayı göstermek için yalnızca kırmızı ve yeşil kullanmak gibi durumlarda ayırt etmek için işlevsiz hale gelmesidir. Renk körlüğü simülasyonu çalıştırmak, etkilenen kanallar sıkıştırıldığında paletin nasıl göründüğünü ortaya koyar. Neredeyse özdeş bir gri veya kahverengiye çöken çiftler yeniden değerlendirilmesi gerekenlerdir: ya tonu olmadan kontrast korunacak şekilde ikisi arasındaki parlaklık farkını artırın ya da rengin tek sinyal olmayacağı şekilde ikincil ipuçları (şekil, etiket, desen) ekleyin.
Yerel Olarak Yapma: color-palette, color-blindness ve color-converter
Bu makalede açıklanan üç adımın tamamı, görselinizi veya marka renklerinizi herhangi bir sunucuya göndermeden tamamlanabilir. color-palette aracı tamamen tarayıcıda çalışır: bir görsel bırakırsınız, pikselleri yerel olarak örnekler ve baskın renkleri hex değerleri olarak döndürür. Hiçbir dosya iletilmez. color-converter aracı bir hex kodu kabul eder ve aynı rengi RGB ve HSL olarak gösterir; böylece aynı renk ailesinde kalırken parlaklık veya doygunlukta hedefli ayarlamalar yapabilirsiniz. Hex değeri ve dönüştürülen değerlerin her ikisi de yalnızca sayfada bulunur. color-blindness aracı tam tersi yönde çalışır: bir görsel bırakırsınız ve araç, o görselin tarayıcıda hesaplanan deuteranopia, protanopia ve tritanopia simülasyonlarını oluşturur. Bir fotoğraf yerine bir paleti kontrol etmek için önce renk örneklerinizi bir görsel olarak dışa aktarın veya ekran görüntüsü alın, ardından bunu simülatöre bırakın. Üç aracı sırayla kullanarak, görselden çıkarma, color-converter'da ayarlama, ardından bir renk örneği görseli dışa aktarıp color-blindness ile doğrulama, yukarıda açıklanan tam iş akışını kapsar. Kaynak fotoğraf yayımlanmamış marka öğeleri veya müşterinin henüz yayımlanmamış kimliğini içeriyorsa bu önemlidir; görseliniz boyunca cihazınızda kalır.
Bu makaledeki araçlar
- Renk paleti çıkarıcıBir görüntüden baskın renkleri HEX renk örnekleri olarak çıkarın. Herhangi bir rengi kopyalayın. Yükleme yok.
- Renk körlüğü simülatörüBir görüntü üzerinde protanopia, deuteranopia, tritanopia ve akromatopsiyi simüle edin. Yükleme yok.
- Renk DönüştürücüRenkleri HEX, RGB, HSL, HSV ve CMYK arasında dönüştürün. WCAG kontrast denetleyici dahil. Yükleme yok.
- Renk Şeması OluşturucuTemel renkten tamamlayıcı, benzer, üçlü, dörtlü ve monokromatik palet oluşturun. Yükleme yok.
Sıkça sorulan sorular
Bir palet çıkarıcı genellikle kaç renk döndürür?
Çoğu araç varsayılan olarak 5 ila 16 renk döndürür; ancak birçoğu sayıyı ayarlamanıza izin verir. Daha az renk döndürmek, algoritmanın daha fazla pikseli bir araya getirmesi gerektiği anlamına gelir; bu da farklı ama benzer tonları birleştirebilir. Daha fazla renk döndürmek, kullanımda ayrı tutulması zor neredeyse kopyalar üretebilir. Bir arayüz paleti için 6 ila 8 renk genellikle pratik bir başlangıç noktasıdır.
Bir görselden çıkarılan palet otomatik olarak WCAG kontrastını geçebilir mi?
Otomatik olarak geçemez. Fotoğraftaki baskın renkler genellikle orta parlaklığa sahip orta tonlardır; bunlar birbirine karşı genellikle 2:1 ile 3:1 arasında oranlar üretir. Gövde metni için 4.5:1 eşiğini karşılamak, genellikle arka plan değerlerini aydınlatmayı veya metin değerlerini ham çıkarmanın sağladığının ötesinde koyulaştırmayı gerektirir. Çıkarma size başlangıç noktasını verir; kontrast kontrolü ne kadar ayarlama gerektiğini söyler.
WCAG kontrast oranı renk körlüğünü hesaba katar mı?
Kısmen. WCAG parlaklık formülü, tona değil göreli parlaklığa dayanır; dolayısıyla 4.5:1'i karşılayan yüksek kontrastlı bir çift, parlaklık farkı korunduğu için genellikle renk körü kullanıcılar için de ayırt edilebilir kalır. Ancak, aynı parlaklıkta kırmızı ve yeşil gibi benzer parlaklıklı ama farklı tonlu iki renk, parlaklık tabanlı kontrast kontrolünü geçerken deuteranoplar için hala ayırt edilemez olabilir. Renk körlüğü simülasyonu çalıştırmak, ton düzeyinde farklılaşmayı kontrast oranından ayrı olarak kontrol etmenin doğru yoludur.