Triadik Renk Şeması: Eşit Açı, Eşit Kontrast Değil
Triadik renk şeması, renk çemberinde birbirine 120 derece uzaklıktaki üç rengi bir arada kullanmak demek. Kulağa matematiksel bir garanti gibi geliyor, oysa eşit açı eşit görsel ağırlık anlamına gelmiyor: aynı üçlünün bir rengi beyaz zeminde 8,6:1 kontrast verirken bir diğeri 1,07:1'de kalıyor. Palet kararının verildiği yer bu yüzden çember değil, kontrast hesabı.
Önce şu soru: hangi çember?
Klasik triadik örnek kırmızı, sarı, mavidir. Bu üçlü ressamın RYB çemberinden gelir. Ekran için çalışıyorsanız çemberiniz RYB değil HSL ve orada işler başka türlü yürüyor. hsl(0) kırmızıdan 120 derece dönünce sarı değil yeşil gelir, bir 120 daha dönünce mavi. Yani CSS'te üç eşit adım atarak klasik üçlüyü elde edemezsiniz.
Kırmızı, sarı, mavi istiyorsanız açılarınız kabaca 0, 60 ve 240 olur. Aradaki mesafeler 60, 180 ve 120 derece, yani bu bir triad değil. Ekran işinde tavsiyem RYB triadını taklit etmeye çalışmamak: HSL üzerinde gerçekten 120'şer derece dönüp başlangıç üçlüsünü çıkarın, karakteri sonra doygunluk ve açıklıkla ayarlayın. Öngörülebilir olan yol bu.
Eşit açı, eşit kontrast değil
WCAG kontrastı renk tonuna bakmaz, bağıl parlaklığa bakar. Ton çemberde ne kadar düzgün dağılırsa dağılsın parlaklık dağılımı bambaşka olabilir. Saf RGB üçlüsünün beyaz zemindeki kontrast oranları şöyle:
#FF0000kırmızı: 4,0:1#00FF00yeşil: 1,37:1#0000FFmavi: 8,59:1
Normal boy metin için AA eşiği 4,5:1. Üç rengin hiçbiri beyaz üstünde gövde metni olarak geçmiyor, kırmızı kıl payı kalıyor. Sarı ile mavi kendi aralarında 8,0:1 gibi rahat bir oran verir, ama sarının beyaz üstündeki oranı 1,07:1'dir. Sarıyı metin rengi yaptığınız anda palet çöker.
Buradan çıkan pratik kural: triadik paleti metin rengi olarak değil, yüzey ve vurgu rengi olarak kurun. Metin gerektiğinde aynı tonun koyulaştırılmış türevini üretin. Kontrast kontrolünü de paletin son adımı yapmayın, ikinci adımı yapın. Üç rengi seçtikten sonra ölçmek, çoğu zaman baştan başlamak demek oluyor.
60-30-10 aslında neyi düzeltiyor
Triadik paletlerin çocuk sitesi gibi görünmesinin başlıca sebebi üç rengin eşit oranda kullanılması. 60-30-10 kuralı tonlara dokunmaz, aralarındaki güç dengesini kırar: %60 baskın zemin, %30 ikincil yüzeyler, %10 vurgu.
O %10'luk dilim üzerinde biraz durmak gerekiyor, çünkü çoğu tasarım orada hata yapıyor. Vurgu rengi eylem sinyalidir. Üç rengin üçünü birden butonlarda kullanırsanız hiçbiri tıklanabilirlik taşımaz, kullanıcı hangisinin ana eylem olduğunu renkten okuyamaz. Bir palette kaç renk olduğu değil, kaç rengin iş yaptığı önemli.
Markalarda triadik gerçekten var mı?
Firefox, Fanta, Nickelodeon gibi örnekler bu konuda sürekli tekrarlanır. Bir renk seçiciyle logolarına bakın: açılar tam 120 derece tutmuyor. Yaklaşık triad diyebileceğimiz, sonra elle ayarlanmış paletler bunlar. Teorinin verdiği üçlüyü alıp doğrudan kullanan neredeyse yok.
Daha önemli fark şu: bunların hepsi logo paleti, sayfa paleti değil. Logo üç canlı rengi birkaç santimetrekarede taşır ve orada canlılık avantajdır. Aynı üçlüyü 1400 piksel genişliğinde bir arayüze yaydığınızda ortaya çıkan şey denge değil gürültü olur.
Sık verilen Hulk örneğine de değineyim: yeşil ile mor iki renktir, üç değil, aralarındaki açı da 120'ye değil komplementere yakındır. Bu tür örnekler listeyi uzatıyor ama iddiayı desteklemiyor.
Nereden başlamalı
Marka renginizi sabitleyin, HSL'de 120'şer derece dönerek iki adayı çıkarın, üçünü de zemin ve metin ihtiyacına göre parlaklıkta kaydırın. Çember size yalnızca bir başlangıç noktası veriyor. Gerisi ton işi değil, parlaklık işi.
Kaynaklar