Web Tasarımı Renk Kontrastını Test Etme

Diyelim ki açık renkli bir arka plan üzerinde bir metniniz var, bunun gibi:

Tüm örnekler sizin için 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. Bazen kontrastı test etmek kolaydır ve bazen gerçekten zordur. Bu yazının sonunda, en zor senaryoların üstesinden gelebilmeniz için web tasarım kontrastınızı incelemek, düzeltmek ve doğrulamak için üç yeni araç ve tekniğe sahip olacaksınız.

WCAG ve renk kontrastı #

W3C’nin Web Erişilebilirlik Girişimi İnternetin mümkün olduğu kadar çok insan için erişilebilir olmasını sağlamak için stratejiler, standartlar ve kaynaklar sağlar. Bu standartları destekleyen yönergelere Web İçeriği Erişilebilirlik Yönergeleri veya WCAG denir. En son kararlı sürüm, WCAG 2.1önemli bir erişilebilirlik gereksinimini kapsar: minimum kontrast.

WİEK 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ıyla tanımlanı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ğine dair bazı kurallar ve hesaplama algoritmaları tanımlar. Var Bilinen Sorunlar yine de bu hesaplama ile. Sonunda daha da güvenilir bir yol benimsenecek, ancak şu anda WCAG elimizdeki en iyisidir.

Kurallar neler? #

Daha yüksek bir kontrast oranı, 3 yerine 4,5 veya 7 gibi daha yüksek bir sayı ile puanlanır. Puanlama tablosunu daha yakından tanımak için şuraya bakın: Polypane’in Kontrast Denetleyicisi.

Renkler arasındaki kontrastı test etme #

Artık ne aradığımızı bildiğimize göre, bunu nasıl test edeceğiz? İşte web sitenizin kontrastını incelemenize, düzeltmenize ve ölçmenize yardımcı olacak üç ücretsiz araç. Sitenizin renklerinin ve içeriğinin erişilebilirliğini birçok yoldan güvenle test edebilmeniz için her birinin güçlü ve zayıf yönleri ana hatlarıyla belirtilecektir.

1. Pika
   Ekranın tamamında herhangi bir rengin kontrastını, degradelerdeki renkleri, şeffaf renkleri ve daha fazlasını gösterebilen benzersiz bir MacOS uygulaması. Amaç açıktır, kullanıcılar karşılaştırılacak pikselleri manuel olarak seçer. Büyük bir özellik kazancıyla biraz daha az otomatik.
2. VisBug
   Tek seferde birden fazla kontrast kaplamasını benzersiz bir şekilde gösterebilen, ancak DevTools gibi, bazen amacı tespit edemeyen bir çapraz tarayıcı uzantısı.
3. Chrome Geliştirme Araçları
   DevTools, Chrome’da yerleşiktir ve renk sorunlarını incelemek, düzeltmek ve hata ayıklamak için çeşitli yollarla doludur, ancak degradeleri ve yarı saydam renkleri incelerken eksiklikleri vardır ve bazen amacı tespit edemez.

Pika (macOS uygulaması) #

DevTools veya VisBug, tarayıcı dışında bir rengi test etmeniz gerektiğinde veya saydamlık veya degradeler söz konusu olduğunda olduğu gibi, kontrastı düzgün bir şekilde değerlendiremezse, o zaman Pika günü kurtarmak için burada. Pika, bir web aracı değil, bir sistem aracı olduğu için ekrandaki her piksele erişebilir.

Pika’yı indirin

Bu aynı zamanda Pika’yı kullanmak için UX’in DevTools veya VisBug’dan farklı olduğu anlamına gelir. DevTools ve VisBug, metin ve arka plan renklerini tarayıcı DOM’undan göstermek için ellerinden geleni yaparken, Pika’nın karşılaştırdığı renkler ekranın herhangi bir noktasından manuel olarak seçilir. Bu, Pika’ya daha fazla kontrol sağlar ve bazı ek kullanım durumları açar:

• Tarayıcıda olup olmamalarına bakılmaksızın herhangi iki rengi karşılaştırma – ekranınızda görebiliyorsanız, test edebilirsiniz.
• Renklerin şeffaflıkla karşılaştırılması.
• Degradelerdeki renkleri karşılaştırma.
• CSS’deki mix-blend-modu gibi karışım modlarını kullanan renkleri karşılaştırma.

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

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

Vektör grafiklerinin kontur ve dolgu renklerini karşılaştırın:

Renkleri saydamlıkla karşılaştırma #

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

Renkleri degradelerle karşılaştırma #

Bir degradedeki veya bir görüntüdeki metni karşılaştırın. Burada “Lasso”daki L, görüntünün açık mavisiyle karşılaştırılır:

VisBug #

VisBug bir Ateş Böceği tasarımcıların ve geliştiricilerin web sitesi tasarımlarını görsel olarak incelemeleri, hata ayıklamaları ve oynamaları için ilham verici bir araç. İnsanların bildiği ve kullanmayı sevdiği tasarım araçlarının kullanıcı arabirimini ve kullanıcı deneyimini taklit ederek Chrome DevTools’tan daha düşük bir giriş engeline sahip olması amaçlanmıştır.

VisBug’u deneyin veya üzerine yükleyin Krom, Firefox, Kenar, Cesur veya Safari.

Araç tekliflerinden biri Erişilebilirlik İnceleme aracıdır.

Tarayıcılar arasında (ve hatta mobil cihazlarda) inceleyin #

Erişilebilirlik İnceleme aracı tıklandığında, kullanıcının işaret ettiği veya klavyeyle gezindiği her şeyin erişilebilirlik bilgileri araç ipucunda raporlanır. Bu araç ipucu, keşfedilen ön plan ve arka plan renkleri arasındaki renk karşılaştırmalarını içerir.

Bir veya daha fazlasını inceleyin #

DevTools, tek bir renk eşleştirmesine bakabilir veya sayfadaki tüm renk eşleştirmelerinizin bir raporunu alabilir, ancak VisBug, birden fazla renk eşleştirmesine izin vererek güzel bir orta yol sunar. Bir öğeyi tıkladığınızda araç ipucu yerinde kalır. Shift’i basılı tutun ve diğer öğeleri tıklamaya devam edin; tüm araç ipuçları sabit kalacaktır:

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

Chrome Geliştirme Araçları #

eğer varsa Krom yüklüyse zaten birçok kontrast test aracıyla donatılmış olursunuz:

Chrome DevTools renk seçici #

Elements panelinin Chrome DevTools Styles bölmesinde, renk değerlerinin yanında küçük bir görsel kare renk örneği bulunur. Bu renk örneğine tıklandığında, renk seçme aracını göreceksiniz. Mümkünse, aracın ortası, rengin ön plana veya arka plana karşı kontrastını gösterecektir.

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

Renk Seçici otomatik düzeltme #

Renkleri seçerken puanı görmek kullanışlıdır, ancak Chrome DevTools’un otomatik düzeltme için ek bir özelliği vardır. Renk seçici, erişilemeyen bir renk kontrast puanı bildirdiğinde, AA ve AAA puan hedeflerini ve ayrıca bir göz damlası alet. AA ve AAA’nın yanında renk örnekleri ve tıklandığında sizin için en yakın geçen rengi bulan bir yenileme simgesi bulunur:

Renkler konusunda seçici değilseniz, otomatik düzeltme özelliği erişilebilirlik yönergelerini karşılamanın ve işi bitirmek için çok çalışmamanın harika bir yoludur.

Muayene ipucu #

Öğe seçim aracı, sayfanın üzerine gelindiğinde genel yazı tipi, renk ve erişilebilirlik bilgilerini bildiren özel bir özelliğe sahiptir. Öğe seçim aracı, aşağıdaki ekran görüntüsünde soldaki simgedir. Bu, sağ alt köşede ok imleci bulunan kutudur. Kısayol tuşu kullanılarak da seçilebilir. Control+Shift+C (veya Command+Shift+C MacOS’ta).

Etkinleştirildiğinde, simge maviye dönecek ve sayfadaki herhangi bir şeyin üzerine gelinmesi aşağıdaki hızlı inceleme ipucunu gösterecektir:

Renk örneğini Stiller bölmesinde bulmanızı gerektiren renk seçici aracı yerine, bu araç kontrast puanlarını görmek için sayfanın etrafında gezinmenizi sağlar. Renk seçici gibi, aynı anda yalnızca bir kontrast puanı gösterebilir.

Sen geçene kadar vur vur 🎶 #

Bu hızlı inceleme aracıyla sık sık bir renk eşleştirmesini inceliyorum ve gerekli oranı geçmekte yetersiz kalıyorum. Renk seçicinin otomatik düzeltme özelliğini kullanmak yerine (seçici olduğum için) CSS’deki renk kanallarını dürtüyorum ve ihtiyacım olan oranı geçene kadar izliyorum. Ben bu süreci “geçene kadar vur vur vur” çünkü renk kanalı numaralarını WCAG 2.1’i geçene kadar karıştırıyorum.

Adımlar aşağıdaki gibidir ve tam sırayla yapılmalıdır:

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

Bunun işe yaramasının nedeni, farenin bir hedefin üzerine gelmenize izin verirken, CSS stili değerinin klavye odağınıza sahip olmasıdır. Hedefinize tıklamadığınızdan emin olun, aksi takdirde odak renk değeri alanından hareket edecek ve yeniden odaklanana kadar değerleri itmenize izin vermeyecektir.

CSS’ye genel bakış #

Bu noktaya kadar, Chrome DevTools her seferinde bir renk eşleştirmesine bakmanın yollarını sağladı, ancak CSS’ye Genel Bakış tüm sayfanızı tarayabilir ve erişilemeyen tüm eşleştirmeleri bir kerede sunabilir:

Bu gönderide bu özellik hakkında daha fazla bilgi edinin CSS’ye Genel Bakış: Potansiyel CSS iyileştirmelerini belirleyin veya YouTube’da Jecelyn Yeen’in DevTools Tips size nasıl yapılacağını öğreten dizisini izleyin CSS’ye Genel Bakış paneliyle olası CSS iyileştirmelerini belirleyin.

deniz feneri #

Lighthouse, Chrome DevTools’daki başka bir denetim aracıdır. Sayfanızı tarayabilir ve erişilemeyen renk eşleşmelerini bildirebilir. İncelemeniz, geçmeniz ve kalmanız için her bir renk eşleşmesinin küçük ekran görüntülerini içerir. Başarısız olan herhangi bir kombinasyon, Lighthouse puanınızı olumsuz yönde etkileyecektir.

İşte bu sonuçların nasıl görünebileceği:

JS konsolu #

Belki de şu ana kadar listelenen tüm araçlar bulunduğunuz yerde değildir. Belki de bulunduğunuz yer (tüm gün) JavaScript’tir. İşte denemek için bir deney. Konsolun Sorunlar bölmesi, siz oluştururken tüm renk kontrastı erişilebilirlik sorunlarını sürekli olarak bildirebilir. Aşağıda gösterildiği gibi, Ayarlar > Deneyler’de özelliği etkinleştirin:

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

Renk körü emülasyonu #

Renk kontrastı ve erişilebilir renk eşleşmelerinin sağlanması konusunda, görme kusurları öykünme aracını belirtmekte fayda var. Bu, farklı renk körlüğü çeşitlerinin sonuçlarını göstermek için tasarımınızın renklerini veya görünümünü değiştirecek ve size, UX’in bir kullanıcıyla iletişim kurmasının tek yolunun renk olmaması için tasarımınızı değiştirme fırsatı verecektir.

Kötü için kırmızı ve iyi için yeşil gibi bilgileri tasvir etmek için özel olarak renk kullanmak güvenli bir erişilebilirlik uygulaması değildir. Bazı insanlar yeşili veya kırmızıyı aynı görmez ve bu öykünme aracı bunu deneyimlemenize ve hatırlamanıza yardımcı olacaktır.

Renk kontrast sistemi tercih öykünmesi #

Giderek daha fazla sayıda kullanıcı, işletim sistemlerindeki kontrast ayarlarını değiştirerek, kullanıcı arayüzlerinde daha az veya daha fazla kontrast kişiselleştirme talep etme olanağı sağlıyor. CSS, tıpkı açık veya koyu tema tercihlerinde olduğu gibi bu ayardan yararlanabilir. Chrome DevTools, tasarımların sistemden ayarı değiştirmeden kullanıcı isteğini test edebilmesi ve uyarlayabilmesi için bu tercihi taklit etme yeteneği sunar.

WCAG 3.0 APCA’yı deneyin #

Denenecek başka bir deney, renk eşleştirmelerinizi deneysel APCA renk oranı puanlama sistemiyle test etmektir. Ayarlar > Deneyler üzerinden etkinleştirilen bu özellik, WCAG 2.1 oran sistemini daha yeni ve geliştirilmiş bir kontrast kontrol algoritmasıyla değiştirerek, teklif bir standarda doğru ilerlerken sonuçlarını önizlemenizi sağlar.

Etkinleştirildiğinde, renk eşleştirme puanını görmek ve geçip geçmediğini görmek için nokta inceleme araç ipucunu veya renk seçiciyi kullanın:

Çözüm #

Renk kontrastı, web’de erişilebilirlik yapbozunun önemli bir parçasıdır ve buna bağlı kalmak, web’i en çeşitli durumlarda en fazla sayıda insan için daha kullanılabilir hale getirir. Umarız bu üç araç, harika renk seçimleri yapma konusunda kendinizi güçlü hissetmenize yardımcı olur.