Erişilebilir Marka Renkleri: Kontrast ve Renk Körlüğü

Bir marka paleti çoğu zaman beğeni, sektör alışkanlıkları ve rakiplerden ayrışma gibi ölçütlerle seçilir. Bu ölçütler önemlidir, ama paletin web sitesinde, sunumda, sosyal medyada ve uygulamada nasıl çalışacağını söylemez. Açık bir turkuaz beyaz zeminde çok güzel görünebilir ve aynı turkuazla yazılmış bir paragraf birçok kişi için okunması zor bir metne dönüşebilir. Bu yazıda bir marka paletini erişilebilirlik açısından nasıl değerlendireceğinizi, W3C'nin resmi belgelerine dayanarak anlatıyoruz. Kendi renklerinizi denemek için Marka Paleti Kontrolü aracını yazı boyunca yanınızda açık tutabilirsiniz.

Kontrast oranı nedir, nasıl hesaplanır?

WCAG, iki renk arasındaki farkı tonla değil, bağıl parlaklık (relative luminance) üzerinden ölçer. Bağıl parlaklık, bir rengin en koyu siyah için 0, en açık beyaz için 1 olacak biçimde normalize edilmiş parlaklığıdır; sRGB renkleri için kırmızı, yeşil ve mavi kanalların farklı ağırlıklarla toplanmasıyla hesaplanır 5. Yeşil kanalın ağırlığı en yüksek, mavinin en düşüktür; bu yüzden aynı doygunluktaki bir sarı ile bir lacivert çok farklı parlaklık değerlerine sahiptir.

Kontrast oranı ise iki rengin bağıl parlaklığından şu formülle bulunur: açık rengin parlaklığına 0,05 eklenir ve koyu rengin parlaklığına 0,05 eklenmiş değere bölünür 5. Sonuç 1 ile 21 arasında bir değerdir ve 1:1 ile 21:1 biçiminde yazılır 5. Siyah ile beyaz arasındaki oran 21:1'dir; aynı iki renk arasındaki oran 1:1'dir.

W3C, eşiklerin yuvarlanmaması gerektiğini de vurguluyor: hesaplanan 4,499:1 değeri 4,5:1 eşiğini karşılamaz 1. Bu yüzden sınırda kalan renklerde araçların gösterdiği yuvarlanmış değerlere değil, tam değere bakmak gerekir.

WCAG 2.2'nin renkle ilgili dört ölçütü

Marka renklerini doğrudan ilgilendiren dört başarı ölçütü vardır:

Büyük metin, en az 18 punto ya da 14 punto kalın metin olarak tanımlanıyor; W3C bunun ekranda yaklaşık 24 ve 18,5 CSS pikseline denk geldiğini belirtiyor 1. Yani paletinizde 3:1 ile 4,5:1 arasında kalan bir renk, büyük başlıklarda kullanılabilir ama gövde metninde kullanılamaz.

1.4.11 ölçütü marka paletleri için sık gözden kaçar. Bir giriş alanının kenarlığı, bir onay kutusunun işareti, bir grafiğin çizgileri ya da anlam taşıyan tek başına bir ikon da bu ölçüte tabidir 3. Açık gri kenarlıklı form alanları ya da pastel tonlardaki grafik serileri bu yüzden sorun yaratabilir. İkonlar için ayrıntıları ikon ve illüstrasyon dili yazısında anlattık.

Logolar için istisna

WCAG, logoları kontrast gereksinimlerinin dışında tutuyor. 1.4.3 ölçütüne göre logonun ya da marka adının parçası olan metin için kontrast gereksinimi yok 1. 1.4.11 ölçütünde de logolar, kurumsal kimlik ya da marka kurallarının belirlediği renklere uymak zorunda oldukları varsayımıyla istisna tutuluyor 3.

Bu istisnanın iki sınırı var. Birincisi, logo bir bağlantı ya da düğme gibi işlev görüyorsa W3C, marka kuralları izin veriyorsa yeterli kontrastlı bir logo sürümünün seçilmesini öneriyor 3. İkincisi, logo normalde yeterli kontrastla gösteriliyor ama tasarım tercihi olarak soluk sunuluyorsa, örneğin üzerine gelinene kadar silik duran iş ortağı logoları gibi, bu sunum istisnadan yararlanmıyor 3. Pratik sonuç şudur: logonun kendisi değişmez, ama kimlik sisteminde koyu ve açık zeminler için farklı logo sürümleri tanımlamak bu sorunları baştan önler.

Renk körlüğü: ton değil açıklık farkı

ABD Ulusal Göz Enstitüsü (NEI), erkeklerin yaklaşık 12'de 1'inde renk görme eksikliği bulunduğunu ve erkeklerde riskin kadınlara göre çok daha yüksek olduğunu belirtiyor 6. En yaygın türün kırmızı ile yeşili ayırt etmeyi zorlaştırdığını; başka bir türün mavi ile sarıyı aynı gösterdiğini; nadir durumlarda ise hiç renk görülmediğini açıklıyor 6. Renk görme eksikliğinin çoğunlukla doğuştan olduğunu, ancak göz ve beyin hastalıkları ya da yaşa bağlı değişikliklerle sonradan da ortaya çıkabileceğini de not ediyor 6.

W3C'nin kontrast ölçütü bu yüzden tona değil açıklığa dayanır: renk görme eksikliği olan kişiler bazı tonları ayırt edemese de açık ve koyu arasındaki farkı algılayabilir 1. 1.4.1 ölçütü ise rengin bilgi aktarmanın tek görsel yolu olmamasını ister. W3C'nin örneklerinde zorunlu form alanları kırmızı yazının yanında bir simgeyle de işaretleniyor; bir şemadaki öğeler de renklerin yanında numaralarla ayırt ediliyor 4.

Aynı belgede marka paletleri için önemli bir not daha var: renkler yalnızca tonda değil açıklıkta da belirgin biçimde farklıysa ve aralarındaki kontrast oranı en az 3:1 ise, bu açıklık farkı ek bir görsel ayrım sayılıyor 4. W3C örnek olarak açık bir yeşil ile koyu bir kırmızıyı veriyor. Yani paletinizdeki iki rengi grafik serisi ya da durum göstergesi olarak yan yana kullanacaksanız, birini belirgin biçimde açık, diğerini belirgin biçimde koyu seçmek sorunu büyük ölçüde çözer. Yine de kullanıcının belirli bir rengi doğru algılamasına dayanan durumlarda ek bir görsel işaret gerekir 4.

Marka paleti için bunun anlamı açıktır: paletteki renkleri yalnızca tonlarıyla birbirinden ayırmak yetmez. Kırmızı ve yeşil gibi açıklık değeri birbirine yakın iki marka rengi, durum göstergesi ya da grafik serisi olarak yan yana kullanıldığında birçok kişi için tek renk gibi görünür.

Paletten erişilebilir renk çiftleri kurmak

Aşağıdaki tablo, kurgusal bir marka paletindeki renkler için WCAG formülüyle yaptığımız hesapları gösteriyor. Değerler yuvarlanmıştır ve yalnızca örnek amaçlıdır:

Tablodaki örnekler, bir marka renginin eşiği geçmediği için paletten çıkarılması gerekmediğini gösteriyor. Sarı, beyaz zeminde metin olarak kullanılamaz ama koyu zemin üzerinde güçlü bir metin rengi olur. Turuncu, büyük başlıklarda kalabilir; gövde metni için aynı tonun daha koyu bir sürümü eklenir. Kendi paletiniz için şu adımları izleyin:

1. Paletteki her rengi, kullanılacağı tüm zeminlerle eşleştirerek bir kontrast matrisi çıkarın.
2. Her çifti 4,5:1, 3:1 ve altı olmak üzere üç gruba ayırın; bu gruplar metin, büyük metin ve ikon, yalnız dekoratif kullanım anlamına gelir.
3. Metin için kullanılamayan ana renklere, aynı tonun metin için uygun koyu ya da açık bir sürümünü ekleyin.
4. Durum renklerini, örneğin hata, uyarı ve başarı renklerini, açıklık değerleri birbirinden belirgin biçimde farklı olacak şekilde seçin ve her zaman bir simge ya da metinle birlikte kullanın.
5. Paleti renk körlüğü simülasyonuyla ve gri tonlamada kontrol edin.
6. Sonuçları kılavuzda onaylı renk çiftleri tablosu olarak yazın.

Bu adımların ilk ikisini ve beşincisini Marka Paleti Kontrolü aracı sizin için yapar: girdiğiniz renkler için kontrast matrisini çıkarır, her çifti metin, büyük metin ve ikon ya da yalnız dekoratif olarak etiketler ve protan, deutan ve tritan simülasyonlarıyla renklerin birbirinden ayrılıp ayrılmadığını gösterir. Araç CMYK ya da Pantone dönüşümü yapmaz; baskı renkleri için prova kontrolü ayrıca gerekir.

Erişilebilirliği kimlik sistemine yerleştirmek

Erişilebilirlik, palet seçildikten sonra yapılan bir düzeltme olarak ele alındığında genellikle markanın karakterinden ödün verilir. Oysa palet oluşturulurken ele alındığında, aynı karakteri koruyan ama her ortamda okunur kalan bir sistem kurmak mümkündür. Renklerin nasıl seçildiğini marka renk paleti nasıl oluşturulur yazısında anlattık. Erişilebilir renk çiftlerini, logo sürümlerini ve ikon renklerini birlikte tanımlayan kimlik sistemini kurumsal kimlik tasarımı hizmetimizde hazırlıyoruz.