Değerler tarayıcı API'leri ve görünür dönüşüm formülleriyle işlenir; kaynak korunur.
Renk Kontrastı Denetleyici
Ön plan ve arka plan HEX renkleri için göreli parlaklık ile kontrast oranını hesaplar; normal ve büyük metin için AA/AAA eşiklerini ayrı gösterir. Sonuç, gerçek arayüzü ve kullanıcı testini tek başına yerine geçirmez.
Bu araç ne yapar?
İki rengi WCAG kontrast oranı ve metin eşikleriyle karşılaştırın.
Renk Kontrastı Denetleyici: yöntem ve kullanım
Ön plan ve arka plan HEX renkleri için göreli parlaklık ile kontrast oranını hesaplar; normal ve büyük metin için AA/AAA eşiklerini ayrı gösterir. Sonuç, gerçek arayüzü ve kullanıcı testini tek başına yerine geçirmez.
Desteklenen renk, CSS, SVG, görsel veya boyut değerleri Biçimi önce kişisel veri içermeyen küçük bir örnekle doğrulayın.
önizlenebilir görsel değer, ölçü/biçim özeti ve kopyalanabilir ya da indirilebilir sonuç
Uygulama adımları
- Ön plan ve arka plan HEX renklerini girin.
- Kontrast oranını ve eşikleri hesaplayın.
- Gerçek yazı boyutu, ağırlığı ve durum renkleriyle ayrıca test edin.
açık/koyu arka plan, farklı ekran boyutları, hedef uygulama ve kaynakla görsel karşılaştırma
Kaynak kopyayı koruyun; çıktı uyumluluğunu hedef uygulamada doğrulayın.
Uygun kullanım alanları
- Tasarım sistemi renk kontrolü
- Karanlık tema okunabilirliği
- CTA metni erişilebilirliği
Bu araçla ilgili rehberler
Erişilebilir Responsive Arayüz: Kontrast, clamp() ve En-Boy Oranı
Karanlık tema, akışkan tipografi ve medya yer tutucularını ölçülebilir sınırlarla birlikte tasarlayın.
Rehberi oku →Yerel Araçlarda Erişilebilir Hata ve İşlem Geri Bildirimi
İşleniyor, tamamlandı ve hata durumlarını yalnız renge değil eyleme ve açıklamaya bağlayın.
Rehberi oku →Sık sorulan sorular
Renk Kontrastı Denetleyici hangi girdiyi kabul eder?+
Desteklenen renk, CSS, SVG, görsel veya boyut değerleri Ön plan ve arka plan HEX renklerini girin.
Renk Kontrastı Denetleyici çıktısında ne görürüm?+
önizlenebilir görsel değer, ölçü/biçim özeti ve kopyalanabilir ya da indirilebilir sonuç Değerler tarayıcı API'leri ve görünür dönüşüm formülleriyle işlenir; kaynak korunur.
Renk Kontrastı Denetleyici çıktısını nasıl doğrulamalıyım?+
açık/koyu arka plan, farklı ekran boyutları, hedef uygulama ve kaynakla görsel karşılaştırma
Renk Kontrastı Denetleyici girdiyi bir sunucuya gönderir veya kaydeder mi?+
Araç girdisi etkin sekmede işlenir. İş İstasyonu’na kaydetme veya başka bir araca aktarma ayrı bir seçimdir. Tarayıcı eklentileri ve paylaşılan cihazlar ayrıca değerlendirilmelidir; gizlilik sayfası reklam ve ağ bağlantılarını açıklar.