Tasarımınızın erişilebilir renk kontrastını test etmek ve doğrulamak için kullanabileceğiniz üç araç ve tekniğe genel bakış.
Açık renkli bir arka plan üzerinde şöyle bir metniniz olduğunu varsayalım:
Örneklerin tümü sizin için okunabilir olsa da herkes için aynı durum geçerli değildir.
Erişilebilir renk kontrastı, metnin herkes tarafından okunabilmesini sağlayan bir uygulamadır. Kontrastı test etmek bazen kolay, bazen de çok zordur. Bu yazının sonunda, en zor senaryoların üstesinden gelebilmek için web tasarımınızın kontrastını inceleme, düzeltme ve doğrulama konusunda üç yeni araç ve teknik öğrenmiş olacaksınız.
WCAG ve renk kontrastı
W3C'nin Web Erişilebilirliği Girişimi, internetin mümkün olduğunca çok kişi tarafından erişilebilir olmasını sağlamak için stratejiler, standartlar ve kaynaklar sunar. Bu standartların temelini oluşturan kurallara Web İçeriği Erişilebilirlik Kuralları (WCAG) denir. En son kararlı sürüm olan WCAG 2.1, önemli bir erişilebilirlik şartını kapsar: minimum kontrast.
WCAG 2.1'de iki renk arasındaki ilişki, kontrast oranlarıyla (iki rengin parlaklığını karşılaştırdığınızda elde ettiğiniz sayı) 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 kontrast oranının ne olması gerektiğiyle ilgili bazı kurallar ve hesaplama algoritmaları tanımlar. Ancak bu hesaplamayla ilgili bilinen sorunlar vardır. Zamanla daha güvenilir bir yöntem benimsenecektir ancak şu anda elimizdeki 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 tablosu hakkında daha fazla bilgi edinmek için Polypane'in Kontrast Kontrol Aracı'na göz atın.
Renkler arasındaki kontrastı test etme
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 araç şunlardır: Her birinin güçlü ve zayıf yönleri açıklanacak, böylece sitenizin renklerinin ve içeriğinin erişilebilirliğini çeşitli şekillerde güvenle test edebileceksiniz.
- Pika
Tüm ekrandaki renklerin, gradyanlardaki renklerin, şeffaf renklerin ve daha fazlasının kontrastını gösterme konusunda benzersiz bir yeteneğe sahip olan macOS uygulaması. Amaç açıkça belirtilir, kullanıcılar karşılaştırılacak pikselleri manuel olarak seçer. Otomasyon düzeyi biraz daha düşük ancak çok daha fazla özellik sunuyor. - VisBug
Aynı anda birden fazla kontrast yer paylaşımı gösterebilen benzersiz bir tarayıcılar arası uzantıdır ancak Geliştirici Araçları gibi bazen amacı algılayamaz. - Chrome Geliştirici Araçları
Chrome'da yerleşik olarak bulunan Geliştirici Araçları; renk sorunlarını incelemek, düzeltmek ve hata ayıklamak için çeşitli yöntemler sunar. Ancak gradyanları ve yarı şeffaf renkleri incelerken eksiklikleri vardır ve bazen amacı algılayamaz.
Pika (macOS uygulaması)
Geliştirici Araçları veya VisBug, kontrastı doğru şekilde değerlendiremiyorsa (ör. tarayıcı dışında bir rengi test etmeniz gerektiğinde veya şeffaflık ya da gradyanlar söz konusu olduğunda) Pika size yardımcı olabilir. Pika, web aracı değil sistem aracı olduğu için ekrandaki her piksele erişebilir.
Bu, Pika'yı kullanırken elde edilen kullanıcı deneyiminin Geliştirici Araçları veya VisBug'dan farklı olduğu anlamına da gelir. Geliştirici Araçları ve VisBug, tarayıcı DOM'undaki metin ve arka plan renklerini göstermek için ellerinden geleni yaparken Pika'nın karşılaştırdığı renkler, ekrandaki herhangi bir noktadan manuel olarak seçilir. Bu sayede Pika daha fazla kontrol sahibi olur ve bazı ek kullanım alanları ortaya çıkar:
- Tarayıcıda olup olmadıklarına bakılmaksızın iki rengi karşılaştırma. Ekranınızda görebildiğiniz her rengi test edebilirsiniz.
- Renkler şeffaflıkla karşılaştırılıyor.
- Renk geçişlerindeki renkleri karşılaştırma
- CSS'de mix-blend-mode gibi karışım modlarını kullanan renkleri karşılaştırma.
İki rengi karşılaştırma
Metni arka plan rengiyle karşılaştırma:
Vektör grafiklerinin kontur ve dolgu renklerini karşılaştırma:
Şeffaf renkler karşılaştırılıyor
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ılmıştır.
Renkleri gradyanlarla karşılaştırma
Metni bir gradyan veya resim üzerinde karşılaştırın. Burada, "Lasso" kelimesindeki L harfi, resmin açık mavi rengiyle karşılaştırılmıştır:
VisBug
VisBug, tasarımcılar ve geliştiricilerin web sitesi tasarımlarını görsel olarak incelemeleri, hata ayıklamaları ve tasarımlarıyla oynamaları için FireBug'dan ilham alan bir araçtır. Kullanıcıların bildiği ve severek kullandığı tasarım araçlarının kullanıcı arayüzünü ve kullanıcı deneyimini taklit ederek Chrome Geliştirici Araçları'na kıyasla daha düşük bir giriş engeli sunmayı amaçlar.
VisBug'ı deneyin veya Chrome, Firefox, Edge, Brave ya da Safari'ye yükleyin.
Bu araçlardan biri de Erişilebilirlik İnceleme aracıdır.
Tarayıcılar arasında (ve hatta mobil cihazlarda) inceleme yapma
Erişilebilirlik İnceleme aracını tıkladıktan sonra, kullanıcının işaret ettiği veya klavyeyle gittiği her şeyin erişilebilirlik bilgileri ipucunda bildirilir. Bu ipucu, algılanan ön plan ve arka plan renkleri arasındaki renk karşılaştırmalarını içerir.
Bir veya daha fazla öğeyi inceleme
Geliştirici Araçları, tek bir renk eşleşmesine bakabilir veya sayfadaki tüm renk eşleşmelerinizin raporunu alabilir. Ancak VisBug, birden fazla renk eşleşmesine izin vererek iyi bir orta yol sunar. Bir öğeyi tıkladığınızda ipucu sabit kalır. Üst Karakter tuşunu basılı tutun ve diğer öğeleri tıklamaya devam edin. Tüm ipuçları yerinde 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, tüm bileşenleri aynı anda görmenizi sağlar. Tasarım incelemeleri için de idealdir.
Chrome Geliştirici Araçları
Chrome yüklüyse birçok kontrast test aracına zaten sahipsiniz demektir:
- Renk seçici
- Denetleme ipucu
- CSS'ye genel bakış
- Lighthouse
- JS konsolu
- Renk körlüğü emülasyon araçları
- Sistem renk kontrastı tercihi emülasyonu
- WCAG 3.0 APCA denemesi
Chrome Geliştirici Araçları renk seçici
Öğeler panelinin Chrome Geliştirici Araçları Stiller bölmesinde, renk değerlerinin yanında küçük bir kare renk örneği bulunur. Bu renk örneği tıklandığında renk seçici aracını görürsünüz. Mümkünse aracın ortasında, rengin ön plan veya arka plana göre kontrastı gösterilir.
Aşağıdaki örnekte, özel nitelik 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 şartlarını karşıladığını gösteren iki yeşil onay işareti bulunur:
Renk seçici otomatik düzeltme
Renk seçerken puanı görmek kullanışlıdır ancak Chrome Geliştirici Araçları'nda otomatik düzeltme için ek bir özellik vardır. Renk seçici, erişilebilir renk kontrastı puanının başarısız olduğunu bildirdiğinde AA ve AAA puan hedeflerini ve damlalık aracını gösterecek şekilde genişletilebilir. AA ve AAA'nın yanında, tıklandığında size en yakın uygun rengi bulacak renk örnekleri ve bir yenileme simgesi bulunur:
Renkler konusunda seçici değilseniz otomatik düzeltme özelliği, erişilebilirlik yönergelerini karşılamanın ve görevi tamamlamak için çok fazla çaba harcamamanın harika bir yoludur.
Denetleme ipucu
Öğe seçim aracının, sayfa üzerine gelindiğinde genel yazı tipi, renk ve erişilebilirlik bilgilerini bildiren özel bir özelliği vardır. Öğe seçim aracı, aşağıdaki ekran görüntüsünde solda yer alan simgedir. Bu, sağ alt köşesinde ok imleci bulunan kutudur. Control+Shift+C (veya MacOS'te Command+Shift+C) kısayol tuşu kullanılarak da seçilebilir.
Etkinleştirildikten sonra simge maviye döner ve sayfadaki herhangi bir öğenin üzerine gelindiğinde aşağıdaki hızlı inceleme ipucu gösterilir:
Stiller bölmesinde renk örneğini bulmanızı gerektiren renk seçici aracı yerine bu araç, kontrast puanlarını görmek için sayfada dilediğiniz yeri işaretlemenize olanak tanır. Renk seçici gibi, aynı anda yalnızca bir kontrast puanı gösterebilir.
Geçene kadar zıpla 🎶
Bu hızlı inceleme aracıyla bir renk eşleşmesini incelediğimde genellikle gerekli oranı karşılamadığını görüyorum. Renk seçicinin otomatik düzeltme özelliğini kullanmak yerine (çünkü titizim) CSS'deki renk kanallarını değiştirip ihtiyacım olan oranı geçene kadar izliyorum. Bu işleme "geçene kadar artır" diyorum çünkü renk kanalı numaralarını WCAG 2.1'i geçene kadar artırıyorum.
Adımlar aşağıdaki gibidir ve tam olarak bu sırayla uygulanmalıdır:
- Klavye odağını Stiller panelindeki bir rengin içine ayarlayın.
Control+Shift+C(veya macOS'teCommand+Shift+C) klavye kısayoluyla öğeyi inceleme aracını etkinleştirin.- Bir hedefin üzerine gelin.
- Renk değerindeki sayıları değiştirmek için klavyede yukarı/aşağı tuşlarına basın.
Bu yöntem, CSS stil değeri klavye odağınızda kalırken fareyle bir hedefi işaretlemenize olanak tanıdığı için işe yarar. Hedefinizi tıklamayın. Aksi takdirde odak, renk değeri alanından uzaklaşır ve yeniden odaklanana kadar değerleri değiştirmenize izin vermez.
CSS'ye genel bakış
Şimdiye kadar Chrome Geliştirici Araçları, renk eşlemelerini tek tek inceleme imkanı sunuyordu. Ancak CSS'e Genel Bakış, sayfanızın tamamını tarayarak erişilemeyen tüm eşlemeleri tek seferde sunabilir:
Bu özellik hakkında daha fazla bilgi edinmek için CSS'ye Genel Bakış: Olası CSS iyileştirmelerini belirleme başlıklı makaleyi okuyun veya Jecelyn Yeen'in YouTube'daki DevTools İpuçları serisinde CSS'ye Genel Bakış paneliyle olası CSS iyileştirmelerini belirleme konulu videoyu izleyin.
Deniz Feneri
Lighthouse, Chrome Geliştirici Araçları'ndaki başka bir denetleme aracıdır. Sayfanızı tarayabilir ve erişilemeyen renk eşleşmelerini bildirebilir. Bu araçta, her renk eşleşmesinin küçük ekran görüntüleri yer alır. Bu ekran görüntülerine bakarak eşleşmenin başarılı olup olmadığını görebilirsiniz. Başarısız olan kombinasyonlar Lighthouse puanınızı olumsuz etkiler.
Bu sonuçlar şu şekilde görünebilir:
JS konsolu
Şimdiye kadar listelenen araçların tümü bulunduğunuz yerde mevcut olmayabilir. Belki de bulunduğunuz yer (tüm gün) JavaScript'tir. Deneyebileceğiniz bir deneme. Konsolun Sorunlar bölmesi, siz derleme yaparken renk kontrastıyla ilgili erişilebilirlik sorunlarını sürekli olarak bildirebilir. Aşağıda gösterildiği gibi Ayarlar > Denemeler bölümünden özelliği etkinleştirin:
Ardından Sorun panelini açın ve herhangi bir sorun tespit edilip edilmediğine bakın. Bu durumda, şöyle görünebilirler:
Renk körü emülasyonu
Renk kontrastı ve erişilebilir renk eşleştirmeleri konusuna değinmişken, görme bozuklukları emülasyon aracından bahsetmekte fayda var. Bu, tasarımınızın renklerini veya görünümünü değiştirerek farklı renk körlüğü türlerinin sonuçlarını gösterir. Böylece tasarımınızı değiştirerek kullanıcı deneyiminin kullanıcıyla iletişim kurmasının tek yolunun renk olmamasını sağlayabilirsiniz.
Bilgileri göstermek için yalnızca renk kullanmak (ör. kötü için kırmızı, iyi için yeşil) güvenli bir erişilebilirlik uygulaması değildir. Bazı insanlar yeşil ve kırmızı renkleri aynı şekilde görmez. Bu emülasyon aracı, bunu deneyimlemenize ve unutmamanıza yardımcı olur.
Renk kontrastı sistem tercihi emülasyonu
Kullanıcılar, işletim sistemlerindeki kontrast ayarlarını giderek daha fazla değiştiriyor. Bu sayede, kullanıcı arayüzlerinde daha az veya daha fazla kontrast kişiselleştirme isteğinde bulunabiliyorlar. CSS, açık veya koyu tema tercihlerinde olduğu gibi bu ayardan da yararlanabilir. Chrome Geliştirici Araçları, bu tercihi taklit etme olanağı sunar. Böylece tasarımlar, sistemden ayarı değiştirmeden kullanıcı isteğini test edebilir ve buna uyum sağlayabilir.
WCAG 3.0 APCA'yı deneyin
Deneyebileceğiniz bir başka yöntem de renk eşlemelerinizi deneysel APCA renk oranı puanlama sistemiyle test etmektir. Ayarlar > Denemeler bölümünden etkinleştirilen bu özellik, WCAG 2.1 oran sistemini daha yeni ve daha iyi bir kontrast kontrol algoritmasıyla değiştirir. Böylece, teklif bir standart üzerinde çalışırken sonuçlarını önizleyebilirsiniz.
Etkinleştirildikten sonra, renk eşleştirme puanını görmek ve başarılı olup olmadığını öğrenmek için nokta inceleme ipucunu veya renk seçiciyi kullanın:
Sonuç
Renk kontrastı, web'de erişilebilirlik için önemli bir parçadır. Bu kurala uymak, web'i en çeşitli durumlarda en fazla sayıda kişi için daha kullanılabilir hale getirir. Umarım bu üç araç, harika renk seçimleri yapmanıza yardımcı olur.