Renk Paleti ve Kontrast Kontrolü

Tek renk neden yetmez?

Kurumsal kimlik çalışmalarından çıkan çıktı çoğu zaman iki üç renk kodudur. Sıra web sitesine geldiğinde bu yetmediği hemen anlaşılır: butonun üzerine gelince hangi ton kullanılacak? Kenarlık hangi renk olacak? Uyarı kutusunun arka planı ne olmalı? Devre dışı bir düğme nasıl görünecek?

Modern arayüzler bu yüzden tek renkle değil renk skalasıyla çalışır. Aynı rengin açıktan koyuya kontrollü türevleri, tasarımın her yerinde tutarlılık sağlar. Bu araç, girdiğiniz renkten 50'den 900'e numaralanmış 10 tonluk böyle bir skala üretir.

Kullanım mantığı şudur: 50 ve 100 tonları geniş arka plan alanları için, 200 ve 300 kenarlık ve ayırıcılar için, 500 ve 600 ana buton ve vurgular için, 700 ile 900 arası koyu zeminler ve açık zemin üzerindeki metinler için uygundur. Bu numaralandırma, yaygın tasarım sistemlerinin ve CSS çatılarının kullandığı düzenle uyumludur; ekibinizle konuşurken ortak bir dil kurar.

Kontrast oranı ne anlama geliyor?

Kontrast oranı, iki rengin göreli parlaklığı arasındaki farkı 1:1 ile 21:1 arasında bir sayıyla ifade eder. Beyaz üzerine siyah 21:1, aynı renk üzerine aynı renk 1:1'dir.

WCAG 2.2 erişilebilirlik ölçütlerinin eşikleri şöyledir:

• AA, normal metin: en az 4,5:1. Pratikte hedeflemeniz gereken taban budur. Türkiye dahil pek çok ülkede kamu ve kurumsal sitelerde beklenen seviyedir.
• AA, büyük metin: en az 3:1. Büyük metin, 24 piksel ve üzeri ya da 18,66 piksel üzeri kalın yazıdır.
• AAA, normal metin: en az 7:1. Daha yüksek erişilebilirlik hedefi. Uzun metin ağırlıklı sitelerde ulaşmaya değer.
• Arayüz bileşenleri: en az 3:1. Buton kenarlıkları, form alanı çerçeveleri, ikonlar ve odak halkaları için geçerlidir. En sık atlanan maddedir.

Bu bir bürokratik zorunluluk değil, doğrudan okunabilirlik meselesidir. Türkiye nüfusunun önemli bir bölümü 45 yaş üstündedir ve yaşla birlikte düşük kontrastı ayırt etme yetisi azalır. Erkeklerin yaklaşık yüzde 8'inde renk körlüğü vardır. Ayrıca hiçbiri geçerli olmasa bile, güneş altında telefonuna bakan bir kullanıcı düşük kontrastlı metni okuyamaz.

Marka renginiz kontrast eşiğini geçmiyorsa

Sık karşılaşılan bir durumdur, özellikle açık sarı, açık yeşil ve turkuaz tonlarında. Marka renginizi değiştirmenize gerek yok; çözüm rengi nerede kullandığınızı değiştirmektir.

• Rengi metin değil, zemin yapın. Açık bir marka rengi beyaz üzerinde metin olarak okunmaz, ama koyu metinle birlikte arka plan olarak mükemmel çalışır.
• Metin için skalanın koyu ucunu kullanın. Marka renginiz 400 tonundaysa, aynı rengin 700 ya da 800 tonu beyaz üzerinde okunabilir ve marka kimliğinden kopmaz.
• Büyük tipografide esneyin. Başlıklar 3:1 eşiğine tabidir; marka renginizi 32 piksellik bir başlıkta kullanabilir, aynı rengi 15 piksellik gövde metninde kullanmayabilirsiniz.
• Butonlarda zemin-metin çiftini birlikte seçin. Turkuaz butonun üzerinde beyaz yazı çoğunlukla kalır, koyu lacivert yazı geçer. Araçtaki önizleme bunu doğrudan gösterir.

Yalnızca renkle bilgi aktarmaktan da kaçının. "Kırmızı olan alanlar hatalı" demek renk körü bir kullanıcı için anlamsızdır; hata mesajını ikon ve metinle de destekleyin.

Yardımcı renkleri nasıl seçmeli?

Araçtaki dört uyum seçeneği, renk çemberinde ana renginize göre farklı açılardaki tonları üretir:

• Tamamlayıcı (180 derece karşıt). En yüksek görsel gerilimi verir. Tek bir vurgu rengi isteyen, sade arayüzlerde iyi çalışır. Geniş alanlarda kullanılırsa yorucu olur.
• Komşu (30 derece). En güvenli seçim. Sakin, uyumlu ve kurumsal görünür. Vurgu gücü düşüktür; bu yüzden çağrı butonlarında yeterince ayrışmayabilir.
• Üçlü (120 derece). Canlı ve enerjik. Çocuk, eğitim ve eğlence odaklı markalarda işe yarar. Kurumsal bir sitede üç canlı rengi dengelemek zordur.
• Bölünmüş karşıt. Tamamlayıcının yumuşatılmış hali. Vurgu gücünü büyük ölçüde korurken gerilimi azaltır; çoğu iş sitesi için en dengeli seçenektir.

Pratik bir kural: arayüzde en fazla bir ana renk, bir vurgu rengi ve bir nötr gri ailesi kullanın. Buna durum renkleri eklenir (başarı için yeşil, uyarı için sarı, hata için kırmızı). Bundan fazlası tasarımı zenginleştirmez, dağıtır.

Paleti sitede kullanmaya geçerken

Kopyaladığınız kodları doğrudan bileşenlerin içine yazmak yerine, :root içinde --renk-500 gibi CSS değişkenleri olarak tanımlayın. Böylece bir tonu değiştirdiğinizde site genelinde tek yerden güncellenir. Renkleri isimlendirirken de "mavi" gibi somut değil, "birincil" gibi işlevsel adlar kullanın; marka rengi bir gün yeşile dönerse değişken adı yanlış kalmaz.

Koyu tema hazırlıyorsanız skalayı ters çevirmek genellikle yetmez. Koyu zeminde aynı renk daha parlak algılanır; doygunluğu bir miktar düşürmek gerekir. Ayrıca koyu temada saf siyah zemin (#000000) yerine hafif mavi ya da gri tonlu koyu bir zemin gözü daha az yorar.

Son adım gerçek testtir: paleti uyguladıktan sonra siteyi telefonda, gün ışığında ve düşük parlaklıkta açın. Ekranda geçen kontrast oranı, camda parlama olduğunda hâlâ geçiyor mu? Bu basit test, tabloların söylemediğini söyler.