Erişilebilir metin için hangi kontrast oranı gerekir?

WCAG 2.1'e göre normal boyutlu metin için AA en az 4,5:1, AAA en az 7:1 ister. Büyük metin (yaklaşık 18pt veya 14pt kalın ve üzeri) için AA 3:1, AAA 4,5:1'e düşer. Arayüz bileşenleri ve grafik nesneleri için genellikle 3:1 yeterlidir.

Büyük metin nedir ve neden eşiği daha düşük?

WCAG'de büyük metin yaklaşık 18pt (24px) normal veya 14pt (yaklaşık 18,66px) kalın ve üzeridir. Kalın ve iri harfler daha fazla piksel kapladığı için düşük kontrastta bile okunabilir; bu yüzden AA eşiği 4,5:1'den 3:1'e iner.

Beyaz üstüne sarı neden düşük kontrast verir?

Relative luminance formülü insan gözünün yeşile en duyarlı (0,7152), maviye en az duyarlı (0,0722) olmasını hesaba katar. Sarı (kırmızı+yeşil) yüksek parlaklığa sahiptir; beyazla arasındaki parlaklık farkı küçük kalır ve kontrast oranı düşer, çoğu zaman 1,1:1 civarında.

Kontrast oranı en fazla kaç olabilir?

En yüksek kontrast siyah (#000000) ile beyaz (#FFFFFF) arasında 21:1'dir. En düşük ise aynı iki renk arasında 1:1'dir. Tüm renk çiftleri bu aralıkta bir değer alır.

Erişilebilirlik Yayın: 13 Temmuz 2026 8 dk okuma

WCAG Renk Kontrastı ve Erişilebilirlik: oran nasıl hesaplanır?

Metniniz açık gri arka planda "şık" görünebilir ama görme güçlüğü olan bir kullanıcı onu hiç okuyamayabilir. Kontrast oranı, iki rengin ne kadar ayırt edilebilir olduğunu tek bir sayıyla ölçer. Bu rehberde WCAG 2.1 kontrast oranının nasıl hesaplandığını, relative luminance formülünü ve AA/AAA eşiklerini örnek renk çiftleriyle açıklıyoruz.

İçindekiler

Kontrast oranı nasıl hesaplanır? (kısa cevap)
Kontrast oranı nedir? 1:1–21:1
Relative luminance adım adım
AA ve AAA eşikleri
Örnek renk çiftleri tablosu
Pratik ipuçları ve tuzaklar
Sık sorulan sorular

WCAG kontrast oranı nasıl hesaplanır?

Kısa cevap Önce her rengin relative luminance (bağıl parlaklık) değeri bulunur; kanallar doğrusallaştırılıp L = 0,2126·R + 0,7152·G + 0,0722·B ile toplanır. Kontrast oranı ise (L1 + 0,05) / (L2 + 0,05) ile hesaplanır — L1 açık, L2 koyu rengin parlaklığıdır. Sonuç 1:1 ile 21:1 arasında çıkar.

Kontrast oranı gözle tahmin edilemez; matematiksel bir formüle dayanır. İyi haber şu ki bu formülü elle uygulamak zorunda değilsiniz — iki rengi kontrast denetleyicisine girip oranı ve AA/AAA sonuçlarını canlı önizlemeyle görebilirsiniz. Yine de mantığını bilmek, neden bazı "güzel" renk çiftlerinin başarısız olduğunu anlamanızı sağlar.

Kontrast oranı nedir?

Kontrast oranı, iki rengin bağıl parlaklıkları arasındaki farkı ifade eder ve 1:1 (aynı renk, hiç kontrast yok) ile 21:1 (saf siyah üstüne saf beyaz, mümkün olan en yüksek kontrast) arasında bir değer alır. Oran ne kadar yüksekse metin o kadar okunaklıdır.

Bağıl parlaklık (relative luminance) nedir? Bir rengin, insan gözünün algıladığı parlaklığa göre 0 (en koyu siyah) ile 1 (en parlak beyaz) arasında normalize edilmiş değeridir. Renk tonundan bağımsızdır: örneğin saf mavi düşük, saf yeşil yüksek parlaklığa sahiptir çünkü göz yeşile çok daha duyarlıdır.

Relative luminance adım adım nasıl bulunur?

Her renk için üç adım vardır. #7C3AED = rgb(124, 58, 237) örneğiyle gidelim:

Normalize et: Her kanalı 255'e böl. 124/255 = 0,486; 58/255 = 0,227; 237/255 = 0,929.
Doğrusallaştır: Her kanala şu kuralı uygula: c ≤ 0,03928 ise c/12,92, değilse ((c+0,055)/1,055)^2,4. Bu, sRGB'nin "gamma" eğrisini düzleştirir.
Ağırlıklı topla: L = 0,2126·R + 0,7152·G + 0,0722·B. Kırmızı-yeşil-mavi katsayıları gözün duyarlılığını yansıtır.

İki renk için de L bulduktan sonra, açık olanı L1, koyu olanı L2 kabul edip (L1 + 0,05) / (L2 + 0,05) uygularsınız. Formüldeki 0,05, çok koyu renklerde bölmenin sonsuza gitmesini engelleyen bir "ortam ışığı" düzeltmesidir.

Neden yeşilin ağırlığı en yüksek? 0,7152 katsayısı, insan gözünün yeşil dalga boylarına en duyarlı olmasından gelir. Bu yüzden yeşilimsi bir renk, aynı sayısal değerdeki maviden çok daha "parlak" algılanır ve kontrast hesabında ağırlığı büyüktür. Mavinin katsayısı yalnızca 0,0722'dir.

Erişilebilirlik için hangi kontrast oranı gerekir?

Kısa cevap Normal metin: AA ≥ 4,5:1, AAA ≥ 7:1. Büyük metin (≈18pt / 24px veya 14pt kalın+): AA ≥ 3:1, AAA ≥ 4,5:1. Arayüz bileşenleri (buton kenarı, ikon, form sınırı) ve grafik nesneleri için genelde 3:1 yeterlidir.

WCAG 2.1 kontrast eşikleri
İçerik türü	AA (minimum)	AAA (gelişmiş)
Normal metin	4,5:1	7:1
Büyük metin (≈18pt / 14pt kalın)	3:1	4,5:1
Arayüz bileşeni / grafik	3:1	—
Dekoratif / devre dışı öğe	Muaf	Muaf

Kaynak: WCAG 2.1 kontrast oranı (W3C) — başarı ölçütü 1.4.3 (AA) ve 1.4.6 (AAA).

Örnek renk çiftleri

Aşağıdaki tablo, sık kullanılan renk çiftlerinin beyaz veya siyah zeminle kontrast oranını ve normal metinde AA'dan geçip geçmediğini gösterir:

Örnek renk çiftleri ve kontrast oranı (normal metin, AA=4,5:1)
Ön plan	Arka plan	Oran	Normal AA
Siyah	Beyaz	21:1	Geçti ✓
Mor #7C3AED	Beyaz	5,7:1	Geçti ✓
Teal #0D9488	Beyaz	3,4:1	Büyükte ✓
Açık mor #A855F7	Beyaz	3,3:1	Kaldı ✕
Sarı #FFFF00	Beyaz	1,07:1	Kaldı ✕
Sarı #FFFF00	Siyah	19,6:1	Geçti ✓

Değerler WCAG 2.1 relative luminance formülüyle hesaplanmıştır; en yakın iki basamağa yuvarlanmıştır.

Tablodan çıkan ders açık: renk seçimi sezgiye bırakılamaz. Sarı üstüne beyaz gözle "canlı" görünür ama kontrastı 1,07:1'dir — pratikte okunamaz. Aynı sarı siyah zeminde 19,6:1 verir. Ayrıca marka renginizin açık tonu (örn. #A855F7) beyaz üstünde normal metin için yetmezken büyük başlıkta kullanılabilir.

İki rengi gir, oranı anında gör

Ön plan ve arka plan rengini seç; kontrast oranını, AA/AAA rozetlerini ve canlı metin önizlemesini saniyede çıkar.

Kontrast Denetleyiciyi Aç →

Pratik ipuçları ve sık yapılan hatalar

Placeholder ve yardım metni genelde çok açık gri olur ve AA'dan kalır; en az 4,5:1 tutun.
Renk tek başına bilgi taşımasın: "kırmızı = hata" derken ikon veya metin de ekleyin; renk körü kullanıcılar oranı geçse bile ayrımı göremeyebilir.
Hover/focus durumlarını da denetleyin; yalnızca varsayılan durum yeterli değildir.
Büyük başlık = daha düşük eşik. 24px+ veya 18,66px kalın metin için 3:1 yeterli; bu, marka renklerinizi başlıkta kullanmanıza alan açar.
Yarı saydam renkler (alpha) arka planla karışır; kontrastı, gerçekte oluşan bileşik renk üzerinden ölçün.

Renklerinizin HEX/RGB/HSL karşılıklarını ve açık-koyu tonlarını üretmek için HEX-RGB dönüşüm rehberine ve tonlar için HSL-HSV farkı rehberine göz atabilirsiniz.

Sık sorulan sorular

WCAG kontrast oranı nasıl hesaplanır?

Her rengin relative luminance değeri bulunur (L = 0,2126·R + 0,7152·G + 0,0722·B), sonra (L1 + 0,05) / (L2 + 0,05) uygulanır. L1 açık, L2 koyu rengin parlaklığıdır; sonuç 1:1 ile 21:1 arasındadır.

Normal metin için minimum kontrast kaç?

WCAG 2.1 AA için en az 4,5:1, AAA için 7:1. Büyük metinde (≈18pt veya 14pt kalın) AA 3:1'e, AAA 4,5:1'e iner.

Büyük metin neden daha düşük kontrastla geçebiliyor?

İri ve kalın harfler daha fazla piksel kapladığı için düşük kontrastta bile okunaklıdır. Bu yüzden büyük metin eşiği 4,5:1'den 3:1'e düşer.

Beyaz üstüne sarı neden okunmuyor?

Sarının bağıl parlaklığı yüksektir; beyazla arasındaki fark küçük kalır ve oran ~1,07:1 çıkar. Aynı sarı siyah zeminde ~19,6:1 verir.

En yüksek ve en düşük kontrast kaç?

En yüksek 21:1 (siyah-beyaz), en düşük 1:1 (aynı iki renk). Tüm çiftler bu aralıkta bir değer alır.

İlgili rehberler

Metodoloji & kaynaklar. Bu yazıdaki tüm oranlar WCAG 2.1 relative luminance formülüyle üretilmiştir: sRGB kanalları 0–1'e normalize edilip doğrusallaştırılır, L = 0,2126·R + 0,7152·G + 0,0722·B ile parlaklık, (L1+0,05)/(L2+0,05) ile oran hesaplanır. Hesaplamalar tamamen tarayıcıda, hiçbir sunucuya veri gitmeden çalışır. Kaynaklar: sRGB renk uzayı dönüşümleri · WCAG 2.1 kontrast oranı (W3C). Son güncelleme: 13 Temmuz 2026. Yazı bilgilendirme amaçlıdır; resmî erişilebilirlik uyumu için WCAG belgeleri esas alınmalıdır.