Kısaca: Renk kontrastı, metin ile arka planı arasındaki parlaklık farkıdır. Bu farkı 1:1 (fark yok) ile 21:1 (beyaz üzerine siyah) arasında bir oranla ölçeriz. Web erişilebilirlik standardı WCAG’a göre normal metin için en az 4,5:1 kontrast gerekir. Büyük metin (24 piksel ve üzeri ya da 18,66 piksel ve üzeri kalın) için ise en az 3:1 yeterlidir. WCAG, buton kenarları ve ikonlar gibi arayüz öğeleri için de 3:1 önerir. Son olarak, kontrastı tahmin etmeyin; WebAIM Contrast Checker gibi ücretsiz bir araçla ölçün.
Renk kontrastı: Kısa cevap
Bir rengin güzel görünmesi, üzerindeki yazıyı rahat okuyacağınız anlamına gelmez. Örneğin açık gri metin, sarı zemin üzerine beyaz yazı ya da kırmızı üzerine yeşil tasarım dosyasında şık durur. Ama birçok kullanıcı bu kombinasyonları okuyamaz. Bu yazıda renk kontrastı ölçümünü ve hangi değerlerin yeterli olduğunu anlatıyorum. Ardından herkesin okuyabileceği bir renk paletini nasıl kuracağınızı gösteriyorum.
Renk kontrastı nedir?
Kontrast oranı, iki rengin göreli parlaklıkları (luminance) arasındaki farkın bir ölçüsüdür. Yani ton (kırmızı, mavi) değil, açıklık ve koyuluk belirleyicidir. Bu yüzden canlı ve birbirinden çok farklı görünen iki rengin renk kontrastı, parlaklıkları aynıysa düşük çıkar. Aşağıdaki örneklerdeki kırmızı ve yeşil buna iyi bir örnek. Ton olarak zıt renkler, ama kontrast oranı 1,03:1, yani neredeyse hiç fark yok.
WCAG renk kontrastı kuralları
WCAG (Web Content Accessibility Guidelines), W3C’nin web erişilebilirlik standardıdır. Renk kontrastı ile ilgili temel kurallar şunlardır (W3C):
| Öğe | AA (asgari) | AAA (gelişmiş) |
|---|---|---|
| Normal metin | 4,5:1 | 7:1 |
| Büyük metin (18 punto / yaklaşık 24 piksel ve üzeri, ya da 14 punto / yaklaşık 18,66 piksel ve üzeri kalın) | 3:1 | 4,5:1 |
| Arayüz öğeleri ve grafikler (buton kenarı, form alanı, ikon) | 3:1 | – |
| Logolar ve dekoratif metin | Kural yok | Kural yok |
Çoğu proje için hedef AA seviyesidir. 4,5:1 oranının bir hesabı var. W3C bu değeri, 20/40 görme keskinliğine sahip birinin kaybettiği kontrastı telafi etsin diye seçti. Yani bu oran, gözlüğü olmadan ekrana bakan, yaşlanmakta olan ya da güneş altında telefon kullanan herkes içindir.
Renk kontrastı ölçmek için 4 adım
- Metin rengi ve arka plan renginin HEX kodlarını alın (örneğin #444C57 ve #FFFFFF).
- WebAIM Contrast Checker gibi bir araca girin.
- Ardından normal ve büyük metin için AA ve AAA sonuçlarına bakın.
- Geçmiyorsa, rengin tonunu değil açıklığını değiştirin: Metni koyulaştırın ya da zemini açın.
Ayrıca Figma’da kontrast ölçen eklentiler var. Tarayıcıların geliştirici araçları da bir metin öğesini incelediğinizde renk kontrastı oranını gösterir. Görselin üzerine metin koyduysanız ise metnin altına gelen en açık noktayı ölçün; görselin ortalama rengini değil.
En sık gördüğüm renk kontrastı hataları
- Açık gri gövde metni: Modern ve sade bir hava verir. Ama beyaz zeminde #949494 gibi bir gri, 3,03:1 ile normal metin için yetersizdir. Buna karşılık #767676 gri, beyaz zeminde 4,5:1’i geçen en açık gri tonlarından biridir.
- Canlı renkli zeminde beyaz yazı: Sarı, açık turuncu ve açık yeşil zeminlerde beyaz yazıyı neredeyse okuyamazsınız. Bu yüzden bu renklerde koyu yazı kullanın.
- Fotoğraf üzerine yazı: Fotoğrafın açık bölgeleri yazıyı yutar. Bu yüzden yazının arkasına yarı saydam koyu bir katman ya da düz renkli bir alan ekleyin.
- Placeholder metni form etiketi gibi kullanmak: Form alanlarındaki soluk ipucu metinleri genellikle düşük kontrastlıdır ve yazmaya başlayınca kaybolur. Bu yüzden asıl etiketi alanın dışına, yeterli kontrastla yazın.
- Devre dışı görünen aktif butonlar: Kullanıcı çok açık renkli butonları tıklanamaz sanır.
Renk körlüğü: Bilgiyi yalnızca renkle vermeyin
Renk körlüğü, çoğumuzun sandığından daha yaygındır. Dünyada erkeklerin yaklaşık 12’de biri, kadınların yaklaşık 200’de biri renk görme eksikliği yaşar (Colour Blind Awareness). En yaygın türü kırmızı ile yeşili ayırt etmeyi zorlaştırır.
WCAG bu yüzden bilgiyi yalnızca renkle vermemenizi ister. Pratikte bu şu anlama gelir:
- Formdaki hatalı alanı sadece kırmızı kenarla değil, bir uyarı metni ya da ikonla da gösterin.
- Aynı şekilde metin içindeki bağlantıları sadece renkle değil, alt çizgiyle de ayırın.
- Grafiklerde renklerin yanına etiket, desen ya da farklı çizgi stili ekleyin.
- “Yeşil butona tıklayın” gibi yalnızca renge dayanan yönlendirmeler yazmayın.
Tasarımınızı gri tonlamaya çevirmek hızlı bir kontroldür. Çünkü tasarım siyah beyazda hâlâ anlaşılıyorsa, renge fazla yaslanmıyorsunuz demektir. Bu testi görsel hiyerarşi yazısında da öneriyorum.
Herkesin okuyabileceği bir renk paleti nasıl kurarsınız?
1. Rolleri belirleyin
Önce paleti renk adlarıyla değil, görevlerle düşünün: arka plan, gövde metni, başlık, vurgu (buton ve bağlantı), kenarlık, başarı, hata. Ardından her rol için bir renk seçin. Sonra metin rolleri ile arka plan arasındaki renk kontrastı değerini tek tek ölçün.
2. Her rengin açık ve koyu tonlarını üretin
Bazen marka rengi doğrudan metin rengi olarak yetersiz kalır. Bu durumda aynı rengin daha koyu bir tonunu metin için, daha açık bir tonunu arka plan için kullanın. Kısacası rengin tonunu korurken açıklığını değiştirmek, marka hissini bozmadan kontrastı düzeltmenin en kolay yoludur.
3. Oranı düşünün: 60-30-10
İç mimarlıktan gelen 60-30-10 kuralı, renk dağılımı için iyi bir başlangıç noktasıdır. Buna göre yüzeyin yaklaşık %60’ı baskın renk (genellikle zemin), %30’u ikincil renk, %10’u vurgu rengidir. Çünkü vurgu rengini az kullandığınızda gerçekten vurgular.
4. Etkileşim durumlarını unutmayın
Butonun üzerine geldiğinizde (hover), butona odaklandığınızda (focus) ve bastığınızda aldığı renkler de renk kontrastı kurallarına uymalı. Özellikle klavyeyle gezinenler için odak çerçevesi açıkça görünmelidir.
5. Karanlık modda renk kontrastı testini tekrarlayın
Açık temada geçen renkler, karanlık temada her zaman geçmez. Bu yüzden karanlık mod sunuyorsanız bütün ölçümleri yeniden yapın. Ayrıca saf siyah zemin üzerine saf beyaz metin, bazı okurların gözünü yorar. Çok koyu gri zemin ve kırık beyaz metin daha rahat bir seçenektir.
Sık sorulan sorular
Kontrast oranı 4,5:1 ne demek?
Önce iki rengin göreli parlaklığına 0,05 eklersiniz. Sonra açık rengin değerini koyu rengin değerine bölersiniz; sonuç 4,5 ise oran 4,5:1’dir. Pratikte bu, çoğu kullanıcının normal boyuttaki metni rahat okuyacağı asgari farktır. Ama hesabı elle yapmanıza gerek yok; kontrast ölçüm araçları sizin için yapar.
Logolar da renk kontrastı kuralına uymak zorunda mı?
WCAG logoları kontrast kuralından muaf tutar. Ama logo farklı zeminlerde yer alacaktır. Bu yüzden açık ve koyu zemin sürümlerini hazırlamak her zaman iyi bir fikirdir. Bunu ayrıntılı olarak logo dosya formatları yazısında anlattım.
Erişilebilirlik Türkiye’de zorunlu mu?
Kamu kurumlarının siteleri için erişilebilirlik düzenlemeleri var. Avrupa Birliği’nde ise Haziran 2025’ten itibaren birçok özel sektör ürün ve hizmeti için Avrupa Erişilebilirlik Yasası yürürlükte. Projenizi hangi kuralların kapsadığını kesin öğrenmek için bir hukukçuya danışın. Ama yasal zorunluluktan bağımsız olarak, rahat okunan bir site herkes için daha iyi bir sitedir.
Bu yazı Kasım 2026 itibarıyla geçerli bilgilere dayanır. Kontrast değerleri WCAG 2.2 ile aynıdır; WCAG’ın gelecek sürümlerinde ölçüm yönteminin değişmesi mümkün.
