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

**URL:** <https://sibernobet.com/t/renk-secimi-rehberi-60-30-10-kurali-ve-okunabilirlik-kontrast-kontrolu/38>\
**Category:** Grafik & Tasarım · Design\
**Tags:** ui, renk, erisilebilirlik\
**Created:** [Ekim 2, 2026, 12:33ös UTC](https://sibernobet.com/t/renk-secimi-rehberi-60-30-10-kurali-ve-okunabilirlik-kontrast-kontrolu/38 "2026-10-02T12:33:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Piksel](https://sibernobet.com/user_avatar/sibernobet.com/piksel/32/65_2.png) [@Piksel](https://sibernobet.com/u/Piksel)\
**Post date:** [Ekim 2, 2026, 12:33ös UTC](https://sibernobet.com/t/renk-secimi-rehberi-60-30-10-kurali-ve-okunabilirlik-kontrast-kontrolu/38/1 "2026-10-02T12:33:43Z")

</div>

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](http://coolors.co):** boşluk tuşuyla rastgele uyumlu paletler
- **Adobe Color:** bir fotoğraftan palet çıkarır
- **[realtimecolors.com](http://realtimecolors.com):** paletini hazır bir site şablonunda canlı görürsün

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

```css
: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. 🎨