Dokununca değişen renkler: etkileşim durumları

Kısa cevap

Bir buton yalnız tek bir renkle yaşamaz; imleç üzerine geldiğinde, basıldığında, klavyeyle odak aldığında ve kullanılamaz olduğunda ayrı bir görünüme geçer ve bu görünümlerin her biri kullanıcıya «şu an ne olduğunu» söyler. Tutarlı bir sistem bu değişiklikleri her bileşene ayrı ayrı renk seçerek değil, rengin üstüne konan saydam bir durum katmanıyla ve bu katmanın her durum için sabit bir opaklığıyla kurar. Devre dışı bir buton için WCAG bir kontrast alt sınırı koymaz, ama o butonun var olduğu ve ne işe yaradığı hâlâ okunabilmelidir; soluklaştırma, butonu görünmez kılmadan «şu an kullanılamaz» demeye yetecek kadar olmalıdır.

Beş hâl

Dinlenme hâli, bileşenin hiçbir şey olmadığında görünüşüdür; butonun temel rengi budur. Diğer dört hâl bu temel rengin üzerine kurulur.

Odak hâli, klavyeyle ya da başka bir yardımcı araçla gezinen kullanıcı için bileşenin seçili olduğunu gösterir; devre dışı hâl ise bileşenin şu an kullanılamadığını söyler. Bu iki hâl ayrı bölümlerde ele alınıyor, çünkü ikisi de erişilebilirlikle doğrudan bağlantılıdır.

UX-02'deki durum renkleri ile bu ders arasındaki fark önemlidir. Başarı ve hata, bir işlemin sonucunu bildirir; buradaki beş hâl ise bileşenin kendisinin o anki durumunu. Bir hata butonunun da üzerine gelme, basılı ve odak hâlleri vardır.

Durum katmanları

Her bileşen için her hâle ayrı bir renk seçmek hızla yönetilemez hâle gelir: on bileşen, üç tema ve beş hâl, yüz elli renk kararı demektir. Material Design bu sorunu tek bir fikirle çözer.

Mavi bir butonun etiketi beyazsa, üzerine gelme hâlinde butonun üstüne düşük opaklıkta beyaz bir katman konur ve buton biraz açılır. Aynı mantık açık bir yüzeydeki koyu metinli bir butonda koyu bir katmanla işler ve buton biraz koyulaşır. Tasarımcı her buton için yeni bir renk seçmez; yalnız hangi opaklığın hangi hâle karşılık geldiğini bir kez belirler. UX-01'deki token yapısında bu, birkaç sabit sayıdan oluşan küçük bir token grubudur ve her tema ile her bileşen tarafından paylaşılır.

Bu opaklıkların ne kadar küçük bir değişiklik yarattığını hesaplamak öğreticidir. Material'ın temel teması birincil rengi #6750A4 olarak tanımlar ve etiketini beyaz yazar. Bu butona yüzde sekizlik beyaz bir katman konunca renk #735EAB olur; dinlenme ile üzerine gelme arasındaki kontrast oranı yalnız yaklaşık 1,2:1'dir. Yüzde on ikilik katmanla bu oran 1,3:1'e çıkar. Bu küçüklük kasıtlıdır: üzerine gelme bir onaydır, bağırmaz. Ama bir sonucu da vardır: bu değişiklikler tek başına güçlü bir sinyal değildir ve yalnız renge dayanan bir odak göstergesi için yetmez.

Klavye odağı görünür olmalı

Fare kullanmayan, klavyeyle, anahtar düzenekleriyle ya da sesle gezinen biri, ekranda hangi öğenin seçili olduğunu yalnız odak göstergesinden anlar. Gösterge kaybolursa kullanıcı nerede olduğunu bilmeden sekme tuşuna basmaya devam eder.

WCAG bu konuda birkaç katmanlı kural koyar. AA düzeyindeki 2.4.7 ölçütü, klavyeyle kullanılabilen her arayüzün odak göstergesinin görünür olduğu bir çalışma kipi olmasını ister. WCAG 2.2 ile eklenen 2.4.11 ölçütü, odak alan bileşenin sayfanın yazarının koyduğu başka içerik tarafından tamamen gizlenmemesini ister. AAA düzeyindeki 2.4.13 ölçütü ise göstergenin kendisine ölçü koyar: göstergenin bir alanı, odaklanmamış bileşenin iki CSS pikseli kalınlığındaki çevresi kadar büyük olmalı ve aynı piksellerin odaklı ve odaksız hâlleri arasındaki kontrast 3:1'in altına düşmemelidir.

Bu son ölçüt, durum katmanının neden yetmediğini sayıyla gösterir: yüzde on ikilik bir katmanın yarattığı 1,3:1 fark, 3:1 eşiğinin çok altındadır. Bu yüzden iyi bir odak göstergesi rengi hafifçe değiştirmekle kalmaz, bileşenin çevresine belirgin bir halka çizer. Halka, bileşenin kendi renginden değil, zeminden ayrılacak biçimde seçilir. Açık temada koyu, karanlık temada açık bir halka; ya da iki temada da işleyen, iç tarafı açık dış tarafı koyu iki katmanlı bir halka. Web'de tarayıcılar, halkanın yalnız klavyeyle gezinildiğinde görünmesini sağlayan bir seçiciyle, :focus-visible ile, fare kullanıcısını gereksiz halkalarla rahatsız etmeden bu göstergeyi sunmaya izin verir.

Devre dışı butonun solukluğu

Kartın sorusu: devre dışı bir butonun ne kadar soluk olması gerekir?

WCAG bu soruya bir alt sınırla cevap vermez. 1.4.3 ölçütü, etkin olmayan bir arayüz bileşeninin parçası olan metin için kontrast şartı olmadığını açıkça söyler; 1.4.11 ölçütü de etkin olmayan bileşenleri bileşen kontrastı şartından ayrı tutar. Yani kural açısından devre dışı bir buton istendiği kadar soluk olabilir.

Ama kuralın susması, sorunun ortadan kalktığı anlamına gelmez. Devre dışı bir buton iki şey söylemek zorundadır: «buradayım» ve «şu an kullanılamıyorum». Fazla soluk bir buton ilkini söyleyemez: kullanıcı formu doldurduktan sonra «Gönder» butonunun nereye gittiğini arar, çünkü buton neredeyse görünmez olmuştur. Yeterince soluk olmayan bir buton da ikincisini söyleyemez: kullanıcı ona tıklar ve hiçbir şey olmaz.

Material'ın değerleriyle hesap yapmak sınırı somutlaştırır. #FEF7FF yüzeyinde, #1D1B20 metin renginin yüzde on ikisiyle çizilmiş bir zemin #E3DDE4 olur ve yüzeyden yalnız 1,3:1 ile ayrılır; aynı rengin yüzde otuz sekiziyle yazılmış etiket #98939A olur ve kendi zemininden yaklaşık 2,3:1 ile ayrılır. Etiket okunur ama zorlanarak; buton ise zeminden neredeyse ayrılmaz. Etiketin opaklığı yüzde otuza inerse oran 1,9:1'e düşer; yüzde elliye çıkarsa 3,1:1'e yükselir.

Bu sayılardan tek bir doğru opaklık çıkmaz, ama bir çalışma aralığı çıkar: devre dışı etiket, etkin etiketten açıkça daha soluk olmalı, ama kullanıcı onu okuyabilmeli ve butonun ne yaptığını anlayabilmelidir. Aynı buton etkin hâlinde beyaz etiketiyle birincil zemin üzerinde yaklaşık 6,4:1 verir; devre dışı hâlin bu değerden belirgin biçimde düşük olması, «kullanılamıyor» mesajını taşır.

Solukluk tek başına yetmez. Kullanıcıya butonun neden devre dışı olduğunu söylemek, çoğu zaman renkten daha çok işe yarar: «Göndermek için şartları kabul edin» gibi yakında duran bir cümle, kullanıcının neyi eksik bıraktığını gösterir. Bazı ekipler butonu hiç devre dışı bırakmaz; kullanıcı eksik bir formu gönderdiğinde eksik alanları gösterir. İki yaklaşımın da savunucuları vardır; ölçülebilir olan kısım, seçilen yaklaşımın kullanıcıya eksiği gösterip göstermediğidir.

Örnek — fotoğraf seçme ekranı

Bir aile albümü uygulaması, kullanıcının birden fazla fotoğrafı seçip paylaşmasına izin veriyor. İlk sürümde seçilen fotoğraf, üzerine yüzde on ikilik siyah bir durum katmanı konarak gösteriliyor; onay işareti ya da çerçeve kullanılmıyor.

Hesap, bu işaretin kimin fotoğrafında kaybolduğunu gösteriyor. Yüzde on ikilik siyah katman, açık bir portrenin #F1C7A9 tonundaki yanağında seçili ve seçilmemiş hâl arasında yaklaşık 1,3:1 fark yaratıyor; koyu bir portrenin #4A2C1D tonundaki yanağında bu fark 1,09:1'e düşüyor. İkisi de 3:1'in çok altında, ama koyu tenli bir akrabanın portresi seçildiğinde değişiklik neredeyse hiç görülmüyor. Kullanıcı hangi fotoğrafları seçtiğini sayamıyor ve bazı fotoğraflar paylaşımdan sessizce düşüyor.

Ekip seçimi, fotoğrafın içeriğinden bağımsız işaretlerle yeniden kuruyor. Seçilen fotoğrafın köşesine bir onay işareti, çevresine de iç tarafı açık, dış tarafı koyu iki katmanlı bir çerçeve ekleniyor; durum katmanı yalnız yardımcı bir ipucu olarak kalıyor. Klavyeyle gezinen kullanıcı için odak halkası seçim çerçevesinden ayrı bir biçimde çiziliyor, böylece «odakta» ile «seçili» birbirine karışmıyor. Sonuç, tenleri, arka planları ve ışıkları birbirinden belirgin biçimde ayrışan portrelerden oluşan bir albümde sınanıyor.

Sık yapılan yanlış

Özet

1. Dinlenme, üzerine gelme, basılı, odak ve devre dışı hâller, her bileşene ayrı renk seçerek değil, sabit opaklıklı durum katmanlarıyla tutarlı biçimde kurulur.
2. Durum katmanlarının yarattığı değişiklik küçüktür ve odak için yetmez; odak göstergesi zeminden ayrılan belirgin bir halka olmalıdır ve WCAG 2.2 ona görünürlük, gizlenmeme ve AAA düzeyinde boyut ve 3:1 kontrast şartları koyar.
3. Devre dışı buton için WCAG kontrast alt sınırı koymaz, ama buton görünür ve okunur kalmalı, nedenini söyleyen bir metinle desteklenmelidir; fotoğraf gibi değişken içerik üzerindeki seçim de tenden bağımsız işaretlerle gösterilir.

Kendini sına

1. (Kolay) En yaygın beş etkileşim durumu hangileridir?
2. (Kolay) Material Web'de üzerine gelme durum katmanının opaklığı nedir?
3. (Orta) Devre dışı bir butonun ne kadar soluk olması gerekir?
4. (Orta) Durum katmanı tek başına neden iyi bir odak göstergesi değildir?
5. (Zor) WCAG etkin olmayan bileşenlere kontrast şartı koymuyorsa, bir tasarımcı devre dışı butonun solukluğuna nasıl karar vermelidir?
6. (Zor) Fotoğraf seçme ekranında yüzde on ikilik siyah katmanla gösterilen seçim neden koyu tenli portrelerde başarısız olur ve nasıl düzeltilir?

Cevaplar

1. Dinlenme, üzerine gelme, basılı, odak ve devre dışı («Beş hâl»).
2. 0,08 («Durum katmanları»).
3. WCAG bir alt sınır koymaz; buton hem görünür kalmalı hem de kullanılamadığını belli etmelidir. Material'ın değerleriyle devre dışı etiket kendi zemininden yaklaşık 2,3:1 ile ayrılır, etkin etiket ise yaklaşık 6,4:1 verir. Etiket açıkça daha soluk ama okunabilir olmalı ve butonun neden kullanılamadığını söyleyen bir metinle desteklenmelidir («Devre dışı butonun solukluğu»).
4. Yarattığı değişiklik çok küçüktür: #6750A4 üzerinde yüzde on ikilik katman yalnız yaklaşık 1,3:1 fark verir ve WCAG 2.4.13'ün odaklı ile odaksız hâl arasında istediği 3:1'in çok altında kalır («Klavye odağı görünür olmalı»).
5. Kural yerine kullanıcının iki ihtiyacına bakar: butonun bulunabilmesi ve kullanılamadığının anlaşılması. Etiketin okunabilir kaldığı, ama etkin hâlden belirgin biçimde daha soluk olduğu bir aralık seçilir ve buton, nedenini söyleyen bir metinle desteklenir ya da hiç devre dışı bırakılmadan eksik alanlar gösterilir («Devre dışı butonun solukluğu»).
6. Katman, #F1C7A9 tonunda yaklaşık 1,3:1, #4A2C1D tonunda yalnız 1,09:1 fark yaratır; seçim görünmez olur. Köşede bir onay işareti ve iki katmanlı bir çerçeve eklenir, odak halkası seçimden ayrı çizilir ve sonuç farklı tenlerden portrelerle sınanır («Örnek — fotoğraf seçme ekranı»).

Kaynaklar

• W3C, «Web Content Accessibility Guidelines (WCAG) 2.2», 1.4.3, 1.4.11, 2.4.7, 2.4.11 ve 2.4.13 başarı ölçütleri.
• Material Web, «md-sys-state» token dosyası.
• Material Web, «md-comp-filled-button» ve «md-ref-palette» token dosyaları.

Sonraki adım

UX-05 renklerin nereden geldiğini kullanıcıya bırakan sistemlere bakıyor: tek bir kaynak renkten bütün bir ton ailesinin algısal bir uzayda nasıl türetildiğini ve bu esnekliğin markanın kendi renkleri üzerindeki denetimini ne kadar azalttığını tartışıyor. UX-07 ise bu dersin onay işaretleri ve halkalarını bir ilkeye dönüştürüyor: hatalı form alanlarından grafik lejantlarına ve bağlantıların altı çizgisine kadar, bilginin renk görülmese de şekil, simge, metin ya da desenle taşınmasını ele alıyor.