Tamamlayıcı Renkler ve Kontrast: Renk Çarkının Söylemediği

Tamamlayıcı renk, renk çarkında karşıt uçta duran renktir. Bu kadarı doğru, ama tasarımda işe yarayan kısım burada bitmiyor. Çarkın gösterdiği şey renk tonu; ekranda okunabilirliği belirleyen şey parlaklık. İkisi karışınca kontrastlı sanılan, ölçünce sınıfta kalan paletler çıkıyor ortaya.

Çark tonu söyler, parlaklığı söylemez

Kırmızı ile yeşil çarkta tam karşı karşıya durur. Birini metin, diğerini zemin yaparsanız kontrast oranı yaklaşık 2.9:1 çıkar. Normal gövde metni için gereken eşik 4.5:1. Saf mavi ile turuncu da kurtarmaz, 3.3 civarında kalır.

Sebebi formülde: kontrast oranı renk tonuna hiç bakmaz, üç kanalın ağırlıklı parlaklığına bakar. Yeşil kanalın ağırlığı 0.7152, kırmızınınki 0.2126, mavininki 0.0722. Yani çarkta ne kadar uzak durdukları ile ekranda ne kadar ayrıştıkları farklı iki eksen. Sık paylaşılan bir örnek olan rgb(255,122,0) metnin #2b6cb0 zemin üstündeki hali 2.1:1 verir; palet tam tamamlayıcıya yakındır ve yine de erişilebilirlik eşiğinin yarısında kalır (renk seçici araçların "tamamlayıcı" sekmesini palet başlangıcından fazlası saymıyorum bu yüzden).

Gözle değil, üç satırla ölçün

Kontrast oranını tahmin etmeye çalışmak zaman kaybı. Formül kısa, tarayıcı konsolunda çalışır:

const lin = c => { c /= 255; return c <= 0.03928 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4); }; const L = ([r,g,b]) => 0.2126*lin(r) + 0.7152*lin(g) + 0.0722*lin(b); const oran = (a,b) => (Math.max(L(a),L(b)) + 0.05) / (Math.min(L(a),L(b)) + 0.05); oran([255,0,0], [0,255,0]); // 2.91

Bunu tasarım aşamasında bir kez çalıştırıp paletin metin taşıyan çiftlerini not edin. Üçüncü parti eklentiye gerek yok. Büyük metin ve arayüz bileşenleri için eşik 3:1'e iner, gövde metni ve ince ikonlar için 4.5:1 geçerlidir.

Çifti nerede kullanmalı

Tamamlayıcı çiftin gerçek işi vurgu. Zeminde ana renginizin soluk bir tonu, tek bir aksiyon düğmesinde karşıt renk. İki rengi de tam doygunlukta, geniş alanlarda yan yana verirseniz kenarlarda titreme hissi oluşur ve göz nereye bakacağını bilemez.

Pratikte işleyen dağılım şu: baskın renk büyük alanlarda, ikincil ton bölümleri ayırmakta, tamamlayıcı renk sayfada bir ya da iki yerde. Üç tane "birincil eylem" düğmesi koyduğunuz anda vurgu diye bir şey kalmaz.

Klasik çiftler ve durdukları yer

• Mavi ve turuncu: kurumsal arayüzlerin varsayılanı. Mavi zeminde koyulaştırılmış turuncu, doygun turuncudan çok daha okunur.
• Kırmızı ve yeşil: durum göstergelerinde kullanılıyor, tam da kullanılmaması gereken yer. Aşağıya bakın.
• Sarı ve mor: yüksek enerjili, dar alanda iyi çalışır. Sarıyı metin rengi yapmayın, parlaklığı zemin rengine fazla yakın.

Renk tek başına anlam taşımasın

Kırmızı-yeşil çifti, en yaygın renk körlüğü türü olan döteranopide birbirine yaklaşır. Hata mesajını kırmızı, başarı mesajını yeşil yapan bir form bu kullanıcılar için iki gri kutuya dönüşür. Çözüm renkten vazgeçmek değil, renge ikinci bir sinyal eklemek: ikon, kısa metin, kenarlık kalınlığı. Aynısı grafikler için de geçerli, seriyi renkle ayırıyorsanız çizgi deseni ya da doğrudan etiket ekleyin.

Diğer şemalar hangi işi görür

Tamamlayıcı tek seçenek değil, çoğu projede en zoru. Monokromatik palet, aynı rengin ton varyasyonlarıyla ilerler; kurum kimliği tek renge bağlıysa en az riskli yol. Analog palet, çarkta komşu renkleri kullanır ve yumuşak geçiş ister; içerik ağırlıklı sitelerde okumayı bölmediği için iyi çalışır. Triadik palet üç eşit aralıklı renk alır, dengesi güzeldir ama üç rengi de hiyerarşiye oturtmak zaman ister.

Seçim şuna bağlı: arayüzde kaç farklı durum göstermeniz gerekiyor? İki durum varsa monokromatik yeter. Vurgulanacak tek bir eylem varsa tamamlayıcı çift işi görür. Üçten fazla eşit ağırlıklı kategori varsa renk zaten yetmez, konum ve tipografiyle ayırmanız gerekir.