Tasarımınızın erişilebilir renk kontrastını test etmek ve doğrulamak için kullanabileceğiniz üç araca ve tekniğe genel bakış.
Açık renkli bir arka plan üzerinde şuna benzer bir metniniz olduğunu varsayalım:
Tüm örnekler sizin için okunaklı olsa da bu durum herkes için geçerli değildir.
Erişilebilir renk kontrastı, metnin herkes tarafından okunabilir olmasını sağlayan bir uygulamadır. Kontrastı test etmek bazen kolay, bazen de çok zordur. Bu makalenin sonunda, en zor senaryolarla başa çıkabilmeniz için web tasarımınızın kontrastını denetlemek, düzeltmek ve doğrulamak üzere üç yeni araç ve teknik edineceksiniz.
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 sağlar. 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, erişilebilirlik için önemli bir koşulu kapsar: minimum kontrast.
WCAG 2.1'de iki renk arasındaki ilişki, kontrast oranlarıyla (yani iki rengin parlaklığını karşılaştırdığınızda elde ettiğiniz sayı) açıklanır. Parlaklık, bir rengin siyah (%0) veya beyaza (%100) ne kadar yakın olduğunu tanımlamanı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 da güvenilir bir yöntem benimsenecek olsa da şu anda elimizdeki en iyi yöntem WCAG'dir.
Kurallar nelerdir?
Daha yüksek kontrast oranları daha yüksek bir sayı (ör.3 yerine 4, 5 veya 7) ile puanlanır. Puanlama tablosuyla daha fazla bilgi edinmek için Polypane'ın Kontrast Denetleyicisi'ne göz atın.
Renkler arasındaki kontrastı test etme
Peki, neyi aradığımızı bildiğimize göre bunu nasıl test ederiz? Web sitenizin kontrastını incelemenize, düzeltmenize ve ölçmenize yardımcı olacak üç ücretsiz araç aşağıda verilmiştir. Her birinin güçlü ve zayıf yönleri açıklanır. Böylece, sitenizin renklerinin ve içeriğinin erişilebilirliğini birçok şekilde güvenle test edebilirsiniz.
- Pika
Ekranın tamamındaki renklerin, degradelerdeki renklerin, şeffaf renklerin ve daha fazlasının kontrastını benzersiz bir şekilde gösterebilen bir macOS uygulaması. Amaç açıktır, kullanıcılar karşılaştırılacak pikselleri manuel olarak seçer. Çok daha fazla özellik kazanımı için biraz daha az otomatik. - VisBug
Tek seferde birden fazla kontrast yer paylaşımı gösterebilen, tarayıcılar arası bir uzantı ancak DevTools gibi bazen amacı algılayamaz. - Chrome Geliştirici Araçları
Chrome'a yerleşik olan Geliştirici Araçları, renk sorunlarını inceleme, düzeltme ve hata ayıklamanın çeşitli yollarını sunar. Ancak degradeleri ve yarı saydam renkleri incelerken eksiklikleri vardır ve bazen amacı algılayamaz.
Pika (macOS uygulaması)
Bir rengi tarayıcı dışında test etmeniz gerektiğinde veya saydamlık ya da degradeler söz konusu olduğunda DevTools veya VisBug kontrastı düzgün şekilde değerlendiremiyorsa Pika'dan yardım alabilirsiniz. Pika, web aracı değil sistem aracı olduğu için ekrandaki her piksele erişebilir.
Bu, Pika'nın kullanıcı deneyiminin DevTools veya VisBug'dan farklı olduğu anlamına da gelir. DevTools ve VisBug, tarayıcı DOM'undaki metin ve arka plan renklerini göstermek için ellerinden geleni yapar. Pika'nın karşılaştırdığı renkler ise ekrandaki herhangi bir noktadan manuel olarak seçilir. Bu, Pika'ya daha fazla kontrol sağlar ve bazı ek kullanım alanları sunar:
- Tarayıcıda olup olmadığına bakılmaksızın iki rengi karşılaştırma. Ekranınızda görebildiğiniz renkleri test edebilirsiniz.
- Renkleri şeffaflıkla karşılaştırma.
- Gradyanlardaki renkleri karşılaştırma.
- CSS'deki mix-blend-mode gibi harmanlama modlarını kullanan renkleri karşılaştırma
İki rengi karşılaştırma
Metni 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 pikselleri ile 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
Gradyan veya resimdeki metni karşılaştırın. Burada "Lasso"nun L harfi, resmin açık mavisiyle karşılaştırılmıştır:
VisBug
VisBug, tasarımcıların ve geliştiricilerin web sitesi tasarımlarını görsel olarak inceleyip hata ayıklayabilecekleri ve üzerinde oynayabilecekleri, FireBug'dan ilham alan bir araçtır. Kullanıcıların aşina olduğu ve kullanmayı sevdiği tasarım araçlarının kullanıcı arayüzünü ve kullanıcı deneyimini taklit ederek Chrome Geliştirme Araçları'na kıyasla daha düşük bir giriş eşiğine sahip olması amaçlanmıştır.
VisBug'u deneyin veya Chrome, Firefox, Edge, Brave veya Safari'ye yükleyin.
Bu araç tekliflerinden biri Erişilebilirlik Denetleme aracıdır.
Tarayıcılarda (ve hatta mobil cihazlarda) inceleme
Erişilebilirlik İncele aracı tıklandıktan sonra, kullanıcının işaret ettiği veya klavyeyle gittiği her şeyin erişilebilirlik bilgileri ipucu metninde raporlanır. Bu ipucu, bulunan ön plan ve arka plan renkleri arasındaki renk karşılaştırmalarını içerir.
Bir veya daha fazlasını denetleyebilirsiniz.
DevTools'ta tek bir renk eşlemesini inceleyebilir veya sayfadaki tüm renk eşlemelerinizin raporunu alabilirsiniz. Ancak VisBug, birden fazla renk eşlemesine izin vererek bu iki seçenek arasında iyi bir denge sunar. Bir öğeyi tıkladığınızda ipucu yerinde kalır. Üst karakter tuşunu basılı tutarken 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, bu bileşen parçalarının tümünü aynı anda görmenizi sağlar. Tasarım incelemeleri için de mükemmeldir.
Chrome Geliştirici Araçları
Chrome yüklüyse birçok kontrast testi aracına zaten sahipsinizdir:
- Renk seçici
- İnceleme ipucunu
- 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 DevTools renk seçici
Öğeler panelinin Chrome Geliştirici Araçları Stil bölümünde, renk değerlerinin yanında küçük bir görsel kare renk paleti bulunur. Bu palet 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 planla olan kontrastı gösterilir.
Aşağıdaki örnekte, özel mülk renk değeri için renk seçici açılmıştır. Kontrast oranı puanı 15,79 olarak raporlanır ve iki yeşil onay işareti bulunur.Bu, puanın AA ve AAA WCAG 2.1 şartlarını karşıladığını gösterir:
Renk Seçici'de 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 de vardır. Renk seçici, erişilebilir renk kontrastı puanı başarısız olduğunda AA ve AAA puan hedeflerini ve bir damlalık aracını göstermek için genişletilebilir. AA ve AAA'nın yanında, tıklandığında size en yakın renk seçeneğini bulan bir renk paleti ve yenileme simgesi bulunur:
Renkler konusunda seçici değilseniz otomatik düzeltme özelliği, erişilebilirlik yönergelerine uymanın ve görevi tamamlamak için çok fazla çalışmanın harika bir yoludur.
Denetleme ipucu
Öğe seçim aracında, sayfanın üzerine gelindiğinde genel yazı tipi, renk ve erişilebilirlik bilgilerini bildiren özel bir özellik bulunur. Öğe seçim aracı, aşağıdaki ekran görüntüsünde soldaki simgedir. Sağ alt köşede ok imleci bulunan kutudur. Control+Shift+C (veya MacOS'te Command+Shift+C) kısayolunu kullanarak da seçebilirsiniz.
Etkinleştirildikten sonra simge mavi olur ve sayfadaki herhangi bir yere geldiğinizde aşağıdaki hızlı inceleme ipucunu görürsünüz:
Stiller bölmesinde renk paletini bulmanızı gerektiren renk seçici aracı yerine bu araç, kontrast puanlarını görmek için sayfayı işaretlemenizi sağlar. Renk seçici gibi, tek seferde yalnızca bir kontrast puanı gösterebilir.
Bump bump 'til you pass 🎶
Bu hızlı inceleme aracıyla sık sık bir renk eşlemesini inceler ve gerekli orana ulaşamadığını fark ederim. Renk seçicinin otomatik düzeltme özelliğini kullanmak yerine (titiz olduğum için) CSS'de renk kanallarını değiştirip ihtiyacım olan orana ulaşana kadar izlerim. Bu işlemi, WCAG 2.1'i geçene kadar renk kanalı numaralarını artırdığım için"geçene kadar artır" olarak adlandı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 İncele aracını etkinleştirin.- Fare imlecini bir hedefin üzerine getirin.
- Renk değerindeki sayıları değiştirmek için klavyede yukarı/aşağı tuşlarına basın.
Bu, klavyenizdeki odak CSS stil değerinde kalırken fareyle bir hedefi işaretlemenize olanak tanıdığı için işe yarar. Hedefinizi tıklamamaya dikkat edin. Aksi takdirde, odak renk değeri alanından ayrılır ve yeniden odaklanana kadar değerleri değiştirmenize izin vermez.
CSS'ye genel bakış
Bu noktaya kadar Chrome Geliştirici Araçları, bir seferde tek bir renk eşlemesine bakma yöntemleri sunuyordu. Ancak CSS'ye Genel Bakış, sayfanızı tamamen tarayabilir ve erişilemeyen tüm eşlemeleri tek seferde sunabilir:
Bu özellik hakkında daha fazla bilgiyi CSS'ye Genel Bakış: CSS'de iyileştirilebilecek noktaları tespit edin başlıklı makalede bulabilirsiniz. Dilerseniz YouTube'da Jecelyn Yeen'in DevTools İpuçları serisinde CSS'ye Genel Bakış paneliyle CSS'de iyileştirilebilecek noktaları nasıl tespit edebileceğinizi öğrenebilirsiniz.
Deniz Feneri
Lighthouse, Chrome Geliştirici Araçları'ndaki bir diğer denetleme aracıdır. Sayfanızı tarayabilir ve erişilemeyen renk eşlemelerini bildirebilir. İncelemeniz için her renk eşleştirmenin küçük ekran görüntülerini (geçerli ve geçersiz) içerir. Başarısız kombinasyonlar Lighthouse puanınızı olumsuz etkiler.
Bu sonuçlar aşağıdaki gibi görünebilir:
JS konsolu
Belki de şu ana kadar listelenen tüm araçlar bulunduğunuz yerde değil. Belki de bulunduğunuz yer (tüm gün) JavaScript'dir. Denemeniz için bir deneme Konsolu'nun Sorunlar bölmesi, siz geliştirirken renk kontrastı erişilebilirlik sorunlarını sürekli olarak bildirebilir. Özelliği Ayarlar > Deneyler bölümünden etkinleştirin.
Ardından, Sorun bölmesini açıp herhangi bir keşif yapılıp yapılmadığını kontrol edin. Bu durumda, aşağıdaki gibi görünebilir:
Renk körlüğü emülasyonu
Renk kontrastı ve erişilebilir renk eşleştirmeleri konusuna değinmişken görme bozukluğu emülasyon aracından bahsetmek de faydalı olacaktır. Bu işlem, tasarımınızın renklerini veya görünümünü farklı renk körlüğü türlerinin sonuçlarını göstermek için değiştirir. Böylece, kullanıcı deneyiminin kullanıcıyla iletişim kurmasının tek yolu renk olmaması için tasarımınızı değiştirme fırsatı elde edersiniz.
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şilleri veya kırmızıları aynı şekilde görmez. Bu emülasyon aracı, bu durumu 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ştiriyor. Bu sayede kullanıcı arayüzünde daha az veya daha fazla kontrast kişiselleştirme isteğinde bulunabiliyorlar. CSS, açık veya koyu tema tercihlerinde olduğu gibi bu ayara da erişebilir. Chrome DevTools, bu tercihi taklit etme olanağı sunar. Böylece tasarımlar, ayarı sistemden değiştirmeden test edilebilir ve kullanıcı isteğine uyarlanabilir.
WCAG 3.0 APCA'yı deneyin
Denemeniz gereken bir diğer deneme, renk eşlemelerinizi deneysel APCA renk oranı puanlama sistemiyle test etmektir. Ayarlar > Deneyler bölümünden etkinleştirilen bu özellik, WCAG 2.1 oran sistemini daha yeni ve iyileştirilmiş bir kontrast kontrol algoritmasıyla değiştirir. Böylece, öneri standartlara uygun hale geldikçe sonuçlarını önizleyebilirsiniz.
Etkinleştirildikten sonra, renk eşleştirme puanını görmek ve puanı geçip geçmediğini öğrenmek için nokta incelemesi ipucunu veya renk seçiciyi kullanın:
Sonuç
Renk kontrastı, web'de erişilebilirlik için önemli bir parçadır ve bu kurala uymak, web'i en çeşitli durumlarda en fazla sayıda kullanıcı için daha kullanılabilir hale getirir. Bu üç aracın, mükemmel renk seçimleri yapma konusunda kendinizi güçlü hissetmenize yardımcı olacağını umuyoruz.