Kısa cevap: Web sitesinde renk kontrastı, metin ile arka planın göreli parlaklığı arasındaki ölçülebilir farktır. WCAG 2.2 kapsamında AA seviyesinde normal metinde en az 4,5:1, büyük metinde 3:1 oranı kullanılır. AAA için normal metinde 7:1, büyük metinde 4,5:1 hedeflenir. Yalnızca renk oranının uygun olması, tüm sitenin erişilebilir olduğu anlamına gelmez.
Bu rehber, tasarım yaparken renk çiftlerini doğru seçmek, sık yapılan hataları bulmak ve ücretsiz renk kontrastı aracımızla sonuçları kontrol etmek isteyenler için hazırlandı. Eşikler WCAG 2.x’in ilgili başarı ölçütlerine ilişkindir; her metin ve arayüz öğesi aynı kuralla değerlendirilmez.
1. Renk kontrastı nedir, neden önemlidir?
Açık gri bir yazı beyaz zeminde zarif görünebilir ama görme güçlüğü yaşayan kişiler, güçlü güneş ışığında ekrana bakan kullanıcılar veya düşük kaliteli ekrana sahip cihazlarda okunması zorlaşabilir. Kontrast, renklerin yalnız ton veya doygunluk olarak farklı görünmesini değil, ışıklılık farkını hesaba katar.
Yeterli kontrast; ana metin, form etiketleri, hata mesajları ve navigasyon bağlantıları gibi günlük kullanım öğelerinin anlaşılmasını destekler. Markanın görsel kimliğiyle erişilebilirlik çelişmek zorunda değildir: Bir rengin daha koyu veya daha açık tonunu kullanarak kullanılabilir bir sistem kurulabilir.
2. WCAG AA ve AAA kontrast oranları
| İçerik türü | AA | AAA |
|---|---|---|
| Normal metin ve metin görseli | En az 4,5:1 | En az 7:1 |
| Büyük metin ve büyük metin görseli | En az 3:1 | En az 4,5:1 |
| Önemli arayüz bileşeni ve grafik nesnesi | İlgili WCAG 1.4.11 bağlamında en az 3:1 | Metin için kullanılan AAA tablosuyla aynı başlık değildir |
Büyük metin, WCAG 2.x bağlamında yaklaşık 18 punto (24 CSS px) normal ya da 14 punto (yaklaşık 18,66 CSS px) kalın metin gibi tanımlanır. Fontun gerçek kalınlığı ve tasarımı önemlidir. Bir metnin sadece h2 etiketi içinde olması onu otomatik olarak büyük metin yapmaz.
Oran sınırında yuvarlamayla geçer sonucu üretmeyin. Örneğin hesaplanan gerçek değer 4,499:1 ise 4,5:1 sınırını karşılamaz. Renkleri seçerken tam eşik yerine biraz güvenlik payı bırakmak pratikte daha sağlıklıdır.
3. Kontrast oranı nasıl hesaplanır?
WCAG 2.x kontrast hesabı, iki rengin göreli parlaklığı kullanılarak yapılır. Daha açık rengin parlaklığı L1, daha koyununki L2 olsun. Oran (L1 + 0.05) / (L2 + 0.05) formülüyle hesaplanır. Sonuç 1:1 (eşit parlaklık) ile 21:1 (siyah-beyaz gibi en yüksek fark) arasında değişir.
HEX kodunun yalnız rakamsal büyüklüğüne bakmak yeterli değildir. Hesaplama renk kanallarının doğrusal ışık değerlerine dönüştürülmesini içerir. Bu nedenle pratikte doğrulanmış bir hesaplama aracı kullanmak daha güvenlidir.
4. HEX renk örnekleri: Hangileri geçer?
| Metin / zemin | Yaklaşık oran | Normal metin AA |
|---|---|---|
#000000 / #FFFFFF |
21:1 | Geçer |
#777777 / #FFFFFF |
4,48:1 | Geçmez |
#767676 / #FFFFFF |
4,54:1 | Geçer (sınıra yakın) |
#FFFFFF / #FFFFFF |
1:1 | Geçmez |
Bu örnekler düz, opak ve tek renk arka plan içindir. Yarı saydam bir katman, gölge veya fotoğrafın üzerine yerleşen yazının gerçek kontrastı farklı olabilir. Son renk kombinasyonunu sayfanın kendisinde doğrulayın.
5. Ücretsiz kontrast aracıyla nasıl test yapılır?
- Ücretsiz Web Tasarım Araçları sayfasını açın.
- Metin (ön plan) için kullandığınız HEX renk kodunu girin.
- Arka plan rengini seçin veya kodunu yapıştırın.
- Hesaplanan oranı normal metin ve büyük metin eşikleriyle karşılaştırın.
- Sonucu geçer bulsanız bile gerçek sayfanın font kalınlığını ve arka planını kontrol edin.
Bu test ücretsiz bir ön kontroldür; tek bir oran, menü davranışı, klavye gezintisi, görsellerin alternatif metinleri veya form erişilebilirliği konusunda kapsamlı değerlendirme sağlamaz.
6. Normal metin, büyük metin ve bağlantılar
Normal paragraf, açıklama, navigasyon ve form etiketleri çoğunlukla 4,5:1 AA eşiğiyle değerlendirilir. Yeterince büyük ve kalın metin için 3:1 eşiği uygulanabilir. Ancak küçük açık gri yazıların “ikincil bilgi” olduğu gerekçesiyle muaf sayılması doğru değildir; gerçekten görüntülenen ve gerekli bilgiler de okunabilir olmalıdır.
Bağlantıların yalnızca renkle diğer metinden ayrıldığı tasarımlarda kontrastın yanı sıra kullanıcıya bağlantı olduğunu gösteren başka bir görsel ipucu gerekebilir. Alt çizgi, odak durumu ve hover davranışı birlikte ele alınmalıdır.
7. Buton, form kenarlığı ve ikonlarda kontrast
WCAG 1.4.11, kullanıcı arayüzü bileşenlerini tanımak için gereken görsel bilgilerin ve önemli grafik nesnelerin bitişik renklere göre yeterince ayırt edilmesini ele alır. Bu, metin kontrastı eşiğiyle karıştırılmamalıdır. Örneğin bir butonun üzerindeki yazı 4,5:1 sağlayabilirken butonun çevreyle sınırı bazı durumlarda yeterince belirgin olmayabilir.
- Odak (focus) göstergesinin görünür olduğundan emin olun.
- Form hatasını yalnız kırmızı kenarlıkla bildirmeyin; anlaşılır metin ekleyin.
- Durum ikonlarının ve işlevsel çizgilerin çevrelerinden ayırt edilmesini kontrol edin.
- Soluk placeholder metnini zorunlu alan etiketi yerine kullanmayın.
8. Fotoğraf ve gradyan üzerine metin
Görsel arka plan üzerinde tek bir kontrast oranı tüm alanı temsil etmez. Fotoğrafın açık ve koyu bölgeleri değiştikçe metin farklı noktalarda zor okunabilir. Sabit bir arka plan katmanı veya metnin yer aldığı alanda yeterli kontrast sağlayan sağlam bir renk tercih edilebilir.
Gradyan kullanıyorsanız yazının temas edebileceği en açık veya en koyu bölgeleri ayrı sınayın. CSS değişikliğiyle yeni bir hover veya focus görünümü ekledikten sonra sadece varsayılan durumu değil, bütün ilgili durumları tekrar test edin.
9. Tasarım sisteminde erişilebilir renk paleti oluşturma
Tek tek sayfalardaki renk hatalarını sonradan gidermek yerine, başlangıçta birkaç güvenilir metin-arka plan çifti belirlemek daha az bakım gerektirir. Örneğin “ana metin”, “ikincil metin”, “bağlantı”, “uyarı”, “buton yazısı” ve “yüzey” renklerini bir tabloda eşleştirip test edebilirsiniz.
Birincil marka renginiz beyaz metinle yeterli kontrast sağlamıyorsa onu yalnız dekoratif öğede kullanıp düğme zemini için daha koyu bir ton tanımlayabilirsiniz. Koyu tema planlanıyorsa kontrast ölçümlerini o tema için ayrıca yapın; açık temadaki oran otomatik olarak geçerli kalmaz.
10. Yayın öncesi renk kontrastı kontrol listesi
- Gövde metni, menü, bağlantı ve form etiketlerinden örnekler seçin.
- İlgili metnin gerçek ön plan ve arka plan kodlarını bulun.
- Normal ve büyük metin eşiğini doğru sınıflandırın.
- Buton sınırı, ikon, form kontrolü ve odak göstergesini ayrıca gözden geçirin.
- Hover, aktif, pasif ve hata durumlarında okunabilirliği kontrol edin.
- Fotoğraf ve gradyan arka planlarda metnin geçtiği bölgeleri test edin.
- Mobilde, farklı ekran parlaklıklarında ve yakınlaştırmada tekrar bakın.
- Ekran okuyucu ve klavye kullanımını da kapsayan daha geniş erişilebilirlik testini tamamlayın.
11. Kontrast, kullanılabilirlik ve SEO ilişkisi
Yeterli kontrast, gerçek kullanıcıların sayfayı okuyabilmesi için temel bir tasarım kalitesi ölçütüdür. Tek bir kontrast skoru, Google’da sıralama garantisi sağlamaz. Kullanıcı deneyimini responsive tasarım, sayfa yükleme hızı ve içerik kalitesiyle birlikte düşünün.
Yeterli kontrast, tek başına rahat okuma sağlamaz
Renkler erişilebilir bir kontrast oranını karşılasa bile çok uzun satırlar, dar satır aralığı veya yanlış yazı ağırlığı metni yorucu hâle getirebilir. Bu nedenle kontrast testinin ardından yazı tipi, satır uzunluğu ve mobil tipografi rehberindeki kontrolleri de uygulayın.
Sık sorulan sorular
4,5:1 oranı her öğe için mi zorunlu?
Hayır. Bu, AA düzeyinde normal metin için kullanılan eşiktir. Büyük metin ve bazı metin dışı arayüz öğeleri ayrı kriterlerle incelenir.
Siyah-beyaz kontrastı kaçtır?
Opak düz siyah ile düz beyaz arasındaki teorik oran 21:1’dir.
Bir renk kombinasyonu AA geçiyorsa AAA da geçer mi?
Her zaman değil. Normal metinde AAA hedefi daha yüksektir: 7:1.
HEX kodu yerine RGB ile hesaplayabilir miyim?
Evet. Doğru renk dönüşümü yapıldığında aynı sRGB rengin HEX ve RGB gösterimleri aynı göreli parlaklığı verir.
Kontrast testi tek başına WCAG uyumluluğu kanıtlar mı?
Hayır. WCAG, renk kontrastı dışında klavye erişimi, anlamlı metin, hata bildirimi ve çok sayıda farklı başarı ölçütü içerir.