Renk Kontrastı Neden Önemlidir
Uygun renk kontrastı ile tüm kullanıcılar için erişilebilirliği sağlamak
Herkes İçin Görünürlük
12 erkekten 1'i ve 200 kadından 1'i renk görme bozukluğuna sahiptir. Uygun kontrast, içeriğin herkes tarafından görülebilir olmasını sağlar.
Erişilebilirlik Uyumu
WCAG 2.1 yönergelerine ve ADA ve EAA gibi yasal gerekliliklere uygun kontrast oranlarıyla uyum sağlayın.
Mobilde Okunabilirlik
İyi kontrast, özellikle açık havada kullanılan mobil cihazlarda çeşitli aydınlatma koşullarında okunabilirliği artırır.
Renk Kontrast Kontrol Aracı
Renk kombinasyonlarınızı WCAG erişilebilirlik standartlarına göre test edin
Metin Önizleme
Bu bir örnek metindir
Bu, okunabilirliği kontrol etmek için daha küçük bir metindir
Kontrast Oranı
Normal Metin
Büyük Metin
Temel Özellikler
Erişilebilir tasarımlar oluşturmanıza yardımcı olacak araçlar
Gerçek Zamanlı Analiz
Renkleri ayarlarken mükemmel erişilebilir kombinasyonu bulmak için anında geri bildirim alın.
WCAG Uyumu
Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.1 AA ve AAA standartlarına göre doğrulayın.
Görsel Önizleme
Seçtiğiniz renk kombinasyonuyla metninizin tam olarak nasıl görüneceğini görün.
Renk Önerileri
Renkleriniz standartları karşılamadığında erişilebilir alternatifler için öneriler alın.
WCAG Yönergeleri
Renk kontrastı için erişilebilirlik standartlarını anlamak
WCAG 2.1 Seviye AA
- Normal Metin: En az 4.5:1 kontrast oranı
- Büyük Metin: En az 3:1 kontrast oranı
- UI Bileşenleri: Bileşenleri tanımlamak için gereken görsel bilgiler en az 3:1 kontrast oranına sahip olmalıdır
WCAG 2.1 Seviye AAA
- Normal Metin: En az 7:1 kontrast oranı
- Büyük Metin: En az 4.5:1 kontrast oranı
- Gelişmiş Kontrast: Şiddetli görme bozukluğu olan kullanıcılar için en yüksek erişilebilirlik seviyesi
Büyük metin, 18 punto (24px) veya 14 punto (18.5px) kalın ve daha büyük olarak tanımlanır. Diğer tüm metinler normal metin olarak kabul edilir.
Erişilebilir Tasarımlar Oluşturmaya Hazır mısınız?
Tasarımlarınızın herkes için erişilebilir olduğundan emin olmak için renk kontrast kontrol aracımızı bugün kullanmaya başlayın.
Kontrol Aracını DeneyinRenk Kontrastını Anlamak
Renk kontrastı ilkeleri ve standartları hakkında kapsamlı bir rehber
Bir Renk Kontrast Kontrol Aracı, ön plan (metin, simgeler veya etkileşimli bileşenler gibi) ve arka plan öğeleri arasındaki görsel ayrımı değerlendirmek için temel bir araçtır. Luminans kontrast oranını ölçerek, dijital içeriğin algılanabilir, erişilebilir ve küresel erişilebilirlik standartlarına uygun olmasını sağlar.
Renk Kontrastı Neden Önemlidir
Erişilebilirlik Uyumu (WCAG ve ADA)
Web İçeriği Erişilebilirlik Yönergeleri (WCAG 2.1), aşağıdakileri içeren görme bozukluğu olan kullanıcılar için minimum kontrast oranları gerektirir:
- Düşük görüş
- Renk körlüğü
- Yaşa bağlı görme bozukluğu
Minimum WCAG Standartları:
| Seviye | Normal Metin (≤18pt) | Büyük Metin (≥18pt veya kalın ≥14pt) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Bu oranlara uymamak, yasal risklere (örneğin, ADA davaları) ve kullanıcıların dışlanmasına neden olabilir.
Gelişmiş Okunabilirlik ve Kullanılabilirlik
Görme bozukluğu olmayan kullanıcılar için bile, zayıf kontrast şunlara neden olur:
- Göz yorgunluğu
- Azalmış anlama
- Daha yüksek hemen çıkma oranları (kötü okunabilirlik nedeniyle kullanıcıların siteyi terk etmesi)
Marka Tutarlılığı ve Profesyonellik
İyi kontrastlı bir tasarım, markanın güvenilirliğini artırır ve UI öğelerinin (düğmeler, uyarılar, CTAlar) hemen tanınabilir olmasını sağlar.
Renk Kontrast Kontrol Aracı Nasıl Çalışır
Luminans Hesaplama
Araç, ön plan ve arka plan renklerinin göreceli parlaklığını aşağıdaki formülü kullanarak hesaplar:
Kontrast Oranı = (L1+0.05)/(L2+0.05)
(L1 ve L2 sırasıyla daha açık ve daha koyu renklerin luminans değerleridir.)
Oran Yorumlama
- < 3:1 → Başarısız (Çoğu kullanıcı için okunamaz)
- 3:1 - 4.5:1 → Minimum (Büyük metin için AA)
- ≥ 4.5:1 → Geçti (Normal metin için AA)
- ≥ 7:1 → Yüksek kontrast (Kritik içerik için AAA önerilir)
Dinamik Ayarlamalar
Gelişmiş kontrol araçları şunları sağlar:
- Hex/RGB/HSL girişi
- Gerçek zamanlı ayarlamalar (açıklık/koyuluk değişiklikleri)
- Renk körlüğü simülasyonlu önizlemeler (örneğin, deuteranopia, protanopia)
Optimal Kontrast için En İyi Uygulamalar
- Erken ve Sık Test Edin – Kontrastı yalnızca son tasarımda değil, wireframe oluşturma sırasında doğrulayın.
- Kritik Metni Önceliklendirin – Başlıklar, düğmeler ve hata mesajları daha yüksek oranlar gerektirir.
- Saf Siyah/Beyazdan Kaçının – Biraz koyulaştırılmış gri/beyazlar parlama etkisini azaltır.
- Etkileşimli Durumları Doğrulayın – Hover, focus ve devre dışı durumlar erişilebilir kalmalıdır.
- Otomatik Denetim Araçlarını Kullanın – axe DevTools veya Lighthouse gibi araçlar tüm sayfaları tarar.