Renk Kontrastı Hesaplama (WCAG)
Bu araç, girdiğiniz iki HEX renk kodu (örneğin metin ve arka plan) arasındaki WCAG kontrast oranını 1 ile 21 arasında hesaplar. Sonucun WCAG AA ve AAA erişilebilirlik kriterlerini geçip geçmediğini gösterir; böylece tasarımınızın okunabilir ve erişilebilir olduğundan emin olursunuz.
WCAG AA (normal): ✓ Geçer · AA (büyük): ✓ Geçer · AAA: ✓ Geçer
WCAG erişilebilirlik eşikleri: AA normal metin ≥4,5:1, AA büyük metin (18pt+/14pt bold) ≥3:1, AAA normal ≥7:1. Yüksek kontrast, düşük görüşlü kullanıcılar için okunabilirliği artırır.
🔗 Bu aracı sitene ekle
Bu hesaplama aracını kendi web sitende ücretsiz kullanabilirsin. Rengini ayarla, hazır kodu kopyala, sitene yapıştır — hepsi bu kadar.
Aracı sitene ekle →Renk kontrastı neden önemli?
Renk kontrastı, bir metnin arka planından ne kadar ayırt edilebildiğini gösterir. Web erişilebilirliğinin temel taşlarından biridir. Düşük kontrastlı yazılar; görme engelli, düşük görüşlü, renk körü ve yaşlı kullanıcılar için okunması zor, hatta imkânsız hale gelir. Parlak güneş altında telefon kullanan herkes de bu zorluğu yaşar.
Uluslararası WCAG (Web Content Accessibility Guidelines) standardı, yeterli kontrastı erişilebilirlik için zorunlu kabul eder. Yeterli kontrast, içeriğinizi daha geniş bir kitleye ulaştırır, okunabilirliği artırır ve birçok ülkede yasal uyumluluk açısından da önem taşır.
Kontrast oranı nasıl hesaplanır?
Kontrast oranı, iki rengin rölatif parlaklığına (relative luminance) dayanır. Önce her rengin RGB bileşenleri gama düzeltmesiyle parlaklık değerine dönüştürülür. Ardından açık ve koyu rengin parlaklıkları (L1 ve L2) şu formülle karşılaştırılır:
- Kontrast = (L1 + 0,05) / (L2 + 0,05)
- L1: daha açık (parlak) rengin rölatif parlaklığı
- L2: daha koyu rengin rölatif parlaklığı
Sonuç her zaman 1:1 ile 21:1 arasında çıkar. Aynı iki renk 1:1 verirken, #000000 (siyah) ile #ffffff (beyaz) arası en yüksek değer olan 21:1 ile mükemmel kontrast sağlar.
WCAG eşik değerleri
WCAG, metin boyutuna ve uyum seviyesine göre farklı minimum kontrast oranları belirler. Büyük metin, yaklaşık 18,66 px kalın veya 24 px normal ve üzeri olarak kabul edilir.
| Senaryo | Minimum kontrast |
|---|---|
| AA – Normal metin | 4,5:1 |
| AA – Büyük metin | 3:1 |
| AAA – Normal metin | 7:1 |
| AAA – Büyük metin | 4,5:1 |
Örneğin açık gri bir metin (#aaaaaa) beyaz zemin üzerinde yaklaşık 2,3:1 oranı verir ve AA kriterini geçemez; bu metin birçok kullanıcı için okunaksızdır.
HEX renk kodu ve renk seçimi ipuçları
HEX renk kodu, bir rengi #RRGGBB biçiminde altı haneyle ifade eder; örneğin #1a73e8. Araca metin ve arka plan renklerinizi bu biçimde girmeniz yeterlidir.
- Koyu metni açık zeminde ya da açık metni koyu zeminde kullanın.
- Birbirine yakın tonlardan (açık gri üzerine beyaz gibi) kaçının.
- Buton, bağlantı ve hata mesajları gibi önemli ögelerde kontrastı mutlaka kontrol edin.
- Renk seçiminizi sadece tona değil, parlaklık farkına da dayandırın.
Renklerinizi girip kontrast oranını ve AA/AAA sonucunu saniyeler içinde görün; gerekirse tonları biraz koyulaştırarak veya açarak eşikleri rahatça yakalayın.
Sıkça Sorulan Sorular
Renk kontrastı nedir?
Renk kontrastı, bir metin veya ögenin arka planından ne kadar belirgin biçimde ayırt edilebildiğini ifade eder. Sayısal olarak kontrast oranıyla, yani 1:1 ile 21:1 arasında bir değerle gösterilir. Yüksek kontrast okunabilirliği artırır; düşük kontrast özellikle görme engelli ve düşük görüşlü kullanıcılar için içeriği zor okunur hale getirir.
WCAG AA kontrast oranı kaç olmalı?
WCAG AA seviyesi için normal boyutlu metinde kontrast oranı en az 4,5:1 olmalıdır. Büyük metinlerde (yaklaşık 24 px normal veya 18,66 px kalın ve üzeri) bu eşik 3:1'e iner. Daha yüksek erişilebilirlik isteyen AAA seviyesinde ise normal metin için 7:1, büyük metin için 4,5:1 oranı gerekir.
Kontrast oranı nasıl hesaplanır?
Önce her rengin rölatif parlaklığı (luminance), RGB değerlerinden gama düzeltmesiyle bulunur. Sonra açık ve koyu rengin parlaklıkları L1 ve L2 olmak üzere (L1 + 0,05) / (L2 + 0,05) formülüyle oranlanır. Sonuç 1:1 ile 21:1 arasında çıkar; siyah ile beyaz arası en yüksek değer olan 21:1'i verir.
Erişilebilir renk nasıl seçilir?
Erişilebilir renk seçiminde metin ile arka plan arasındaki parlaklık farkını yüksek tutun: koyu metni açık zemine, açık metni koyu zemine yerleştirin. Birbirine yakın tonlardan kaçının ve seçiminizi bu araçla doğrulayın. Oran 4,5:1'in altındaysa rengi biraz koyulaştırarak veya açarak AA eşiğini yakalayabilirsiniz.