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?
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?
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?
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.
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:
| Kanal | 0-255 | Normalize (c') | Doğrusal (c_lin) |
|---|---|---|---|
| R | 124 | 0,4863 | 0,1946 |
| G | 58 | 0,2275 | 0,0403 |
| B | 237 | 0,9294 | 0,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:
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
| Ön plan | Arka plan | Oran | AA normal (4,5:1) |
|---|---|---|---|
| #000000 | #FFFFFF | 21,00:1 | ✓ |
| #111528 | #F5F7FC | 16,86:1 | ✓ |
| #767676 | #FFFFFF | 4,54:1 | ✓ (sınır) |
| #999999 | #FFFFFF | 2,85:1 | ✗ |
| #FFFF00 | #FFFFFF | 1,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?
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ç →