Web Tasarımı Renk Kontrastı Testi

Tasarımınızın erişilebilir renk kontrastını test etmek ve doğrulamak için kullanılan üç araç ve teknike genel bakış.

Açık renk bir arka plan üzerinde aşağıdaki gibi bir metin olduğunu varsayalım:

Örneklerin tümü sizin tarafınızdan okunabilir olsa da bu, herkes için geçerli değildir.

Erişilebilir renk kontrastı, metnin herkes tarafından okunabilmesini sağlayan bir uygulamadır. Kontrastı test etmek bazen kolaydır, bazen de çok zordur. Bu yazının sonunda, web tasarımı kontrastını incelemek, düzeltmek ve doğrulamak için üç yeni araç ve teknikle karşılaşacaksınız. Böylece, en zorlu senaryolarla başa çıkabileceksiniz.

WCAG ve renk kontrastı

W3C'nin Web Erişilebilirlik Girişimi, internetin mümkün olduğunca fazla kişi için erişilebilir olmasını sağlamak amacıyla stratejiler, standartlar ve kaynaklar sağlar. Bu standartları destekleyen yönergelere Web İçeriği Erişilebilirlik Yönergeleri (WCAG) denir. En yeni kararlı sürüm olan WCAG 2.1, önemli bir erişilebilirlik gereksinimini karşılar: minimum kontrast.

WCAG 2.1'de iki renk arasındaki ilişki, iki rengin parlaklığını karşılaştırdığınızda elde ettiğiniz kontrast oranıyla açıklanır. Parlaklık, bir rengin siyaha (%0) veya beyaza (%100) ne kadar yakın olduğunu açıklamanın bir yoludur. WCAG, web'in erişilebilir olması için bu karşıtlık oranının ne olması gerektiğiyle ilgili bazı kurallar ve hesaplama algoritmaları tanımlar. Ancak bu hesaplamayla ilgili bilinen sorunlar vardır. Sonunda daha da güvenilir bir yöntem benimsenecektir, ancak şu anda sahip olduğumuz en iyi yöntem WCAG'dir.

Kurallar nelerdir?

Daha yüksek bir kontrast oranı, 3 yerine 4,5 veya 7 gibi daha yüksek bir sayıyla puanlanır. Puanlama tablosuna daha aşina olmak için Polypane's Contrast Checker (Polypane'nin Kontrast Denetleyicisi) sitesine göz atın.

Renkler arasındaki kontrastı test etme

Şimdi ne aradığımızı bildiğimize göre, bunu nasıl test edeceğiz? Web sitenizin kontrastını incelemenize, düzeltmenize ve ölçmenize yardımcı olacak üç ücretsiz aracı aşağıda bulabilirsiniz. Sitenizin renklerinin ve içeriğinin erişilebilirliğini çeşitli yöntemlerle güvenle test edebilmeniz için, her birinin güçlü ve zayıf yanları açıklanacaktır.

1. Pika
   Ekranın tamamında her rengin kontrastını, gradyanlardaki renkleri, şeffaf renkleri ve daha fazlasını gösterebilen bir MacOS uygulaması. Amaç açıkça belirtilmiş. Kullanıcılar karşılaştırılacak pikselleri manuel olarak seçiyor. Biraz daha az otomatik ve büyük bir özellik kazanıyor.
2. VisBug
   Aynı anda benzersiz bir şekilde birden fazla kontrast yer paylaşımı gösterebilen, ancak Geliştirici Araçları gibi bazen niyeti algılayamayan tarayıcılar arası bir uzantıdır.
3. Chrome Geliştirici Araçları
   Geliştirici Araçları, Chrome'da yerleşik olarak bulunduğundan renk sorunlarını denetlemek, düzeltmek ve hata ayıklamak için çeşitli yollara sahiptir, ancak renk geçişlerini ve yarı şeffaf renkleri incelemede eksiklikler vardır ve bazen amacı algılayamazlar.

Pika (macOS uygulaması)

Geliştirici Araçları veya VisBug, kontrastı doğru şekilde değerlendiremiyorsa (örneğin, tarayıcının dışında bir rengi test etmeniz gerektiğinde ya da şeffaflık veya renk geçişleri gerekli olduğunda), Pika günü kurtarabilir. Pika bir web aracı değil, bir sistem aracı olduğundan ekrandaki tüm piksellere erişebilir.

Pika'yı indir

Ayrıca, Pika kullanımıyla ilgili kullanıcı deneyiminin Geliştirici Araçları veya VisBug'dan farklı olduğu anlamına da gelir. DevTools ve VisBug tarayıcı DOM'sinden metin ve arka plan renklerini göstermek için ellerinden geleni yaparken Pika'nın karşılaştırdığı renkler ekranın herhangi bir noktasından manuel olarak seçiliyor. Bu, Pika'ya daha fazla kontrol sağlar ve bazı ek kullanım alanları sunar:

• Tarayıcıda olup olmamalarından bağımsız olarak iki rengi karşılaştırabilirsiniz. Örneğin, ekranınızda görebiliyorsanız test edebilirsiniz.
• Renkleri şeffaflıkla karşılaştırma.
• Renk geçişleri içindeki renkleri karşılaştırma.
• Karıştırma modlarını kullanan renkleri karşılaştırma (CSS'deki karma harmanlama modu gibi).

Herhangi iki rengi karşılaştırma

Metni bir arka plan rengiyle karşılaştırın:

Vektör grafiklerinin fırça ve dolgu renklerini karşılaştırma:

Renkleri şeffaflıkla karşılaştırma

Metin rengini çeşitli arka plan örnek pikselleriyle karşılaştırın. Burada, arka plan karşılaştırma rengi olarak buzlu cam efektindeki en açık gri kullanılır.

Renkleri gradyanlarla karşılaştırma

Bir gradyan veya resim üzerindeki metni karşılaştırın. Burada "Lasso"dan alınan L, resmin açık mavisiyle karşılaştırılır.

VisBug

VisBug, tasarımcılara ve geliştiricilerin web sitesi tasarımlarını görsel olarak incelemesi, hata ayıklaması ve üzerinde oynamaları için FireBug'dan esinlenmiş bir araçtır. İnsanların bildiği ve kullanmayı sevdiği tasarım araçlarının kullanıcı arayüzü ve kullanıcı deneyimini taklit ederek Chrome Geliştirici Araçları'na kıyasla daha düşük bir giriş engeli olması amaçlanıyor.

VisBug'ı deneyin veya Chrome, Firefox, Edge, Brave veya Safari'den yükleyin.

Sunduğu araçlardan biri Erişilebilirlik Denetleme aracıdır.

Tarayıcılarda (ve hatta mobil cihazlarda) denetleme

Erişilebilirlik Denetimi aracı tıklandıktan sonra, kullanıcının işaret ettiği veya klavyenin gittiği her şeye ait erişilebilirlik bilgileri ipucunda bildirilir. Bu ipucu, keşfedilen ön ve arka plan renklerinin renk karşılaştırmalarını içerir.

Bir veya daha fazla öğeyi denetleme

Geliştirici Araçları, tek bir renk eşlemesine bakabilir veya sayfadaki tüm renk eşlemelerinizin raporunu alabilir ancak VisBug birden fazla renk eşlemesine izin vererek faydalı bir orta yol sunar. Bir öğeyi tıkladığınızda araç ipucu yerde kalır. Üst Karakter tuşunu basılı tutup diğer öğeleri tıklamaya devam edin. Tüm ipuçları olduğu gibi kalır:

Bu, özellikle bir bileşenin birden fazla parçasının kontrast oranı puanlarını geçmesi gereken bileşen tabanlı tasarım için önemlidir. Bu yöntem, bu bileşen parçalarının tümünün aynı anda görülmesini sağlar. Tasarım incelemeleri için de idealdir.

Chrome Geliştirici Araçları

Chrome yüklüyse çok sayıda kontrast testi aracına zaten sahipsinizdir:

• Renk seçici
• İnceleme ipucu
• CSS'ye Genel Bakış
• Lighthouse
• JS konsolu
• Renk körü emülasyon araçları
• Sistem renk kontrastı tercihi emülasyonu
• WCAG 3.0 APCA denemesi

Chrome Geliştirici Araçları renk seçici

Nesneler panelinin Chrome Geliştirici Araçları Stiller bölmesinde, renk değerlerinin yanlarında küçük bir kare renk kartelası bulunur. Bu kartelayı tıkladığınızda renk seçici aracını görürsünüz. Mümkünse aracın orta kısmında, ön plan veya arka plan ile rengin kontrastı gösterilmektedir.

Aşağıdaki örnekte, özel bir özellik renk değeri için renk seçici açılmıştır. Kontrast oranı puanı, 15,79 olarak raporlanır ve puanın AA ve AAA WCAG 2.1 gerekliliklerini geçtiğini gösteren iki yeşil onay işaretine sahiptir:

Renk Seçici otomatik düzeltme

Renk seçerken puanı görmek çok kullanışlıdır, ancak Chrome Geliştirici Araçları'nda otomatik düzeltme için ek bir özellik vardır. Renk seçici, başarısız olan erişilebilir bir renk kontrastı puanı bildirdiğinde, genişletilebilir ve böylece AA ve AAA puan hedeflerini ve göz damlalık aracını görebilirsiniz. AA ve AAA'nın yanında kartelalar ve yenileme simgesi bulunur. Bu simge tıklandığında size en yakın geçiş rengi gösterilir:

Renkler konusunda seçici değilseniz otomatik düzeltme özelliği, erişilebilirlik yönergelerine uymak için ve görevi tamamlamak için çok çaba harcamamak için harika bir yoldur.

İnceleme ipucu

Öğe seçim aracının, sayfa üzerine gelindiğinde genel yazı tipi, renk ve erişilebilirlik bilgilerini raporlayan özel bir özelliği vardır. Öğe seçim aracı, aşağıdaki ekran görüntüsünde solda bulunan simgedir. Bu, sağ alt köşesinde bir ok imleci bulunan kutudur. Control+Shift+C kısayol tuşu (veya MacOS'te Command+Shift+C) kullanılarak da seçilebilir.

Etkinleştirildiğinde simge maviye döner ve sayfadaki herhangi bir yere işaret ettiğinde aşağıdaki hızlı inceleme ipucu gösterilir:

Stiller bölmesinde renk kartelasını bulmanızı gerektiren renk seçici aracı yerine, bu araç, kontrast puanlarını görmek için sayfayı işaret etmenize olanak tanır. Renk seçici gibi, araç da aynı anda yalnızca bir kontrast puanı gösterebilir.

Geçinceye kadar tok durun 🎶

Genellikle bu hızlı inceleme aracıyla bir renk eşlemesini inceliyor ve gereken oranı geçmekten kısa sürebiliyorum. Renk seçicinin otomatik düzeltme özelliğini kullanmak yerine (çünkü seçici olduğum için) CSS'deki renk kanallarını yönlendiriyor ve ihtiyacım olan oranı geçene kadar izliyorum. Bu sürece "geçene kadar dokundurma" diyorum, çünkü WCAG 2.1'i geçene kadar renk kanal numaralarını çarpıyorum.

Adımlar aşağıdaki gibidir ve tam sırayla gerçekleştirilmelidir:

1. Klavye odağını Stiller panelindeki bir rengin içine ayarlayın.
2. Öğe inceleme aracını Control+Shift+C (veya MacOS'te Command+Shift+C) klavye kısayoluyla etkinleştirin.
3. İmleci bir hedefin üzerine getirin.
4. Renk değerindeki sayıları değiştirmek için klavyede yukarı/aşağı tuşlarına basın.

Bu, CSS stil değerinde klavye odağınızı korurken fare bir hedefin üzerine gelmenize izin verdiği için işe yarar. Hedefinizi tıklamadığınızdan emin olun. Aksi takdirde odak, renk değeri alanından taşınır ve yeniden odaklanana kadar değerleri sürüklersiniz.

CSS'ye genel bakış

Bu noktaya kadar Chrome Geliştirici Araçları, aynı anda tek bir renk eşlemesine bakmanın yollarını sundu ancak CSS'ye Genel Bakış, sayfanızın tamamını tarayıp erişilemeyen tüm eşlemeleri aynı anda sunabilir:

Bu özellikle ilgili daha fazla bilgi için CSS'ye Genel Bakış: Potansiyel CSS iyileştirmelerini belirleme başlıklı makaleyi okuyun veya YouTube'daki Jecelyn Yeen'in DevTools İpuçları'nı izleyerek CSS'ye Genel Bakış panelini kullanarak CSS iyileştirmelerini belirlemeyi öğretin.

Deniz Feneri

Lighthouse, Chrome Geliştirici Araçları'ndaki bir başka denetleme aracıdır. Sayfanızı tarayıp erişilemeyen renk eşleşmelerini bildirebilir. Uygulamada, her bir renk eşlemesine ait küçük ekran görüntüleri yer alır. Bunları inceleyip başarılı ve başarısız olduğunuzu görebilirsiniz. Başarısız olan kombinasyonlar, Lighthouse puanınızı olumsuz etkiler.

Bu sonuçlar aşağıdaki gibi görünebilir:

JS konsolu

Şu ana kadar listelenen araçların tümü bulunduğunuz yerde olmayabilir. Belki de bulunduğunuz yer (tüm gün) JavaScript'tir. Bu özelliği deneyin. Konsolun Sorunlar bölmesi, oluşturma işlemi sırasında renk kontrastı erişilebilirlik sorunlarını sürekli olarak bildirebilir. Bu özelliği aşağıda gösterildiği gibi Ayarlar > Denemeler'de etkinleştirin:

Ardından, Sorun bölmesini açın ve herhangi bir keşif yapılıp yapılmadığına bakın. Bu durumda etiketler şöyle görünebilir:

Renk körü emülasyonu

Renk kontrastı ve erişilebilir renk eşlemelerinden bahsederken, görme bozukluğu emülasyon aracına da değinmek gerekir. Bu, tasarımınızın renklerini veya görünümünü değiştirerek farklı renk körlüğünün sonuçlarını gösterir. Size tasarımınızı değiştirme fırsatı verir. Böylece, kullanıcı deneyiminin kullanıcılara anlattığı tek yol renk olmaz.

Bilgileri betimlemek için yalnızca renkleri kullanmak güvenli bir erişilebilirlik uygulaması değildir. Örneğin, kötülük için kırmızı, iyilik için yeşil renk kullanılır. Bazı kişiler yeşil veya kırmızı rengi aynı şekilde görmez. Bu emülasyon aracı, bunu deneyimlemenize ve hatırlamanıza yardımcı olur.

Renk kontrastı sistem tercihi emülasyonu

Kullanıcılar işletim sistemlerindeki kontrast ayarlarını giderek daha fazla değiştirerek kullanıcı arayüzlerinde daha az veya daha fazla kontrast kişiselleştirme isteği gönderebiliyorlar. CSS, açık veya koyu tema tercihlerinde olduğu gibi bu ayardan yararlanabilir. Chrome Geliştirici Araçları bu tercihi emüle edebilme özelliği sunar. Böylece tasarımlar, ayarı sistemden değiştirmeden kullanıcı isteğini test edip uyarlayabilir.

WCAG 3.0 APCA'yı deneyin

Deneyebileceğiniz bir diğer deney de renk eşlemelerinizi deneysel APCA renk oranı puanlama sistemiyle test etmektir. Ayarlar > Denemeler yoluyla etkinleştirilen bu özellik, WCAG 2.1 oran sistemi yerine daha yeni ve iyileştirilmiş bir kontrast denetleyicisi algoritmasıyla değiştirilir. Bu sayede, teklif standartlar doğrultusunda çalışırken sonuçların önizlemesini görebilirsiniz.

Etkinleştirildikten sonra, renk eşleme puanını görmek ve geçip geçmediğini görmek için nokta inceleme ipucunu veya renk seçiciyi kullanın:

Sonuç

Renk kontrastı, web'de erişilebilirlik açısından yapbozun önemli bir parçasıdır ve buna bağlı kalmak, web'i en çeşitli durumlarda en çok sayıda kişi için daha kullanılabilir hale getirir. Umarım bu üç araç harika renk seçimleri yapma gücüne yardımcı olur.