WCAG Kontrast Oranı Kontrolü Ön plan ve arka plan renkleri arasındaki WCAG kontrast oranlarını kontrol edin.

🎨

Contrast Oranı Kontrolü

Ön plan ve arka plan renkleri arasındaki WCAG kontrast oranlarını kontrol edin.

Renkleri Ayarla

Ön plan (metin) ve arka plan renklerini girin.

Uygunluğu Kontrol Et

Kontrast oranını ve WCAG AA/AAA geçme/kalmama sonuçlarını görün.

Ayarlama & Değiştirme

Renkleri, hedeflenen uygunluk seviyesine ulaşana kadar değiştirin.

Loading tool...

What Is Contrast Oranı Kontrolü?

Bir WCAG kontrast oranı denetleyicisi, ön plan (metin) ve arka plan renkleri arasındaki kontrast oranını Web İçeriği Erişilebilirlik Kılavuzu (WCAG) 2.1'e göre hesaplayarak renk kombinasyonlarının erişilebilirliğini değerlendirir. Araç, luminyanstan bazlı kontrast oranını hesaplar ve dört WCAG eşik değerini test eder: normal metin için AA (≥4,5:1), büyük metin için AA (≥3,0:1), normal metin için AAA (≥7,0:1) ve büyük metin için AAA (≥4,5:1). Bu eşik değerlerini geçmek, metnin çeşitli düzeylerde görsel engelli kullanıcılar, včetně düşük görme yetisi ve renk körlüğü olan kullanıcılar tarafından okunabilir olmasını sağlar. Araç, renk kombinasyonunuzun farklı boyutlarda nasıl göründüğünü gösteren canlı bir metin önizlemesi sunar ve her WCAG düzeyi için net geçme/başarısızlık göstergeleri sağlar. Bu, erişilebilir ve kapsayıcı dijital deneyimler yaratmaya kendini adamış herhangi bir web geliştiricisi veya tasarımcı için temel bir araçtır.

Why Use Contrast Oranı Kontrolü?

Anında WCAG AA ve AAA uygunluğu kontrolü
Çoklu boyutta görsel metin önizlemesi gerçek dünya okunabilirliğini gösterir
Açık geçme/kalmama göstergeleri ile gerekli oran eşik değerleri
Hızlı bir şekilde ters renk kombinasyonlarını test etmek için değiştir düğmesi
Dört uygunluk seviyesini test eder: AA/AAA normal ve büyük metin için

Common Use Cases

Web Erişilebilirliği

Metin/arka plan kombinasyonlarının WCAG 2.1 gereksinimlerini ADA ve AODA uygunluğu için karşıladığını doğrulayın.

Tasarım Sistemi Denetimi

Bir tasarım sistemindeki tüm renk kombinasyonlarını erişilebilirlik uygunluğu için test edin.

Marka Renk Değerlendirmesi

Marka renklerinin, erişilebilirlik standartlarına uyan metin/arka plan kombinasyonları için kullanılabileceğini kontrol edin.

Hukuki Uygunluk

Dijital içeriğin, WCAG kriterlerine atıfta bulunan erişilebilirlik yasalarına uygunluğunu sağlayın.

Technical Guide

Kontrast oranı, WCAG 2.1 göreli luminyans formülü kullanılarak hesaplanır. İlk olarak, her renk kanalı doğrusallaştırılır: eğer sRGB ≤ 0,03928 ise doğrusal = sRGB/12,92;否则 doğrusal = ((sRGB + 0,055)/1,055)^2,4. Göreli luminyans L = 0,2126×K + 0,7152×Y + 0,0722×M. Kontrast oranı = (L_açık + 0,05) / (L_koyu + 0,05). Oran, 1:1 (hiçbir kontrast, aynı renk) ile 21:1 (siyah üzerinde beyaz) arasında değişir. WCAG 2.1 dört eşik değerini tanımlar: Seviye AA, normal metin için ≥4,5:1 (<18pt veya <14pt kalın) ve büyük metin için ≥3:1 (≥18pt veya ≥14pt kalın) gerektirir. Seviye AAA, normal metin için ≥7:1 ve büyük metin için ≥4,5:1 gerektirir. Bu eşik değerleri, görsel keskinlik üzerine yapılan araştırmalara dayanır ve 20/40 görme yetisi veya orta düzeyde düşük görme yetisine sahip kullanıcılar için okunabilirliği sağlar.

Tips & Best Practices

1
Vücut metni için en az 4.5:1 kontrast oranı hedefleyin - bu, WCAG AA için minimumdur
2
Büyük metin (18px+ veya 14px+ kalın) için daha düşük bir gereksinim olan 3:1 AA vardır
3
AAA uygunluğu (7:1), daha ciddi görsel engelli kullanıcılar için okunabilirliği sağlar
4
Değiştir düğmesini kullanarak renklerin her iki yönde de iyi çalışıp çalışmadığını test edin
5
Karanlık mod tasarımlarında aynı kontrast oranlarına ihtiyaç vardır - her iki modu da test edin

Related Tools

HEX'ten RGB'ye Dönüştürücü

HEX renk kodlarını anında RGB değerlerine dönüştürün ve canlı önizleme swatch'i ile birlikte kullanın.

🎨 Color Tools

Renk Seçici

HEX, RGB, HSL ve CMYK çıktıları ile etkileşimli renk seçici.

🎨 Color Tools

Renk Tonu Jeneratörü

Ayarlabilir adım sayısı ile herhangi bir rengin daha koyu tonlarını oluşturun.

🎨 Color Tools

Erişilebilir Renk Paleti Oluşturucu

WCAG karşıtlık gereksinimlerini karşılayan renk paletleri oluşturun.

🎨 Color Tools

Renk Körlüğü Simülatörü

Farklı tiplerdeki renk körlüğü olan insanların renkleri nasıl gördüğünü simüle edin.

🎨 Color Tools

Frequently Asked Questions

Q WCAG kontrast oranı nedir?

İki renk arasındaki parlaklık farkının sayısal bir ölçüsüdür (1:1'den 21:1'e). WCAG, görsel engelli kişiler için metin okunabilirliğini sağlamak üzere minimum oranları belirtir.

Q AA ve AAA arasındaki fark nedir?

AA, minimum erişilebilirlik standardıdır (normal metin için 4.5:1). AAA, geliştirilmiş erişilebilirliktir (normal metin için 7:1). Çoğu düzenleme AA gerektirir; AAA en iyi uygulamadır.

Q Büyük metin ne anlama gelir?

WCAG, büyük metni düzenli ağırlık için 18pt (24px) veya daha büyük, kalın ağırlık için 14pt (18.67px) veya daha büyük olarak tanımlar. Büyük metin daha düşük kontrast gereksinimlerine sahiptir.

Q Renk alone erişilebilirliği belirler mi?

Hayır. Kontrast oranı bir faktördür. Ayrıca rengin bilgi iletiminin tek yolu olmadığını (ikonlar, desenler, etiketler de kullanın) ve renk körlüğü simülasyonları ile test edin.

About This Tool

Contrast Oranı Kontrolü is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.