Şık görünen açık gri bir metin tasarım ekranında harika durabilir; ama güneş altında telefondan bakan bir kullanıcı, yaşlı bir ziyaretçi ya da renk körlüğü olan biri için okunması zor olabilir. Web İçeriği Erişilebilirlik Yönergeleri (WCAG), metin ve arka plan arasındaki minimum kontrastı ölçülebilir oranlarla tanımlar. Bu rehberde bu oranları, nasıl hesaplandıklarını ve erişilebilir bir renk paletinin nasıl kurulacağını anlatıyoruz. Renk çiftlerinizi test etmek için renk kontrast kontrol aracımızı kullanabilirsiniz.
Kontrast oranı nedir?
Kontrast oranı, iki rengin göreli parlaklıkları arasındaki farkı gösterir ve 1:1 (aynı renk) ile 21:1 (siyah üzerine beyaz) arasında değişir.
Kontrast oranı = (L1 + 0,05) ÷ (L2 + 0,05)
L1 = açık rengin göreli parlaklığı
L2 = koyu rengin göreli parlaklığıGöreli parlaklık (L) hesaplanırken renk kanalları gama düzeltmesinden geçirilir ve insan gözünün yeşile en duyarlı olması nedeniyle ağırlıklandırılır:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
(R, G, B: 0–1 aralığına çevrilmiş ve doğrusallaştırılmış değerler)Bu yüzden aynı “doygunluktaki” sarı ve mavi, kontrast açısından çok farklı sonuç verir: sarı beyaz üzerinde neredeyse okunmaz, koyu mavi ise rahat okunur.
WCAG kontrast gereksinimleri
| Öğe | AA (asgari) | AAA (gelişmiş) |
|---|---|---|
| Normal metin | 4.5:1 | 7:1 |
| Büyük metin (≥ 24 px normal veya ≥ 18,66 px kalın) | 3:1 | 4.5:1 |
| Arayüz öğeleri ve anlamlı grafikler (WCAG 2.1, 1.4.11) | 3:1 | — |
| Dekoratif öğeler, devre dışı butonlar, logolar | Gereksinim yok | Gereksinim yok |
AA seviyesi, kamu kurumlarının ve pek çok yasal düzenlemenin hedef aldığı seviyedir. Avrupa Birliği’nde Haziran 2025’te yürürlüğe giren Avrupa Erişilebilirlik Yasası (EAA), AB pazarına e-ticaret ve dijital hizmet sunan şirketleri, Türkiye’deki ihracatçılar dahil, ilgilendirebilir.
Örnek renk çiftleri
| Metin | Arka plan | Oran | Normal metin AA |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Geçer |
| #595959 | #FFFFFF | 7.00:1 | Geçer (AAA da) |
| #767676 | #FFFFFF | 4.54:1 | Geçer |
| #777777 | #FFFFFF | 4.48:1 | Kalır |
| #999999 | #FFFFFF | 2.85:1 | Kalır |
| #0066CC | #FFFFFF | 5.57:1 | Geçer |
| #1A73E8 | #FFFFFF | 4.51:1 | Geçer (sınırda) |
| #FFFFFF | #E30A17 | 4.86:1 | Geçer |
Son satırdaki kırmızı (Türk bayrağı kırmızısına yakın bir ton) üzerine beyaz metin AA’yı geçer; ancak aynı kırmızıyı koyu gri bir zemin üzerinde metin rengi olarak kullanmak çoğu zaman yetersiz kalır. Görüldüğü gibi #767676 ile #777777 arasındaki tek tonluk fark bile sonucu değiştirebilir; göz kararı yerine ölçmek gerekir.
Renk biçimleri: HEX, RGB ve HSL
Aynı renk farklı biçimlerde yazılabilir:
| Biçim | Örnek | Not |
|---|---|---|
| HEX | #0066CC |
Web’de en yaygın |
| RGB | rgb(0, 102, 204) |
Kanal değerleri 0–255 |
| HSL | hsl(210, 100%, 40%) |
Ton, doygunluk, açıklık |
Erişilebilir palet kurarken HSL çok kullanışlıdır: tonu (H) sabit tutup yalnızca açıklığı (L) değiştirerek aynı rengin daha koyu veya açık varyantlarını üretebilirsiniz. Biçimler arasında dönüşüm için renk kodu dönüştürücü aracımızı kullanabilirsiniz.
Not: HSL’deki “açıklık” değeri, WCAG’ın kullandığı göreli parlaklıkla aynı şey değildir. Aynı L değerine sahip sarı ve mavi çok farklı kontrast verir; bu yüzden sonucu her zaman kontrast aracıyla doğrulayın.
Erişilebilir palet nasıl kurulur?
- Marka renginizi ölçün: Beyaz ve koyu zemin üzerindeki kontrastını kontrol edin.
- Metin için koyu bir varyant türetin: Marka rengi 4.5:1’i sağlamıyorsa, aynı tonun daha koyu bir versiyonunu metin ve link rengi olarak kullanın.
- Gri skalayı baştan belirleyin: Gövde metni, ikincil metin ve devre dışı durum için ayrı griler tanımlayın; ikincil metin bile 4.5:1’in altına düşmesin.
- Durum renklerini kontrol edin: Hata kırmızısı, başarı yeşili ve uyarı sarısı genellikle en çok sorun çıkaranlardır. Sarı uyarılarda metni koyu renk yapın.
- Koyu temayı ayrıca test edin: Açık temada geçen bir renk, koyu zeminde yetersiz kalabilir veya aşırı parlak olabilir.
- Rengi tek bilgi kaynağı yapmayın: Hatalı form alanını yalnızca kırmızı kenarlıkla değil, simge ve metinle de belirtin (WCAG 1.4.1).
Görseller ve arka plan resimleri üzerindeki metin
Fotoğraf üzerindeki metinlerde kontrast her noktada farklıdır. Çözümler:
- Metnin arkasına yarı saydam koyu bir katman (overlay) eklemek
- Metni düz renkli bir kutu içine almak
- Görselin en açık bölgesinde ölçüm yapmak
Sosyal medya paylaşım görsellerinde de aynı kurallar okunabilirliği artırır; paylaşım önizlemeleri için Open Graph rehberimize göz atabilirsiniz.
Kontrast ve SEO, performans
Kontrast doğrudan bir sıralama faktörü olarak bilinmez; ancak Google’ın Lighthouse aracı erişilebilirlik puanında kontrastı denetler ve okunabilirlik kullanıcı davranışını etkiler. Site performansını da birlikte değerlendirmek için site hızlandırma rehberimize bakabilirsiniz.
Kontrastı test etme yöntemleri
- Tarayıcı geliştirici araçları: Chrome ve Firefox’ta bir öğe incelendiğinde renk seçicide kontrast oranı ve AA/AAA durumu gösterilir.
- Lighthouse: Sayfa genelinde yetersiz kontrastlı metinleri listeler.
- Renk körlüğü simülasyonu: Geliştirici araçlarındaki görme bozukluğu emülasyonu, kırmızı-yeşil ayrımına dayanan grafiklerin sorunlarını ortaya çıkarır.
- Gerçek kullanıcı testi: Mümkünse farklı yaş gruplarından kullanıcılara sayfayı telefonda okutun.
Yeni WCAG 3 taslakları, kontrastı farklı bir yöntemle (APCA) ölçmeyi tartışmaktadır; ancak Ekim 2026 itibarıyla yasal düzenlemelerin ve denetim araçlarının çoğu hâlâ WCAG 2.x oranlarını esas alır.
Sık yapılan hatalar
- Açık gri placeholder ve ikincil metinler: En sık başarısız olan öğelerdir.
- Marka rengini doğrudan link rengi yapmak: Önce ölçün.
- Butonun yalnızca metnini kontrol etmek: Buton sınırı ve odak halkası da 3:1 gerektirir.
- Saydamlığı (opacity) unutmak: %60 opaklıktaki siyah metin aslında gri bir metindir.
- Tasarımı yalnızca iyi bir monitörde kontrol etmek: Telefon ekranında, güneş altında ve düşük parlaklıkta da bakın.