Renk Kontrast Kontrolü
Ön plan ve arka plan renkleri arasındaki kontrast oranını hesaplayın. WCAG 2.1 AA ve AAA erişilebilirlik standartlarına uygunluğunu kontrol edin.
Renkleri Seçin
Önizleme
Kontrast Oranı
Erişilebilir ve SEO dostu web sitesi ister misiniz?
Web tasarımında erişilebilirlik hem kullanıcı deneyimini hem de Google sıralamalarını olumlu etkiler. Bizimle konuşun.
Araç Rehberi
Renk kontrast kontrolü neden yalnızca tasarım konusu değildir?
Yetersiz kontrast; okunabilirliği, erişilebilirliği ve dolaylı olarak dönüşümü düşürür. Bu araç WCAG standardına göre iki renk arasındaki kontrast oranını hesaplayarak başlıklar, butonlar ve metin blokları için erişilebilir tasarım kararları almanıza yardım eder.
Nasıl kullanılır?
- Ön plan ve arka plan renklerini seçin veya HEX değerlerini girin; oran anında hesaplanır.
- AA ve AAA satırlarındaki geçiş durumunu inceleyin; özellikle normal boyutlu metin için sonucu dikkate alın.
- Geçemeyen kombinasyonlarda marka rengini tamamen bırakmak yerine daha koyu/açık varyasyonlar deneyin.
Ne zaman kullanılır?
- CTA butonları, form alanları ve küçük gövde metinlerinde erişilebilirlik kontrolü yapmak.
- Sosyal medya kreatiflerinde estetik ile okunabilirlik arasında denge kurmak.
- Kurumsal renk paletinin web kullanımında hangi kombinasyonlarda sorun çıkardığını görmek.
Bu araç girilen veriyi tarayıcı içinde işler. Metinleriniz ve hesaplama girdileriniz sunucuya gönderilmeden, cihazınızda analiz edilir.
Sık sorulan sorular
AA ve AAA arasındaki fark nedir?
AA temel erişilebilirlik standardıdır ve çoğu arayüz için minimum kabul edilir. AAA daha katıdır ve her kullanım senaryosunda zorunlu değildir; özellikle uzun metin ve kritik arayüzlerde hedeflenebilir.
Büyük metinlerde daha düşük kontrast kabul edilir mi?
Evet. WCAG büyük ve kalın metinler için biraz daha düşük eşiklere izin verir. Ancak gövde metni ve küçük buton yazılarında daha yüksek kontrast gerekir.
Marka rengim geçmiyorsa tamamen değiştirmeli miyim?
Genellikle hayır. Aynı rengin daha koyu veya daha açık tonları, ya da farklı arka plan kombinasyonlarıyla erişilebilir sonuca ulaşabilirsiniz.