Renk Arayüzde Ne Zaman Bilgi Taşır, Ne Zaman Kafa Karıştırır

Renk, bir arayüzde en hızlı algılanan sinyaldir. En kolay kötüye kullanılan sinyal de bu yüzden odur: aynı açık gri, bir yerde sade bir tercih, başka bir yerde abonelik iptal bağlantısını görünmez kılmanın yolu olur. Aradaki farkı göz kararı değil, hesaplanmış kontrast oranı söyler.

Renk hızlı algılanır, yanlış kullanıldığında da hızlı yanıltır

Renk, göz taramaya başlamadan önce algılanan bir özelliktir. Kullanıcı sayfayı okumadan da "burada bir şey var" bilgisini alır. Bu, iyi kullanıldığında kısa yoldur: birincil eylem butonu tek bakışta ayrışır, hata mesajı gövde metninden ayrılır.

Aynı hız, ters yönde de çalışır. Açık gri zemin üzerine gri metin yazıldığında kullanıcı o metni okumakta zorlanmaz, çoğu zaman orada olduğunu bile fark etmez. Bağlantılar gövde metniyle aynı renkteyse tıklanabilirlik bilgisi yok olur; kullanıcı bağlantının üstünden geçer ve arar durur.

4.5:1 tek eşik değil

Kontrast konuşulurken tek bir sayı tekrarlanır: 4.5:1. Bu sayı doğru ama eksik. WCAG normal boy metin için 4.5:1 ister, büyük metin için (kabaca 24 piksel, kalınsa 19 piksel üzeri) 3:1 yeterli sayar. Buton kenarlığı, form alanı çerçevesi, ikon gibi metin olmayan arayüz bileşenleri için de eşik 3:1'dir.

Bunu tek sayıya indirgemek iki yönde de hata üretir. Tasarımcı 4.5:1'i her şeye uyguladığında ince ikon çizgilerini gereksiz koyultur; ya da tersine, 3:1'i her şey için yeterli sanıp gövde metnini okunmaz bırakır.

Somut bir çıpa işe yarar: beyaz zemin üzerinde #767676 grisi 4.54:1 verir, yani normal metin için sınırı ancak geçer. Bir ton açığı, #949494, 3.03:1'e düşer. İkinci renk bir ikon çerçevesinde kabul edilebilir, paragraf metninde değil. İki gri arasındaki fark ekranda neredeyse görünmez, denetimde ise geçer ile kalır arasındadır.

Ölçümü opaklıkla yapmayı hiç sevmiyorum. Metnin rengini doğrudan yazmayı, rgba() ya da opacity ile soldurmaya tercih ederim: opaklık düşürüldüğünde gerçek renk arka planla harmanlanır, arka plan bir görsel veya degrade ise ortaya tek bir kontrast oranı bile çıkmaz. Denetim aracı düz zeminde bileşik rengi hesaplar, görsel üstünde hesaplayamaz. Sabit renk yazdığınızda ölçtüğünüz şey ekrandaki şeydir.

Renk tek başına bilgi taşımamalı

Kullanıcıların bir bölümü kırmızı ile yeşili ayırt etmez. Bu, kontrasttan ayrı bir sorundur: iki renk yeterince farklı parlaklıkta olabilir, yine de taşıdıkları anlam ayırt edilemez. "Yeşil olanlar uygun, kırmızı olanlar dolu" diyen bir takvim, gri tonlamada boş bir tablodur.

Çözüm renkten vazgeçmek değil, renge ikinci bir işaret eklemektir:

• Bağlantılar renk ve altçizgi ile birlikte işaretlenir.
• Durum göstergelerine ikon veya etiket eşlik eder.
• Grafiklerde seriler renkle ayrılıyorsa doku, işaretçi biçimi veya doğrudan etiket eklenir.

Denetimi kolaydır. Ekran görüntüsünü gri tonlamaya çevirin; kaybolan her bilgi, yalnızca renge yaslanmış demektir.

Renkle kurulan karanlık desenler

Karanlık desenlerin çoğu metinle değil, kontrastla kurulur. Kullanıcıyı kandıran cümle yazmak risklidir ve okunduğunda yakalanır; oysa iptal bağlantısını arka plana bir ton yaklaştırmak kimsenin şikayet edemeyeceği bir tasarım tercihi gibi görünür.

Yaygın biçimleri şunlar:

• Onaylama butonu dolgulu ve canlı, vazgeçme bağlantısı arka planla neredeyse aynı tonda.
• Ücretsiz seçeneğin gri tonlamayla verilmesi, kullanıcıda devre dışı olduğu izlenimi yaratır.
• Abonelik iptali sayfasındaki asıl bağlantının, sayfadaki diğer her şeyden daha düşük kontrasta sahip olması.

Bu tercihlerin niyetli olup olmadığını dışarıdan bilemezsiniz, ama sonucunu ölçebilirsiniz. Bir ekranda kullanıcının çıkış yolu, giriş yolundan daha düşük kontrastlıysa o ekran kullanıcıya karşı tasarlanmıştır. Ölçüm iki değer almak kadar kısa sürer.