Renk seçimi rehberi: 60-30-10 kuralı ve okunabilirlik (kontrast) kontrolü

Grafik & Tasarım · Design
, ,
1

Tasarım “amatör” görünüyorsa sebep çoğu zaman renktir. İki basit kural işin büyük kısmını çözer.

1. 60-30-10 kuralı

  • %60 ana renk: zemin, büyük alanlar. Genelde nötr bir renk (beyaz, koyu lacivert, gri).
  • %30 ikincil renk: kartlar, menüler, bölüm arka planları.
  • %10 vurgu rengi: butonlar, bağlantılar, önemli uyarılar. Göz ilk buraya gider.

Vurgu rengini her yere serpiştirirsen hiçbir şey öne çıkmaz.

2. Kontrast: okunabiliyor mu?

Web erişilebilirlik standardı (WCAG) metin ile zemini arasında şu oranları ister:

  • Normal metin: en az 4.5:1
  • Büyük metin (yaklaşık 24px ve üstü): en az 3:1

Ücretsiz kontrol araçları:

  • WebAIM Contrast Checker: iki rengi gir, sonucu gör
  • Chrome DevTools: bir yazıyı incele, renk kutusuna tıkla, kontrast oranı orada yazar

3. Palet bulmak için ücretsiz araçlar

  • coolors.co: boşluk tuşuyla rastgele uyumlu paletler
  • Adobe Color: bir fotoğraftan palet çıkarır
  • realtimecolors.com: paletini hazır bir site şablonunda canlı görürsün

4. CSS’te renkleri değişken olarak tanımla

:root {
  --zemin: #0b1118;
  --kart: #131c26;
  --metin: #e6f1f7;
  --vurgu: #00f0a8;
}
body   { background: var(--zemin); color: var(--metin); }
.kart  { background: var(--kart); }
.buton { background: var(--vurgu); color: #04110c; }

Böylece tüm siteyi tek satırdan yeniden renklendirebilirsin; karanlık mod eklemek de kolaylaşır.

Çalışmalarınızın paletini paylaşın, birlikte yorumlayalım. :artist_palette: