">
Temel bilgi Yayın: 17 Temmuz 2026 8 dk okuma

WCAG Kontrast Oranı Nedir, Nasıl Hesaplanır?

Bir tasarım aracı "kontrast oranı 4,2:1" dediğinde bu sayı nereden geliyor? Bu rehberde WCAG'ın relative luminance (göreli parlaklık) formülünü adım adım, gerçek renk örnekleriyle açıklıyor ve kendi renklerinizle elle nasıl hesaplayabileceğinizi gösteriyoruz.

WCAG kontrast oranı nedir?

Kısa cevap WCAG kontrast oranı, iki rengin göreli parlaklığı (relative luminance) arasındaki farkı 1:1 ile 21:1 arasında bir sayıyla ifade eder. 1:1, iki rengin birebir aynı olduğu (hiç kontrast yok) durumu; 21:1 ise saf siyah (#000000) ile saf beyaz (#FFFFFF) arasındaki maksimum kontrastı temsil eder. W3C'nin WCAG 2.x standardı bu oranı metin okunabilirliği için asgari eşiklerle (AA: 4,5:1, AAA: 7:1) tanımlar.

Kontrast oranı, ekranınızın parlaklık ayarından veya renklerin "göze hoş görünmesinden" bağımsız, tamamen matematiksel bir değerdir. Aynı iki hex kodu her yerde, her zaman aynı oranı verir — bu da onu tasarım sistemlerinde ve otomatik denetimlerde (linting, CI) güvenilir bir kriter yapar. Kendi renklerinizi kontrast hesaplayıcıda anında test edebilirsiniz.

Kontrast oranı formülü nedir?

Kısa cevap Kontrast oranı = (L1 + 0,05) / (L2 + 0,05) formülüyle hesaplanır. L1, iki rengin daha yüksek göreli parlaklık değeridir; L2 daha düşük olandır. Formül her zaman L1 > L2 olacak şekilde uygulanır, böylece sonuç her zaman 1'den büyük (veya eşit) çıkar.

0,05 sabiti teknik bir gerekliliktir: eğer koyu renk tam siyahsa (L=0), payda sıfır olup matematiksel hata verirdi. Bu küçük sabit, insan gözünün karanlık ortamda bile tam sıfır ışık algılamadığı gerçeğini de kabaca modeller. Formülün girdisi olan L değerlerini bulmak için önce göreli parlaklık hesaplanmalıdır — bir sonraki adım tam olarak budur.

Göreli parlaklık (relative luminance) nasıl hesaplanır?

Kısa cevap Önce her sRGB kanalı (R, G, B) 255'e bölünerek 0-1 aralığına normalize edilir. Ardından gama düzeltmesiyle doğrusal (linear) değere çevrilir. Bu üç doğrusal değer 0,2126×R + 0,7152×G + 0,0722×B ağırlıklarıyla toplanarak göreli parlaklık (L) elde edilir.

Adımları tek tek açalım — her biri WCAG 2.x teknik dokümanında tanımlanan resmî formüldür:

  • Adım 1 — Normalize et: her kanal c (0-255 arası) için c' = c / 255. Sonuç 0 ile 1 arasında bir ondalık sayıdır.
  • Adım 2 — Gama düzeltmesi (linearize): c' ≤ 0,03928 ise c_lin = c' / 12,92; değilse c_lin = ((c' + 0,055) / 1,055) ^ 2,4. Bu adım, sRGB'nin insan gözü algısına göre "sıkıştırılmış" değerlerini gerçek fiziksel ışık miktarına çevirir.
  • Adım 3 — Ağırlıklı toplam: L = 0,2126 · R_lin + 0,7152 · G_lin + 0,0722 · B_lin. Bu ağırlıklar, insan gözünün her renk kanalına duyarlılığını yansıtır (ITU-R BT.709 standardından gelir).
  • Adım 4 — Oranı hesapla: iki rengin L'sini bulduktan sonra (L1+0,05)/(L2+0,05) böl; L1 daha büyük olan.
Neden doğrudan R+G+B ortalaması alınmıyor? Çünkü insan gözü parlaklığı doğrusal algılamaz ve renk kanallarına eşit duyarlı değildir. sRGB kodlaması da ekranların fiziksel özelliklerine göre "gama eğrisi" ile sıkıştırılmıştır. Gama düzeltmesi olmadan hesaplanan bir "parlaklık" değeri, gerçek görsel algıyı yanlış temsil eder ve WCAG'ın kabul ettiği ölçüt değildir.

Adım adım örnek: #7C3AED (mor) ile #FFFFFF (beyaz)

Somut bir örnekle ilerleyelim. Mor #7C3AED rengi RGB olarak (124, 58, 237)'dir. Beyaz ise (255, 255, 255)'tir. Aşağıdaki tabloda her adımın ara sonuçlarını görebilirsiniz:

#7C3AED için göreli parlaklık hesabı (ara adımlar)
Kanal0-255Normalize (c')Doğrusal (c_lin)
R1240,48630,1946
G580,22750,0403
B2370,92940,8437

Ağırlıklı toplam: L = 0,2126×0,1946 + 0,7152×0,0403 + 0,0722×0,8437 ≈ 0,1116.

Beyaz (#FFFFFF) için her kanal 255'tir, normalize değer 1, doğrusal değer de 1'dir; bu yüzden L_beyaz = 0,2126+0,7152+0,0722 = 1,0000 (beyazın luminance'ı her zaman tam 1'dir). Şimdi kontrast oranını hesaplayalım:

Sonuç Kontrast oranı = (1,0000 + 0,05) / (0,1116 + 0,05) = 1,05 / 0,1616 ≈ 6,50:1. Bu, #7C3AED'in beyaz metinle arka plan olarak kullanıldığında AA seviyesini (4,5:1) rahatça geçtiğini ama AAA'nın (7:1) az altında kaldığını gösterir. (Not: sitedeki gerçek buton örneğinde beyaz metin/mor arka plan sırası tersine çevrilerek kullanılır; oran aynı kalır.)

Bu hesabı her renk çifti için elle tekrarlamak zaman alıcıdır — bu yüzden kontrast hesaplayıcı bu dört adımı tarayıcınızda anında, sunucuya veri göndermeden çalıştırır ve size doğrudan AA/AAA sonucunu, canlı önizlemeyi ve geçmiyorsa uyumlu bir öneri sunar.

Birkaç referans değer daha

Sık kullanılan renklerin gerçek kontrast oranları
Ön planArka planOranAA normal (4,5:1)
#000000#FFFFFF21,00:1
#111528#F5F7FC16,86:1
#767676#FFFFFF4,54:1✓ (sınır)
#999999#FFFFFF2,85:1
#FFFF00#FFFFFF1,07:1

Kaynak: KontrastHesap hesaplama motoru, W3C WCAG 2.x relative luminance formülü uygulanarak üretilmiştir.

Neden yeşil kanalın ağırlığı en yüksek?

Kısa cevap Çünkü insan gözündeki koni hücrelerinin duyarlılık dağılımı yeşile en yüksek, maviye en düşüktür. Bu yüzden luminance formülünde yeşilin ağırlığı 0,7152 ile en yüksek, mavinin ağırlığı 0,0722 ile en düşüktür; kırmızı 0,2126 ile ortadadır. Bu ağırlıklar ITU-R BT.709 video standardından gelir.

Bunun pratik sonucu şudur: saf yeşil (#00FF00) beyaz üzerinde göze "parlak" görünse de, luminance hesabında yüksek bir L değeri üretir ve bu yüzden beyaza karşı düşük kontrast oranı verir (yaklaşık 1,37:1) — çünkü iki rengin luminance'ı birbirine çok yakındır. Buna karşın saf mavi (#0000FF), düşük ağırlığına rağmen beyaza karşı yüksek kontrast verir (yaklaşık 8,59:1) çünkü luminance'ı çok düşüktür. Bu, "parlak görünen renk = yüksek kontrast" varsayımının neden yanıltıcı olduğunu gösterir; matematiksel hesap şart.

Formülü ezberlemeyin, hesaplayın

İki rengi girin, WCAG kontrast oranını, AA/AAA sonucunu ve geçmiyorsa uyumlu ton önerisini saniyede görün.

Kontrast Hesaplayıcıyı Aç →

Sık sorulan sorular

WCAG kontrast oranı nedir?
İki rengin göreli parlaklığı arasındaki farkı 1:1 ile 21:1 arasında ifade eden ölçüttür. W3C'nin WCAG 2.x standardında tanımlanır ve metnin arka planından ayırt edilebilirliğini belirler.
Kontrast oranı formülü nedir?
Kontrast oranı = (L1+0,05)/(L2+0,05). L1 daha yüksek, L2 daha düşük göreli parlaklık (relative luminance) değeridir. 0,05 sabiti sıfıra bölme hatasını önler.
Göreli parlaklık (relative luminance) nasıl hesaplanır?
R,G,B kanalları 255'e bölünüp gama düzeltmesiyle doğrusal değere çevrilir, sonra 0,2126×R + 0,7152×G + 0,0722×B ağırlıklarıyla toplanır.
Gama düzeltmesi neden gerekli?
sRGB, insan gözünün doğrusal olmayan parlaklık algısına göre kodlanmıştır. Ham değerleri toplamak yanlış sonuç verir; gama düzeltmesi onları gerçek fiziksel ışık değerine (doğrusal) çevirir.
Kontrast oranı en fazla ve en az kaç olabilir?
En az 1:1 (aynı renk), en fazla 21:1 (saf siyah/beyaz). Aradaki her değer bu iki uç arasında bir yerdedir.

İlgili rehberler

Metodoloji & kaynaklar. Bu yazıdaki tüm formüller ve örnek hesaplar, W3C'nin resmî WCAG 2.x teknik dokümantasyonundaki relative luminance ve kontrast oranı tanımlarına birebir dayanır. Kanal ağırlıkları (0,2126 / 0,7152 / 0,0722) ITU-R BT.709 standardından gelir. Kaynaklar: W3C Web Content Accessibility Guidelines (WCAG) 2.2, Başarı Kriteri 1.4.3 (Kontrast — Asgari) ve 1.4.6 (Kontrast — Gelişmiş). Son güncelleme: 17 Temmuz 2026. Yazı bilgilendirme amaçlıdır.
Kaynak: W3C WCAG 2.2 (SC 1.4.3 / 1.4.6 / 1.4.11) · Güncelleme: 17 Temmuz 2026
Bilgilendirme ve eğitim amaçlıdır; renk körlüğü simülasyonu tıbbi teşhis yerine geçmez. · KontrastHesap