Marka rengi çoğu projede zevk tartışması olarak başlar, okunmayan bir buton yazısı olarak biter. Oysa renk seçimi büyük ölçüde ölçülebilir bir iştir: kontrast oranı hesaplanır, tonlar sistematik üretilir, roller önceden tanımlanır. Aşağıda tek bir ana renkten yola çıkıp erişilebilir, koyu modda da çalışan bir palet kurmanın yolu var.
Renk seçmeden önce üç soru
Paletin işi güzel görünmek değil, hiyerarşi kurmaktır. Şu üç soruya cevap vermeden ton denemelerine başlamayın:
- Sektörde hangi beklenti var? Sağlık ve finansta soğuk maviler yaygındır, yiyecek-içecekte sıcak tonlar. Bu bir kural değil, yerleşmiş bir alışkanlık; bilerek kırmak ayrı, farkında olmadan çiğnemek ayrıdır.
- Rakipler hangi rengi sahiplenmiş? Aynı ilde üç emlak ofisi de aynı laciverdi kullanıyorsa dördüncüsü olmanın bedeli, akılda kalmamaktır.
- Renk nerede kullanılacak? Sadece logoda mı, yoksa butonlarda, uyarı mesajlarında ve grafiklerde de mi? Butonlarda yaşayacak bir rengin üzerine gelen yazıyla kontrastı yeterli olmak zorundadır.
Kontrast göz kararı değil, sayı işidir
WCAG 2.1/2.2 ölçütleri tartışmayı bitirir. Ölçüt 1.4.3 (AA), normal boy metin ile arka planı arasında en az 4,5:1, büyük metinde en az 3:1 kontrast ister. Büyük metnin tanımı 18 punto (yaklaşık 24 piksel) normal ya da 14 punto (yaklaşık 18,7 piksel) kalındır. Ölçüt 1.4.11 ise buton kenarlığı, form çerçevesi, ikon gibi metin olmayan arayüz bileşenleri için en az 3:1 şart koşar. AAA hedefliyorsanız normal metinde eşik 7:1'e çıkar.
Pratikte en sık patlayan yer, açık tonlu bir marka renginin üzerine beyaz yazı konmasıdır. Turuncu, açık yeşil, sarı ve turkuazın beyazla kontrastı çoğunlukla 3:1'in altında kalır. Bu renkleri buton zemini yapacaksanız iki seçeneğiniz var: yazıyı koyulaştırmak ya da zemin rengini birkaç basamak koyulaştırmak. Ölçüm için tarayıcı geliştirici araçlarındaki renk seçici yeterlidir; renk kutucuğuna tıkladığınızda oran doğrudan yazar, ek yazılım gerekmez.
Tek renkten dokuz basamaklı ölçek üretmek
Marka renginizi HSL olarak yazın ve aynı ton (hue) üzerinde açıklık basamakları üretin. Tekrar edilebilir bir şema:
- 50-100: Çok açık zeminler, seçili satır arka planı, bilgi kutusu.
- 200-300: Kenarlık, ayraç, devre dışı bileşen.
- 500: Markanın kendisi; logoda ve vurgularda.
- 600-700: Buton zemini ve bağlantı rengi; beyaz yazıyla 4,5:1 sağlaması gereken basamaklar.
- 800-900: Başlıklar, koyu zeminler, üzerine açık yazı gelen alanlar.
Somut bir örnek: marka renginiz hsl(212, 84%, 52%) olsun. Bu ton 500 basamağınızdır ve beyaz yazıyla kontrastı yaklaşık 3,4:1 çıkar; yani buton zemini olmaya uygun değildir. Açıklığı 52'den 40'a indirdiğinizde hsl(212, 84%, 40%) elde edersiniz ve beyaz yazıyla oran 4,5:1 eşiğini geçer. Bu basamağı 700 olarak kaydedip birincil buton rengi yapın; 500'ü logo ve dekoratif vurguda bırakın. Aynı mantıkla 900 için açıklığı 20'ye, 100 için 95'e çekin. Açıklığı düşürürken doygunluğu birkaç puan artırmak, artırırken düşürmek tonların solmuş görünmesini engeller.
Rol tabanlı isimlendirme
Kodda doğrudan #0F5FAF yazmak yerine anlamlı değişkenler tutun: yüzey, metin, sessiz metin, kenarlık, birincil, birincil-üstü-yazı, başarı, uyarı, hata. Böylece koyu moda geçerken ya da marka rengi değişince tek bir yerden yönetirsiniz. Hazır bir tema üzerinde çalışırken de en hızlı yol budur: değişken katmanına dokunup tüm sayfaları tutarlı biçimde çevirebilirsiniz.
Rol tablosu ve kontrast şartları
| Rol | Nerede kullanılır | Kontrast şartı |
|---|---|---|
| Ana metin | Paragraf, liste, tablo içeriği | Zemine karşı en az 4,5:1 |
| Sessiz metin | Tarih, yardım metni, dipnot | Yine 4,5:1; "gri olsun yeter" tuzağı burada |
| Birincil buton | Tek ana eylem | Zemin-yazı 4,5:1, zemin-sayfa 3:1 |
| Kenarlık ve ikon | Form çerçevesi, simgeler | En az 3:1 |
| Odak halkası | Klavyeyle gezinme | Komşu renge karşı en az 3:1 |
| Durum renkleri | Başarı, uyarı, hata | 4,5:1 ve mutlaka metin ya da ikon desteği |
Koyu mod: rengi ters çevirmek yetmez
Koyu modda saf siyah zemin üzerine saf beyaz yazı gözü yorar ve ince yazı tiplerinde halelenme hissi verir. Zemin için #121212 ile #1A1A1A arasında koyu griler, metin için saf beyaz yerine #E8E8E8 civarı kırık beyaz daha rahat okunur. Marka renginizin 500 basamağı koyu zeminde genellikle fazla parlar; koyu mod için 300-400 aralığındaki daha açık ama doygunluğu 10-15 puan düşürülmüş bir varyantı birincil renk yapın. Gölge koyu zeminde neredeyse görünmez; katman ayrımını gölgeyle değil, bir tık daha açık yüzey rengiyle kurun (örneğin kart zemini #1E1E1E).
Sık yapılan hatalar
- Bilgiyi yalnızca renkle vermek: Yeşil-kırmızı ayrımı, en yaygın renk körlüğü türlerinde kaybolur; her durumun yanına ikon veya kelime koyun.
- Yer tutucuyu etiket sanmak: Açık gri yer tutucu metni hem kontrastı düşük hem de yazmaya başlayınca kaybolur; etiketi alanın üstünde tutun.
- Odak halkasını kaldırmak: outline: none yazmak tasarımı temizlemez, klavye kullanıcısını sayfada kör bırakır. Kaldıracaksanız yerine görünür bir alternatif koyun.
- Degrade üzerine yazı: Kontrast degradenin bir ucunda geçer, diğer ucunda kalır; ölçümü en açık noktadan yapın.
- Vurgu rengini çoğaltmak: Beş farklı vurgu rengi kullanan bir sayfada kullanıcı ana eylemi bulamaz. Bir marka rengi, bir nötr ölçek ve üç durum rengi çoğu site için yeterlidir.
- Görsel üstüne doğrudan yazı: Fotoğraf değişince kontrast da değişir; yazının altına yüzde 40-60 opaklıkta koyu bir örtü katmanı ekleyin.
Uygulama kontrol listesi
- Marka renginizi HSL olarak yazın, aynı ton üzerinde 50'den 900'e dokuz basamaklı bir açıklık ölçeği üretin.
- Buton, bağlantı ve metin için kullandığınız her zemin-yazı çiftini ölçün; 4,5:1 ve 3:1 eşiklerini geçmeyen çifti kullanmayın.
- Renkleri kodda rol adıyla saklayın, bileşenlerin içine doğrudan renk kodu yazmayın.
- Koyu mod için ayrı bir eşleme tanımlayın; açık mod değerlerini sadece ters çevirmeyin.
- Odak halkasını her etkileşimli bileşende görünür bırakın ve komşu renge karşı 3:1 olduğunu doğrulayın.
- Sayfanın gri tonlamalı bir ekran görüntüsünü alın: bilgi hâlâ anlaşılıyorsa palet renkten bağımsız olarak sağlamdır.
