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 tekniğe genel bakış.

Açık renkli bir arka plan üzerinde şuna benzer bir metniniz olduğunu varsayalım:

Örneklerin tümü okunabilir olsa da bu 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 İnisiyatifi, internetin mümkün olduğunca fazla kişi için erişilebilir olmasını sağlamaya yönelik stratejiler, standartlar ve kaynaklar sağlar. Bu standartların temelini oluşturan kurallara Web İçeriği Erişilebilirlik Yönergeleri (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 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. Zaman içinde 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, sitenizdeki renklerin ve içeriklerin erişilebilirliğini çeşitli şekillerde güvenilir şekilde test edebilirsiniz.

1. 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. Biraz daha az otomatik ve büyük bir özellik kazanıyor.
2. VisBug
   Tek seferde birden fazla kontrast yer paylaşımı gösterebilen, tarayıcılar arası bir uzantı ancak DevTools gibi bazen amacı algılayamaz.
3. 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'yı kullanarak bu sorunu çözebilirsiniz. Pika, web aracı değil sistem aracı olduğu için ekrandaki her piksele erişebilir.

Pika'yı indirin

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 ekranın herhangi bir noktasından 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.
• Renk geçişleri içindeki renkleri karşılaştırma.
• CSS'deki mix-blend-mode gibi harmanlama modlarını kullanan renkleri karşılaştırma

Herhangi iki rengin karşılaştırılması

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.

Renk geçişleriyle renkleri 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 ya da Safari'ye yükleyin.

Bu araç tekliflerinden biri Erişilebilirlik Denetleme aracıdır.

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

Erişilebilirlik Denetleme 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 fazla öğeyi inceleyin

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ı tutup diğer öğeleri tıklamaya devam ederseniz tüm ipuçları sabit 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şen parçalarının tek seferde görülebilmesini sağlar. Tasarım incelemeleri için de mükemmeldir.

Chrome Geliştirici Araçları

Chrome yüklüyse zaten birçok kontrast testi aracına sahipsiniz:

• 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 kartela 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 içerir. 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 kolaydı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ı bildirdiğinde AA ve AAA puanı hedeflerini ve göz damlası aracını gösterecek şekilde 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.

İnceleme 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. Bu, sağ alt köşesinde ok imleci bulunan bir kutudur. Ayrıca, Control+Shift+C kısayol tuşu (veya MacOS'te Command+Shift+C) ile de seçilebilir.

Etkinleştirildikten sonra simge mavi olur ve sayfadaki herhangi bir yere işaret ettiğinizde aşağıdaki hızlı inceleme ipucunu görürsünüz:

Stil sekmesinde 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. Renk kanalı numaralarını WCAG 2.1'i geçene kadar dokundurduğum için bu sürece "bump pomp pass you geç" diyorum.

Adımlar aşağıdaki gibidir ve tam olarak bu sırayla uygulanmalıdır:

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

Bu, CSS stil değeri klavyenizdeki odağınıza sahip olmaya devam ederken fare bir hedefi işaret etmenize olanak tanıdığı için işe yarar. Hedefinizi tıklamadığınızdan emin olun. Aksi takdirde odak, renk değeri alanından uzaklaşacak ve yeniden odaklanana kadar değerleri yönlendirmenize izin vermeyecektir.

CSS'ye genel bakış

Bu noktaya kadar, Chrome Geliştirici Araçları bir seferde tek bir renk eşlemesini incelemek için çeşitli yöntemler sunmuştu. Ancak CSS'ye Genel Bakış, sayfanızın tamamını tarayıp 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, geçmeniz ve geçememeniz için her renk çiftinin küçük ekran görüntülerini 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. 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

Giderek daha fazla kullanıcı, işletim sistemlerindeki kontrast ayarlarını değiştirerek kullanıcı arayüzünde daha az veya daha fazla kontrast kişiselleştirme isteğinde bulunabilir. 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 açısından yapbozun önemli bir parçasıdır. Bu kontrasta uymak, web'i çok çeşitli durumlarda en fazla sayıda kullanıcı için daha kullanışlı hale getirir. Bu üç aracın, mükemmel renk seçimleri yapma konusunda kendinizi güçlü hissetmenize yardımcı olacağını umuyoruz.