Renk Kontrast Kontrolü
Opak sRGB renk çiftinin oranını hesaplayın; yuvarlanmamış sonucu WCAG 2.2 metin kontrast eşikleriyle karşılaştırın.
İki renk seçin
#RGB veya #RRGGBB girin. Alfa, renk adı, RGB fonksiyonu ve gradyan desteklenmez.
Renk önizlemesi
Renk çifti kontrast oranı
-
Gösterim üç ondalıktır; eşik kararı yuvarlanmamış değerle verilir.
4.5:1
3:1
7:1
4.5:1
Büyük metin en az 18 pt (24 CSS px) veya 14 pt kalın (yaklaşık 18,67 CSS px) demektir. Önizleme 24 px kalın ve 16 px normaldir. Gerçek sayfadaki fontu ve bağlamı ayrıca kontrol edin.
Eşiği karşılayan renk çifti bütün sayfanın WCAG uygunluğunu kanıtlamaz. Araç sitenizi, saydamlığı, katmanlı arka planı, görselleri, hover/focus durumlarını, font renderını veya metin dışı bileşen gereksinimlerini incelemez.
Eşik örneği ve kaynaklar
Sentetik #777777 ve #ffffff çifti yaklaşık 4,478:1 olur: AA normal metin eşiğinin altında, AA büyük metin eşiğinin üstündedir. 4,5 olarak yuvarlamak bu farkı gizler.
Aday marka renklerini karşılaştırın; ardından gerçek sayfayı ve etkileşim durumlarını inceleyin.
Web tasarım kapsamını inceleyin
Tasarım briefine renk seçimlerini, etkileşim durumlarını ve yayın kontrollerini ekleyin.
İletişimAraç Rehberi
Renk kontrast kontrolü neden yalnızca tasarım konusu değildir?
Bu araç iki opak sRGB HEX renginin göreli parlaklığından kontrast oranını hesaplar. Sonucu WCAG 2.2 metin kontrast eşikleriyle karşılaştırır; bütün sitenin erişilebilirlik kabulünü veya dönüşüm etkisini belirlemez.
#RGB ve #RRGGBB kabul eder; alfa ve katmanlı arka planı çözmez. Ekrandaki oran üç ondalık gösterilse de eşik kararı yuvarlanmamış değerle verilir. Tam rapor normalize renkleri, parlaklıkları ve dört eşik sonucunu içerir.
Nasıl kullanılır?
- Ön plan ve arka plan için #RGB veya #RRGGBB girin. Geçersiz girdide eski sonuç kaldırılır.
- AA/AAA normal ve büyük metin satırlarını inceleyin; gerçek font boyutunu ve kalınlığını ayrıca kontrol edin.
- 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?
Buradaki sonuç yalnızca metin kontrastı içindir: normal metinde AA 4,5:1, AAA 7:1; büyük metinde AA 3:1, AAA 4,5:1 karşılaştırılır. Diğer WCAG kriterleri incelenmez.
Büyük metinlerde daha düşük kontrast kabul edilir mi?
Büyük metin en az 18 pt veya 14 pt kalın metindir. Küçük metnin kalın olması tek başına büyük metin eşiğini kullanmaya yetmez. Font ve gerçek sayfa bağlamı ayrıca incelenmelidir.
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.