Renk Kontrast Hesaplama | WCAG AA/AAA Kontrast Oranı Testi

İki rengi gir, WCAG 2.x kontrast oranını anında gör. Normal metin, büyük metin ve UI bileşeni için AA/AAA geçti/kaldı, APCA (Lc) algısal kontrast, canlı önizleme, renk körlüğü simülasyonu, yarı saydam (alpha) renk desteği ve geçmiyorsa otomatik erişilebilir renk önerisi.

Ön plan (metin) rengi

hex (#7c3aed), rgb(124,58,237) veya hsl(262,83%,58%) yazabilirsin. Şeffaflık için rgba/hsla veya 8 haneli hex (ör. #7c3aed80).

Arka plan rengi

Herhangi bir formatta gir, otomatik algılanır.

⚙️ Gelişmiş ayarlar — öneri hedefi ve ayarlanacak renk

Öneri hedef seviyesi

Öneride ayarlanacak renk

4 rengi gir; araç aralarındaki tüm ikili kombinasyonların WCAG kontrast oranını bir matriste gösterir (marka paletini tek seferde denetle).

Renk 1

Renk 2

Renk 3

Renk 4

4.5:1AA normal metin

3:1AA büyük metin / UI

7:1AAA normal metin

21:1Maksimum (siyah/beyaz)

⚠️ Doğruluk notu: Kontrast oranı WCAG 2.x'in resmî relative luminance formülüyle tarayıcınızda anlık hesaplanır; sunucuya veri gönderilmez. Renk körlüğü önizlemesi, yaygın kullanılan yaklaşık dönüşüm matrisleriyle (protanopi/deuteranopi/tritanopi/akromatopsi) bir simülasyondur, tıbbi bir teşhis aracı değildir. "Büyük metin" WCAG tanımına göre 18pt+ normal veya 14pt+ kalın yazıdır.

Renk kontrastı nedir, WCAG nasıl ölçer?

Relative luminance formülü, AA/AAA eşikleri ve pratik erişilebilir renk seçimi ipuçlarının tam açıklaması.

Renk kontrastı, bir metnin (ön plan) arka planından ne kadar "ayırt edilebilir" olduğunun sayısal ölçüsüdür. Web Content Accessibility Guidelines (WCAG) 2.x, bu ölçüyü göz kusuru, yaşa bağlı görme kaybı veya kötü ışıklandırma gibi koşullarda bile metnin okunabilir kalması için standartlaştırır. Sonuç, 1:1 (renkler aynı, hiç kontrast yok) ile 21:1 (saf siyah/beyaz, maksimum kontrast) arasında tek bir sayıdır.

Renk kontrastı nasıl hesaplanır? (relative luminance formülü)

Kısa cevapÖnce her rengin R, G, B kanalları 0-1'e normalize edilip 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. Kontrast oranı = (L_açık + 0,05) / (L_koyu + 0,05) formülüyle bulunur.

Adım 1 — sRGB normalize: her kanal c için c' = c/255.
Adım 2 — gama düzeltme: c' ≤ 0,03928 ise c_lin = c'/12,92; değilse c_lin = ((c'+0,055)/1,055)^2,4.
Adım 3 — göreli parlaklık: L = 0,2126·R_lin + 0,7152·G_lin + 0,0722·B_lin.
Adım 4 — oran: daha yüksek L'yi payda ve paydaya 0,05 ekleyip böl: (L1+0,05)/(L2+0,05), L1>L2 olacak şekilde.

Yeşil kanalın ağırlığı (0,7152) en yüksektir çünkü insan gözü yeşile en duyarlıdır; mavi kanal (0,0722) en düşük ağırlığa sahiptir. Bu yüzden aynı "parlaklıktaki" saf kırmızı, yeşil ve mavi farklı kontrast oranları verir.

AA ve AAA erişilebilirlik farkı nedir?

Kısa cevapAA WCAG'nin asgari (yasal olarak da en sık aranan) seviyesidir: normal metin 4,5:1, büyük metin ve UI bileşenleri 3:1. AAA gelişmiş seviyedir: normal metin 7:1, büyük metin 4,5:1. AAA her tasarımda pratik olmayabilir ama kritik içerikte (ör. sağlık, resmi form) tercih edilir.

WCAG 2.x kontrast eşikleri özet tablosu
İçerik türü	AA (asgari)	AAA (gelişmiş)
Normal metin (14pt/18.66px altı, kalın değilse)	4,5:1	7:1
Büyük metin (18pt/24px+ veya 14pt/18.66px+ kalın)	3:1	4,5:1
UI bileşeni / grafik nesne sınırı	3:1	tanımsız
Dekoratif / devre dışı öğeler	gerekmez	gerekmez

4.5:1 kontrast oranı ne demek?

Kısa cevap4,5:1, WCAG AA'nın normal boyuttaki metin için istediği asgari orandır. Örneğin orta gri #767676 beyaz (#FFFFFF) üzerinde yaklaşık 4,54:1 ile bu sınırı zar zor geçer — WCAG dokümantasyonunda sıkça referans verilen klasik "sınır" örneğidir. Bu grinin bir tık daha açığı (ör. #999) genelde 4,5:1'in altına düşer ve AA'da başarısız olur.

Erişilebilir renk seçimi nasıl yapılır?

Kısa cevapMetin/arka plan çiftinde en az AA (4,5:1 normal / 3:1 büyük metin) hedefleyin; anlamı sadece renge bağlamayın (ör. hata mesajında kırmızının yanına ikon/kalın yazı ekleyin); marka renginizin tonunu (lightness) koyulaştırıp/açarak kontrastı yükseltin; ve renk körlüğü simülasyonuyla kırmızı-yeşil gibi karışabilecek çiftleri kontrol edin.

Pratik ipucu: bir markanın ana rengi (ör. mor #7c3aed) genelde beyaz üzerinde metin olarak yeterli kontrastı vermez ama arka plan olarak beyaz metinle iyi çalışabilir — bu yüzden aynı rengi hem metin hem arka plan olarak test etmek faydalıdır.

Web sitesi kontrast testi nasıl yapılır?

Kısa cevapSitenizdeki her metin/arka plan ve buton/ikon çiftini yukarıdaki araca girip AA/AAA sonucunu görün; birden fazla marka rengini aynı anda kıyaslamak için Palet Kontrolü sekmesini kullanın — 4 rengin tüm ikili kombinasyonlarını tek tabloda gösterir.

Örnek renk çiftleri ve kontrast oranları

Sık karşılaşılan renk çiftlerinin gerçek, hesaplanmış WCAG kontrast oranları — kendi renklerinizi karşılaştırmak için referans alın.

Örnek çiftler (ön plan / arka plan) ve hesaplanan kontrast oranı
Ön plan	Arka plan	Oran	AA normal	AAA normal
#000000	#FFFFFF	21,00:1	✓	✓
#111528	#F5F7FC	16,86:1	✓	✓
#1E293B	#F1F5F9	13,35:1	✓	✓
#FFFFFF	#7C3AED	5,70:1	✓	✗
#DB2777	#FFFFFF	4,60:1	✓	✗
#767676	#FFFFFF	4,54:1	✓ (sınır)	✗
#0D9488	#FFFFFF	3,74:1	Sadece büyük metin	✗
#FFFF00	#FFFFFF	1,07:1	✗	✗

İlgili araçlar

Renk Kodu DönüştürücüHEX/RGB/HSL/CMYK çevir Direnç Renk KoduRenk bandından ohm hesapla PPI/DPI HesaplamaEkran çözünürlük yoğunluğu

WCAG referans tabloları

Alıntılanabilir eşikler, "büyük metin" tanımı ve renk körlüğü tipleri.

WCAG 2.x kontrast oranı asgari eşikleri
Seviye	Normal metin	Büyük metin	UI bileşeni
AA	4,5:1	3:1	3:1
AAA	7:1	4,5:1	tanımsız

Kaynak: W3C WCAG 2.2, Success Criterion 1.4.3 (Contrast Minimum) ve 1.4.11 (Non-text Contrast).

"Büyük metin" (large text) tanımı
Yazı tipi	Asgari boyut
Normal ağırlık	18pt (≈24px)
Kalın (bold)	14pt (≈18,66px)

Bu boyutların altındaki her şey "normal metin" eşiğine (4,5:1 / 7:1) tabidir.

Yaygın renk körlüğü tipleri
Tip	Etkilenen renk algısı	Yaklaşık görülme
Protanopi	Kırmızı algısı zayıf/yok	Erkeklerin ~%1'i
Deuteranopi	Yeşil algısı zayıf/yok	Erkeklerin ~%1'i
Tritanopi	Mavi-sarı ayrımı zayıf	~%0,01 (nadir)
Akromatopsi	Renk algısı yok (gri tonlama)	Çok nadir

Kırmızı-yeşil renk körlüğü (protanopi+deuteranopi) toplamda erkeklerde ~%8, kadınlarda ~%0,5 görülür.

Kontrast & erişilebilirlik terimleri sözlüğü

Bu sayfada geçen temel kavramların kısa tanımları.

Kontrast oranıİki rengin göreli parlaklığı arasındaki fark; 1:1 (yok) ile 21:1 (maksimum) arasında bir sayı.

Relative luminance (L)Bir rengin gama-düzeltilmiş RGB kanallarının ağırlıklı toplamıyla bulunan göreli parlaklık değeri.

WCAGWeb Content Accessibility Guidelines — W3C'nin web erişilebilirlik standardı.

AA seviyesiWCAG'nin asgari (en sık aranan) uyumluluk seviyesi; normal metin 4,5:1.

AAA seviyesiWCAG'nin gelişmiş uyumluluk seviyesi; normal metin 7:1.

Büyük metin18pt+ normal veya 14pt+ kalın yazı; daha düşük kontrast eşiği (3:1/4,5:1) kabul edilir.

UI bileşeni kontrastıButon kenarlığı, ikon, form alanı gibi metin-dışı öğelerin arka planla asgari 3:1 kontrastı (WCAG 1.4.11).

sRGBEkranlarda standart renk uzayı; her kanal 0-255 arası, gama eğrisiyle kodlanır.

Gama düzeltmesisRGB'nin doğrusal olmayan kodlamasını doğrusal (linear) ışık değerine çeviren matematiksel adım.

Renk körlüğü (color vision deficiency)Belirli renkleri ayırt etmede zorluk; en yaygını kırmızı-yeşil (protanopi/deuteranopi).

Lightness (L, HSL)Bir rengin HSL modelindeki açıklık/koyuluk değeri; kontrastı artırmak için genelde bu kaydırılır.

Palet kontrol matrisiBirden fazla rengin tüm ikili kombinasyonlarının kontrast oranını gösteren tablo.

Derinlemesine rehberler

Renk kontrastı ve erişilebilirlik hakkında en çok merak edilen konular.

Marka renkleri kontrastı geçmiyorsa ne yapmalı?

Marka renginizin (ör. mor #7c3aed) beyaz üzerinde metin olarak yetersiz kaldığını fark ederseniz, önce hangi rengin ayarlanabilir olduğuna karar verin: genelde arka plan sabit tutulup metin rengi koyulaştırılır/açılır. "Gelişmiş ayarlar → Öneride ayarlanacak renk" seçeneğinden bunu değiştirebilirsiniz.

Araç, aynı ton (hue) ve doygunluğu (saturation) koruyarak yalnızca lightness (L) değerini kaydırır — böylece önerilen renk markanıza en yakın kalır. Hedef AA mi AAA mi olacağını da seçebilirsiniz.

Renk körlüğü olan kullanıcılar için tasarım nasıl test edilir?

Kırmızı-yeşil renk körlüğü (protanopi/deuteranopi) erkeklerin yaklaşık %8'inde görülür; bu kullanıcılar için özellikle "başarılı = yeşil, hatalı = kırmızı" gibi tasarımlar karışabilir. Bu sayfadaki renk körlüğü şeridi, girdiğiniz renk çiftinin dört farklı görme tipinde nasıl algılandığını gösterir.

Pratik kural: renk her zaman ikinci bir işaretle (ikon, alt çizgi, kalın yazı, metin etiketi) desteklenmeli; sadece renge güvenilmemelidir. Bu, WCAG'nin "Use of Color" (1.4.1) kriteridir.

Tüm marka paletimi tek seferde nasıl kontrol ederim?

Yukarıdaki Palet Kontrolü sekmesine 4 marka renginizi girin (ör. ana metin, arka plan, birincil marka rengi, ikincil vurgu rengi). Araç bu 4 rengin tüm ikili kombinasyonlarını (6 çift) bir matriste gösterir ve her hücrede kontrast oranıyla birlikte AA normal metin eşiğini geçip geçmediğini renklendirir.

Bu, tasarım sisteminizdeki hangi renk çiftlerinin metin olarak güvenle kullanılabileceğini, hangilerinin sadece dekoratif kalması gerektiğini hızlıca gösterir.

Bu hesaplayıcıyı sitene ekle

Aşağıdaki kodu kendi sitene yapıştırarak kontrast hesaplayıcısını ücretsiz gömebilirsin.

<iframe src="https://biraracta.com/renk-kontrast-hesaplama/?mod=tekli&fg=%23111528&bg=%23f5f7fc"
  width="100%" height="720" style="border:0;border-radius:14px"
  title="Renk Kontrast Hesaplama (WCAG AA/AAA)" loading="lazy"></iframe>

Sık sorulan sorular

WCAG kontrast oranı nedir?

WCAG kontrast oranı, iki rengin göreli parlaklığı (relative luminance) arasındaki farkı 1:1 (aynı renk) ile 21:1 (saf siyah/beyaz) arasında bir sayıyla ifade eder. Görme zorluğu yaşayan kullanıcıların da içeriği okuyabilmesi için W3C'nin Web Content Accessibility Guidelines standardında tanımlanır.

Renk kontrastı nasıl hesaplanır?

Her rengin sRGB kanalları gama düzeltmesiyle doğrusal değere çevrilir; bu değerler 0,2126×R + 0,7152×G + 0,0722×B ağırlıklarıyla toplanarak göreli parlaklık (L) bulunur. Kontrast oranı = (L_açık + 0,05) / (L_koyu + 0,05) formülüyle hesaplanır.

AA ve AAA erişilebilirlik farkı nedir?

AA asgari seviyedir: normal metin 4,5:1, büyük metin/UI 3:1. AAA gelişmiş seviyedir: normal metin 7:1, büyük metin 4,5:1. Çoğu site AA'yı hedefler; AAA daha zorlayıcıdır ve kritik içerikte tercih edilir.

4.5:1 kontrast oranı ne demek?

4,5:1, WCAG AA'nın normal boyuttaki metin için istediği asgari orandır. Orta gri #767676 beyaz üzerinde yaklaşık 4,54:1 ile bu sınırı zar zor geçer — sıkça referans verilen klasik "sınır" örneğidir.

Erişilebilir renk seçimi nasıl yapılır?

Metin/arka plan çiftinde en az AA (4,5:1 normal / 3:1 büyük metin) hedefleyin, anlamı sadece renge bağlamayın, marka renginizin lightness değerini kaydırarak kontrastı yükseltin ve renk körlüğü simülasyonuyla riskli çiftleri kontrol edin.

Web sitesi kontrast testi nasıl yapılır?

Sitenizdeki her metin/arka plan ve buton/ikon çiftini bu araca hex, rgb() veya hsl() olarak girip AA/AAA sonucunu görebilirsiniz. Birden fazla marka rengini aynı anda kıyaslamak için Palet Kontrolü sekmesini kullanın.

Büyük metin (large text) nedir, eşiği neden farklı?

WCAG'de büyük metin, 18pt (≈24px) normal veya 14pt (≈18,66px) kalın yazıdır. Büyük harfler daha kolay okunduğu için WCAG bu metinlerde daha düşük bir eşik (AA 3:1, AAA 4,5:1) kabul eder.

Renk körlüğü olan kullanıcılar için nelere dikkat etmeliyim?

Kırmızı-yeşil renk körlüğü erkeklerde ~%8, kadınlarda ~%0,5 görülür. Sadece renkle anlam taşımaktan kaçının, ikon/desen/etiket ekleyin. Bu araçtaki renk körlüğü şeridi, girdiğiniz çiftin dört görme tipinde nasıl algılandığını gösterir.

APCA (Lc) kontrast nedir, WCAG 2 oranından farkı ne?

APCA (Accessible Perceptual Contrast Algorithm), WCAG 3 taslağı için geliştirilen algısal kontrast yöntemidir ve sonucu Lc değeriyle (yaklaşık 0-108) verir. WCAG 2'nin oran temelli formülünden farklı olarak APCA metnin açık mı koyu mu zeminde olduğunu (polarite), boyutu ve kalınlığı hesaba katar. Kılavuz olarak Lc 75 gövde metni, Lc 60 daha iri içerik metni, Lc 45 büyük başlık için asgari kabul edilir. WCAG 2 "denetimden geçer mi", APCA "gerçekten okunur mu" sorusuna yanıt verir — bu araç ikisini birlikte gösterir.

Yarı saydam (alpha) metin kontrastı nasıl hesaplanır?

Yarı saydam metnin gerçek kontrastı, rengin arka planla birleştirilmesiyle (alpha compositing) bulunur: efektif renk = ön_plan × alpha + arka_plan × (1 − alpha). Bu araç rgba(), hsla() ve 8 haneli hex (ör. #7c3aed80) girişindeki alpha'yı okuyup metni arka plan üzerine oturtur ve oluşan gerçek rengin WCAG + APCA kontrastını hesaplar. Böylece cam efekti, overlay ve yarı saydam UI'ların okunabilirliği doğru ölçülür.

Metodoloji & kaynaklar

KontrastHesap, bağımsız ve ücretsiz bir Türkçe WCAG kontrast hesaplama aracıdır. Hesaplama motoru, W3C'nin resmî relative luminance formülünü doğrudan tarayıcınızda uygular: sRGB → gama düzeltmesi → doğrusal parlaklık → kontrast oranı. Hiçbir veri sunucuya gönderilmez; tüm hesap client-side çalışır. Renk körlüğü simülasyonu, yaygın kullanılan yaklaşık dönüşüm matrisleriyle yapılır ve eğitim amaçlıdır.

Kaynaklar: W3C Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 1.4.3 (Contrast Minimum), 1.4.6 (Contrast Enhanced) ve 1.4.11 (Non-text Contrast). Son güncelleme: 17 Temmuz 2026.

Renk kontrast hesaplama (WCAG AA/AAA)

Renk kontrastı nedir, WCAG nasıl ölçer?

Renk kontrastı nasıl hesaplanır? (relative luminance formülü)

AA ve AAA erişilebilirlik farkı nedir?

4.5:1 kontrast oranı ne demek?

Erişilebilir renk seçimi nasıl yapılır?

Web sitesi kontrast testi nasıl yapılır?

Örnek renk çiftleri ve kontrast oranları

İlgili araçlar

WCAG referans tabloları

Kontrast & erişilebilirlik terimleri sözlüğü

Derinlemesine rehberler

Bu hesaplayıcıyı sitene ekle

Sık sorulan sorular

Metodoloji & kaynaklar

🔗 İlgili Araçlar

🔗 Bu aracı sitene ekle