Renk Kontrast Denetleyicisi

Ön plan ve arka plan renkleri arasındaki WCAG AA ve AAA kontrast oranını kontrol edin

Örnek dene

Ön plan (metin) rengi

Arka plan rengi

Büyük Metin Örneği (18px kalın)

Normal metin örneği — gövde metniniz seçtiğiniz arka plan rengi üzerinde bu şekilde görünecektir.

Kontrast oranı

14.63:1

WCAG uyumluluğu

Geçti

Normal AA

Geçti

Normal AAA

Geçti

Büyük AA

Geçti

Büyük AAA

WCAG AANormal metin: 4.5:1, Büyük metin (18px+ veya 14px kalın): 3:1

WCAG AAANormal metin: 7:1, Büyük metin (18px+ veya 14px kalın): 4.5:1

Renk Kontrast Denetimi Nedir?

Renk kontrast denetimi, bir ön plan rengi (genellikle metin) ile arka plan rengi arasındaki parlaklık farkını ölçer ve sonucu bir oran olarak ifade eder. 1:1 oranı renklerin özdeş olduğunu; 21:1 ise siyah üzerine beyaz veya tersini temsil eden en yüksek değeri gösterir. W3C tarafından yayımlanan Web İçeriği Erişilebilirlik Yönergeleri (WCAG), düşük görüşe sahip ya da renk körlüğü bulunan kişilerin metni okuyabilmesi için karşılanması gereken asgari kontrast oranlarını tanımlar.

Kontrast oranı formülü WCAG 2.x'ten alınmış olup göreli parlaklığa dayanır. Göreli parlaklık, bir rengin insan gözüne ne kadar parlak göründüğünü ifade eden bir ölçüttür. Her sRGB kanalının gamasını kaldırarak doğrusallaştırılır ve kanallar ITU-R BT.709 katsayılarıyla ağırlıklandırılır: kırmızı için 0,2126, yeşil için 0,7152, mavi için 0,0722. Yeşil en yüksek katkıyı sağlar çünkü insan gözü yeşil ışığa en duyarlıdır. Oran şu şekilde hesaplanır: (L1 + 0,05) / (L2 + 0,05); burada L1 daha açık rengin parlaklığıdır.

WCAG iki uyumluluk düzeyi tanımlar. AA düzeyi, normal boyutlu metin için en az 4,5:1, büyük metin için (18 piksel ve üzeri ya da 14 piksel kalın) 3:1 kontrast oranı gerektirir. AAA düzeyi bu eşiği sırasıyla 7:1 ve 4,5:1'e yükseltir. WCAG 2.1 ayrıca kenarlıklar, simgeler ve odak göstergeleri gibi metin dışı arayüz bileşenleri için 3:1 oranı zorunlu kılan 1.4.11 Başarı Ölçütünü de tanıtmıştır.

Bu Kontrast Denetleyicisini Neden Kullanmalısınız?

Kontrasta göz kararı bakmak güvenilir değildir. Kalibreli ekranınızda birbirinden ayrı görünen renkler, düşük kaliteli bir dizüstü bilgisayarda, doğrudan güneş ışığında ya da deuteranopi gibi renk görüş bozukluğu olan biri için iç içe geçebilir. Sayısal bir oran tahmin unsurunu ortadan kaldırır ve size WCAG standardına göre geçti/başarısız sonucu verir.

Anında Oran Hesaplama
İki rengi seçin ya da yazın; kontrast oranı gerçek zamanlı olarak güncellensin. Gönderilecek form yok, sayfa yenilemesi yok.
🔒
Gizlilik Odaklı İşleme
Parlaklık hesaplaması tamamen tarayıcınızda çalışır. Hiçbir renk değeri bilgisayarınızdan çıkmaz; çerez ya da analitik aracılığıyla tercihleriniz izlenmez.
🎯
AA ve AAA Sonuçları
Sonuçlar, hem normal hem büyük metin boyutları için WCAG AA ve AAA geçti/başarısız durumunu gösterir; böylece hangi eşikleri karşıladığınızı tam olarak bilirsiniz.
📋
Hesap Gerekmez
Sayfayı açın ve test etmeye başlayın. Kayıt yok, hız sınırı yok. Sayfa yüklendikten sonra araç çevrimdışı da çalışır.

Kontrast Denetleyicisi Kullanım Senaryoları

Ön Yüz Geliştirme
Bir arayüz değişikliğini göndermeden önce, metin rengi ve arka planı CSS'inizden denetleyiciye yapıştırın; çiftin WCAG AA'yı karşıladığını doğrulayın. Bu, kontrast hatalarını kod incelemesine veya otomatik denetimlere ulaşmadan önce yakalar.
Tasarım Teslimi
Tasarımcılar, mühendislere spesifikasyonları teslim etmeden önce Figma dosyasındaki her renk çiftinin gerekli WCAG düzeyini geçtiğini doğrulayabilir. Kontrastı tasarım aşamasında düzeltmek, uygulamadan sonra düzeltmekten çok daha az maliyetlidir.
Erişilebilirlik Denetimi
WCAG denetimi yürüten kalite güvence mühendisleri, Lighthouse veya axe gibi otomatik araçlar tarafından işaretlenen belirli renk kombinasyonlarını nokta kontrol edebilir. Denetleyici, tam oranı ve hangi düzeylerin geçip başarısız olduğunu doğrular.
Tasarım Sistemi Renk Değerleri
Bir tasarım sistemi için renk değerleri tanımlarken, değer paletinin en azından AA'yı karşıladığından emin olmak için her ön plan/arka plan çiftini test edin. Oranları değerlerin yanına belgelendirin; böylece aşağı akış ekipleri tercihlere güvenebilir.
E-posta Şablonu Testi
E-posta istemcileri opaklık ve harmanlama modları gibi CSS özelliklerini kaldırır; bu nedenle gerçekte oluşturulan renkler kaynaktan farklı olabilir. Okunabilirliği doğrulamak için gelen kutusuna ulaşan son ön plan ve arka plan değerlerini test edin.
Erişilebilirlik Standartlarını Öğrenmek
WCAG'ı öğrenen öğrenciler farklı renk çiftleriyle deneme yapabilir ve oranın nasıl değiştiğini anında görebilir. Bir kanalı aynı anda ayarlamak, parlaklığın algılanan kontrastle nasıl ilişkili olduğuna dair pratik bir anlayış oluşturur.

WCAG Kontrast Oranı Gereksinimleri

Aşağıdaki tablo, WCAG 2.1'in farklı içerik türleri ve uyumluluk düzeyleri için gerektirdiği asgari kontrast oranlarını özetlemektedir. Büyük metin; normal ağırlıkta 18 piksel (24 CSS pikseli) ve üzeri ya da kalın ağırlıkta 14 piksel (18,66 CSS pikseli) ve üzeri olarak tanımlanır.

DüzeyAsgari oranGeçerli olduğuNot
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Parlaklık, AA ve AAA Açıklaması

Kontrast oranı hesaplaması üç aşamadan oluşur: her renk için parlaklığı hesapla, oranı türet ve WCAG eşiğiyle karşılaştır.

Göreli Parlaklık
Bir rengin ne kadar parlak göründüğünü temsil eden 0 (siyah) ile 1 (beyaz) arasında tek bir sayıdır. Doğrusal olmayan sRGB gama eğrisini ve insan gözünün kırmızı, yeşil ve maviye karşı eşit olmayan duyarlılığını dikkate alır. Saf yeşil (#00FF00) 0,7152 parlaklık değerine sahipken saf mavi (#0000FF) yalnızca 0,0722'ye sahiptir.
WCAG AA
AB'nin Avrupa Erişilebilirlik Yasası (EAA) ve Amerika Birleşik Devletleri'ndeki Section 508 dahil olmak üzere çoğu yasal standardın gerektirdiği temel erişilebilirlik düzeyi. AA, normal metin için 4,5:1 ve büyük metin için 3:1 oranı gerektirir. Çoğu tasarım sistemi, tüm metin öğeleri için AA'yı asgari hedef olarak benimser.
WCAG AAA
Önemli görme bozukluğu olan kullanıcılar dahil mümkün olan en geniş kitle tarafından okunabilmesi gereken içerikler için tasarlanmış gelişmiş düzey. AAA, normal metin için 7:1 ve büyük metin için 4,5:1 gerektirir. Tüm sayfalarda AAA'yı karşılayan tam site sayısı azdır; ancak yasal bildirimler ve tıbbi bilgiler gibi kritik içerikler sıklıkla bu düzeyi hedefler.

Kod Örnekleri

WCAG kontrast oranlarını programatik olarak hesaplayın. Her örnek, WCAG 2.x'ten göreli parlaklık formülünü ve kontrast oranı hesaplamasını uygular. Karşılaştırma için siyah-beyaz ve indigo-beyaz çiftleri test edilmiştir.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Sıkça Sorulan Sorular

Metin için iyi bir kontrast oranı nedir?
Web'deki gövde metni için en az 4,5:1 (WCAG AA) hedefleyin. 7:1'in üzerindeki oranlar WCAG AAA'yı karşılar ve uzun süreli okuma için daha rahattır. Siyah üzerine beyaz, 21:1 maksimum oranı sağlar; ancak beyaz üzerine çok koyu gri (#1e293b) yaklaşık 12,6:1 verir ve bu da AAA'nın oldukça üzerindedir.
WCAG'da büyük metin olarak neler sayılır?
WCAG, normal ağırlıkta 18 piksel (24 CSS pikseli) veya kalın ağırlıkta 14 piksel (18,66 CSS pikseli) ve üzerini büyük metin olarak tanımlar. Büyük metin daha düşük bir kontrast eşiğine sahiptir çünkü daha büyük harf formları algılaması daha kolaydır. CSS'te 1px, 0,75pt'ye eşittir; dolayısıyla 18pt, 24px'e karşılık gelir.
WCAG AA yasal olarak zorunlu mu?
Pek çok ülkede evet. Haziran 2025'te yürürlüğe girecek Avrupa Erişilebilirlik Yasası (EAA), WCAG 2.1 AA'ya atıfta bulunur. ABD Rehabilitasyon Yasası'nın 508. Maddesi, federal kurumların WCAG 2.0 AA'yı karşılamasını zorunlu kılar. Engelli Amerikalılar Yasası (ADA), ABD mahkemelerince erişilebilir web sitelerini kapsayacak şekilde yorumlanmış olup standart olarak WCAG AA esas alınmıştır. Kanada, Avustralya ve Birleşik Krallık'ta da benzer yükümlülükler mevcuttur.
Göreli parlaklık nasıl hesaplanır?
Her sRGB kanal değeri (0-255) 255'e bölünür, ardından doğrusallaştırılır: 0,04045 ve altındaki değerler 12,92'ye bölünür; üzerindeki değerler ((c + 0,055) / 1,055) ^ 2,4 dönüşümüne tabi tutulur. Doğrusallaştırılmış üç kanal, ITU-R BT.709 katsayılarıyla (0,2126 R, 0,7152 G, 0,0722 B) ağırlıklandırılarak toplanır. Sonuç, 0 ile 1 arasında bir sayıdır.
WCAG kontrast formülünde neden 0,05 fark değeri kullanılır?
0,05 fark değeri, renklerden birinin saf siyah (parlaklık = 0) olduğu durumlarda sıfıra bölmeyi önler. Ayrıca en karanlık piksellerin bile algılanan parlaklığını biraz artıran ortam ışığını ve ekran yansımalarını hesaba katar. Bu fark değeri olmadan, siyahın herhangi bir koyu renkle kombinasyonu sonsuz veya yanıltıcı şekilde yüksek bir oran üretirdi.
İki renk AA'yı geçip yine de okunması zor olabilir mi?
Evet. WCAG kontrast oranları, ton farkını değil parlaklık farkını ölçer. Doygun kırmızı üzerine doygun yeşil, teknik olarak oran eşiğini geçebilir; ancak özellikle kırmızı-yeşil renk görüş bozukluğu olanlar için okumayı rahatsız edici hale getirebilir. Hem parlaklık hem ton açısından farklılaşan renk kombinasyonları genellikle daha rahat sonuçlar üretir.
WCAG 2.x kontrast ile APCA arasındaki fark nedir?
WCAG 2.x, ön planı ve arka planı simetrik biçimde ele alan basit bir parlaklık oranı kullanır. WCAG 3.0 için önerilen APCA (Gelişmiş Algısal Kontrast Algoritması), kutuplaşmayı dikkate alan algısal bir aydınlık modeli kullanır: açık bir arka plan üzerindeki koyu metin ile koyu bir arka plan üzerindeki açık metin, aynı parlaklık farkında farklı algısal kontrast üretir. APCA hâlâ bir çalışma taslağı aşamasında olup herhangi bir düzenlemede WCAG 2.x yönteminin yerini almamıştır.