1. Giriş
Last Updated: 05/11/22
Material 3 renk sistemi, dinamik renk algoritmasıyla erişilebilir renk şemaları oluşturur. Ancak renk açısından erişilebilirlik ne anlama gelir? Materyal Tasarım'ın yeni renk sistemi nasıl erişilebilir bir renk şeması oluşturur ve hangi araçlar yardımcı olur?
Neler öğreneceksiniz?
- Rengin erişilebilirlik ve kontrast yönergeleriyle ilişkisi.
- Araçların, erişilebilir bir renk şeması oluşturmaya, düzenleme yapmaya ve kontrastı kontrol etmeye nasıl yardımcı olabileceği
Ön koşullar
Bu laboratuvarda, bazı temel tasarım kavramlarını kullanacağız.
- Mevcut Android renk şemaları ve rolleri hakkında bilgi sahibi olmak
- Figma bilgisi
İhtiyacınız olanlar
- Figma Hesabı
- Figma Designlab dosyası
- Figma eklentisi Material Theme Builder
2. Başlayın
Kurulum
Başlamak için Designlab Figma dosyasına erişmeniz gerekir. Laboratuvar için ihtiyacınız olan her şey Figma dosyasında yer almaktadır. Dosyayı indirebilir ve içe aktarabilir ya da Figma topluluğundan kopyalayabilirsiniz.
Öncelikle Figma'da oturum açın veya hesap oluşturun.
Figma Topluluğu'ndan kopyalama
Designing with accessible colors (Erişilebilir renklerle tasarım) dosyasına gidin veya Figma Community'de Designing with accessible colors'ı arayın. Dosyayı dosyalarınıza kopyalamak için sağ üst köşedeki Kopyala'yı tıklayın.
Dosya düzeni
Dosyayı incelerken, girişle başlayan ve kendi içinde tutarlı bir dosya olduğunu fark edeceksiniz. Her bölüm, birbirine bağlı bir dizi çalışma yüzeyine ayrılır. Bölümle ilgili temel kavramlar ve ardından alıştırmalar yer alır. Bölümler ve alıştırmalar birbirini tamamlar ve sırayla tamamlanmalıdır.
Bu codelab, söz konusu kavramlar ve alıştırmalar konusunda daha ayrıntılı bilgi sunar. Yeni Material You özellikleri hakkında daha fazla bilgi edinmek için codelab'i okuyun.
Intro (Giriş) adlı resim taslağından başlayarak, resim taslaklarını sırayla birbirine bağlayan düğmeler bulunur. Bağlantıya erişmek için düğmeyi tıklayın.
Figma eklentisini yükleme
Bu codelab'de, dinamik renk şemaları ve jetonlar oluşturmak için yeni bir Figma eklentisinden yoğun bir şekilde yararlanılır. Figma eklentisini doğrudan Figma topluluk sayfasından yükleyin veya Figma Community'de "Material Theme Builder"ı arayın.
3. Renk ve erişilebilirlik
Erişilebilirlik, herkes için tasarım yapmanın tek yoludur. Bu sayede, oluşturduğunuz ürünlerin mümkün olan en geniş kitleyi kapsamasını sağlayabilirsiniz.
"Ekranda rengi görebiliyor muyum?" sorusu, renklerle tasarım yaparken dikkate alınması gereken ilk husustur. Kullanıcılar, görme keskinliklerine bağlı olarak renkleri farklı şekillerde algılar.
Renk körlüğü, kullanıcı arayüzü öğelerinin birbirine karışmaması için renk kombinasyonlarının kontrol edilmesi anlamına gelebilir.
Opaklık ve ağırlık, bir rengin gerçek tonu olmasa da rengin nasıl algılandığı üzerinde güçlü bir görsel etkiye sahiptir.
Düşük opaklık kullanmak, metnin okunaksız olmasına neden olabilecek daha açık bir renk oluşturur. Örneğin, miyop olan bir kişi, makul bir mesafede% 30 opaklıkta ayarlanan metni okumakta zorlanır.
Opaklığı dikkatli kullanın ve önerilen yönergelerin dışına çıkmayın.
Yazı tipi ağırlığı da benzer bir etkiye sahip olabilir ve daha koyu arka planlarda daha ince yazı tipi ağırlıklarını hesaba katar. Baskıda çok ince bir yazı tipi kullanıldığında mürekkep yazı tipinin içine "dökülerek" okunması zor bir metin oluşturur. Gözlerimiz de bu efekti ekranlarda oluşturarak boşluğu doldurmaya çalışır.
Koyu arka plan üzerinde ince yazı tipi, klostrofobik bir etki yaratır.
Okunabilirlik ve okunabilirlik arasındaki fark. Bu laboratuvar boyunca metnin okunabilirliğinden bahsedeceğiz. Okunabilirlik, görmenin ne kadar kolay olduğunu ölçerken okunabilirlik, anlamanın ne kadar kolay olduğunu ölçer.
4. Renk kontrastı
Erişilebilirlik kuralları, tasarımcılara ve geliştiricilere kapsayıcı ürünler oluşturmayla ilgili en iyi uygulamaları takip etmemizi sağlamak için uzmanlar tarafından oluşturulmuş tutarlı bir kontrol listesi sunar. WCAG, bu laboratuvarda referans alınan standarttır.
Renk kontrastı, ön plan ve arka plan öğelerinin parlaklığı arasındaki farktır ve oran biçiminde gösterilir. Bu oran ölçütüne not verilir. Örneğin, bir düğmedeki metin ile kapsayıcısı arasındaki kontrastı ölçmek, metnin okunabilir olup olmadığını belirlemeye yardımcı olabilir.
Renk kontrastının başarısız olduğu örnek.
Renk kontrastı yönergeleri, metin ve metin olmayan olmak üzere ikiye ayrılır. Her birinin kendi not seti vardır.
Metin
AA | AAA | |
Büyük Metin | 3:1 | 4,5:1 |
Normal Metin (gövde) | 4,5:1 | 7:1 |
Metin olmayan içerik
AA | |
Metin olmayan (grafik öğeler) | 3:1 |
Şimdi biraz kontrast kontrolü yapalım ve bunu manuel olarak nasıl düzeltebileceğimize bakalım.
- Figma'da kullanıcı arayüzü öğelerindeki renkleri bulun. Büyük metin (#C0BEC5) ile başlayarak (#F5F5FF) arka plan rengi üzerinde yer alır. Online kontrast denetleyicisi kullanılarak bu renkler ön ve arka plana girildiğinde tüm derecelendirmelerde başarısız olduğu görülüyor.
- Metin, arka plan rengine göre çok parlak. Hâlâ online kontrast denetleyicisindeyken, ön plan rengini renk seçiciyle AAA'yı geçene kadar daha koyu bir renge ayarlayın.
- Figma'ya dönerek yeni geçiş rengini büyük metne uygulayın.
- Gövde metni ve düğmeler için de aynı işlemi uygulayın. Her birinde hem metin rengini hem de arka plan rengini kontrol ettiğinizden emin olun.
- ,Simgeye aynı işlemi uygulamak için Grafik Nesneler ve Kullanıcı Arayüzü Bileşenleri bölümündeki sonucu kullanın**.**
- Her öğe için yeni rengi Figma'ya aktarın. Artık tüm öğeler kontrast derecelendirmelerini geçiyor olmalıdır.
Renk kontrastının geçtiği örnek.
Bu işlem muhtemelen uzun sürmüştür ve sonuçlar daha az uyumlu bir renk paleti oluşturmuş olabilir. Bu noktada araçlar size yardımcı olabilir.
5. Parlaklık ile oluşturulmuş
Materyal Tasarım'ın yeni dinamik renk sistemi, ton yerine parlaklık kullanılarak oluşturulur. Yani renk tonu ve doygunluk kaldırılırsa kontrastı gölgeler aracılığıyla görebiliriz.
Bir renk çıkarıldığında, ton paletlerinin oluşturulduğu 5 farklı anahtar renk elde edilir. Ton paleti, beyaz ve siyah dahil olmak üzere on üç tondan oluşur. 100 ton değeri, ışığın maksimum seviyesine eşdeğerdir ve beyaz renkle sonuçlanır. 0 ile 100 arasındaki her ton değeri, renkteki ışık miktarını ifade eder.
Ton paletleri sistemi, herhangi bir renk şemasını varsayılan olarak erişilebilir hale getirmek için çok önemlidir.
Rengi onaltılık değer veya renk tonu yerine tonlamaya göre birleştirmek, tüm renk çıkışlarını erişilebilir kılan temel sistemlerden biridir. Dinamik renk kullanan ürünler, kullanıcının deneyimleyebileceği algoritmik kombinasyonlar erişilebilirlik standartlarını karşılayacak şekilde tasarlandığından şartları karşılar.
Benzer parlaklığa sahip öğeler, okunabilirlik için uygun karşıtlığa sahip değilken farklı parlaklık değerlerine sahip öğeler daha ayırt edicidir.
Material You'nun dinamik rengi, öngörülemeyen bağlamlarda çalışacak şekilde tasarlanmıştır. Çeşitli görüntüleme bağlamlarında kontrast oranlarını yönetmek için parlaklık düzeyleri, ürün ekibinin her bir renk kombinasyonunu test etmesine gerek kalmadan renklerin başarılı bir şekilde birleşmesini sağlayan temel özelliktir.
6. Erişilebilir tema oluşturma
Tema oluşturucu, Figma stilleri olarak Materyal Tasarım jetonları oluşturur. Bu sayede dinamik rengi görselleştirebilir ve özel bir tema oluşturabilirsiniz. Bu işlem, renk şemasında erişilebilir renkler oluşturulmasını sağlamak için Material 3 renk sistemi takip edilerek yapılır.
- Eklenti kalıcı öğesinde Özel'i tıklayın. Bu işlem, temayı özel bir temaya geçirir. Material teması zaten oluşturulmuştur ancak isterseniz yeni bir tema da oluşturabilirsiniz. Daha fazla bilgi için Dinamik rengi görselleştirme başlıklı makaleyi inceleyin.
- Ardından birincil anahtar rengi ayarlayın. Birincil renk, ana marka renginiz veya en çok kullanılan birincil vurgu renginiz olabilir. Renk seçiciyi açmak ve bir renk seçmek için Birincil etiketli rengi tıklayın. Birincil renk, dinamik ayardaki kaynak rengine benzer şekilde kaynak rengi için kullanılır.
MTB'ye renk ekleme
- Geri kalan tuş renkleri, birincil renge göre doldurulur. Bu nedenle, ihtiyacınız yoksa ek renk eklemenize gerek yoktur. İsteğe bağlı olarak ikincil ve üçüncül renk ekleyin.
- Renk şeması, giriş renklerinden yorumlanan temel renkleri, oluşturulan ton paletlerini ve renk rolleriyle sonuçlanan renk düzenlerini gösterir. Hem açık hem de koyu renk şemaları kullanılabilir.
- Laboratuvarda, uygulanan renk şemasını görmek için örnek bir kullanıcı arayüzü sağlanmıştır. Uygulama kullanıcı arayüzü bileşeni seçiliyken eklentide değiştir'i tıklayın.
Bağlı mock-up'ın yer aldığı renk şeması.
Bu alıştırmalar için Material Theme Builder, Figma dosyasında gerekli jetonları zaten oluşturmuştur.
7. Material Tema Oluşturucu ile kontrastı kontrol etme
Bu harika bir özellik olsa da bazı stilleri farklı renklerle manuel olarak güncellemek isteyebileceğinizi anlıyoruz. Material Theme Builder, bu kararları vermenize yardımcı olmak için temel şema renklerinde yerleşik kontrast kontrolü içerir.
- Jetonlar stil olarak oluşturulduğundan, oluşturulan rengin değerini de ayarlayabiliriz. Figma stillerinde, mevcut temanın birincil rengine gidin ve sağdaki Stili düzenle simgesini seçin.
- Özelliklerde birincil rengi güncelleyin. Bu durum, renk çıkışına ve uygulama kullanıcı arayüzüne yansıtılır. Bu renk, renk algoritması tarafından oluşturulmadığı için erişilebilirliği garanti edilemez.
- Eklenti menüsünde Kontrastı Kontrol Et'i tıklayın ve ardından birincil stil için Stili Düzenle kalıcı öğesini yeniden açın. Bu işlem, kontrastı kontrol eder ve kontrast derecesini gösterir.
Figma stil iletişim kutusunda kontrast.
8. Tebrikler
Müthiş! Erişilebilirlik, sürecinizin önemli bir parçası olmalıdır. Materyal Tasarım ve Materyal Tema Oluşturucu ile bu süreç daha da kolaylaşır.
Sorularınız varsa Twitter'da@MaterialDesign hesabını kullanarak dilediğiniz zaman bize sorabilirsiniz.
youtube.com/MaterialDesign adresinde daha fazla tasarım içeriği ve eğitim bulabilirsiniz.