Renk Kontrastı Denetleyicisi
Check a URL's rendered contrast
Loads the page in a metered headless browser and runs axe-core's color-contrast rule against the real computed styles — the resolved foreground, background, opacity, inherited color, and CSS variables after the cascade, not a static-HTML color guess. This is the same Browser-Rendering pipeline the Accessibility Tester uses, filtered to just contrast findings.
Kontroller sunucumuzdan çalışır; girdiğiniz URL’yi getirir ve sonuçları saklamayız. This launches a metered browser audit shared with the Accessibility Tester's rendering budget, so it is rate-limited per visitor and per target site. Anonim çalıştırma düzeyi sonuç sayaçları toplu araştırmalarda kullanılabilir; URL’ler, alan adları, IP’ler ve tanımlayıcılar asla dahil edilmez ve 100 çalıştırmanın altında istatistik yayımlanmaz.
Tamamen tarayıcınızda çalışır; yapıştırdığınız hiçbir şey yüklenmez veya saklanmaz. Anonim çalıştırma düzeyi sonuç sayaçları toplu araştırmalarda kullanılabilir; URL’ler, alan adları, IP’ler ve tanımlayıcılar asla dahil edilmez ve 100 çalıştırmanın altında istatistik yayımlanmaz.
Palette audit
Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.
Site pasaportu Bu kaydedilmiş site için yerel bağlam
Yerel veriler
Kaydedilen hedefler, adlandırılmış listeler ve son kontrol özetleri yalnızca bu tarayıcıda tutulur.
Bu aracı değerlendir
Bu araç hakkında
WCAG 2.2 renk kontrastını tarayıcıda denetleyin, en yakın geçen ön plan renklerini bulun ve CSS renk belirteçlerini kontrol edin.
Ücretsizdir ve kayıt gerektirmez. Ön plan ve arka plan çiftlerini AA ve AAA oranlarıyla karşılaştırın, geçen hex alternatiflerini alın veya canlı URL'nin gerçek oluşturulmuş kontrastını ölçün.
Özellikler
- WCAG 2.2 AA ve AAA için ön plan/arka plan oranlarını hesaplama.
- Geçen en yakın ön plan renklerini ve pratik hex alternatiflerini önerme.
- CSS özel özelliklerini, Tailwind tarzı ad/değer belirteçlerini veya hex listesini yerel olarak denetleme.
- URL modunda gerçek oluşturulmuş renk ve arka plan değerlerini headless tarayıcıda ölçme.
- Her bulgu için kontrast oranı, eşik ve açık tasarım rehberi gösterme.
Nasıl çalışır
Bir URL girin veya CSS/renkleri yapıştırın. Yapıştırma modunda çiftleri ve renk belirteçlerini inceleyin; URL modunda sayfanın oluşturulmasını bekleyip her öğenin hesaplanmış ön plan ve arka planını okuyun. AA/AAA bulgularını, oranı ve en yakın geçen alternatifleri karşılaştırın; tasarım değişikliğinden sonra arayüzü yeniden test edin.
Sınırlamalar
- Kontrast denetimi tipografiyi, odak durumlarını veya metin görüntülerini kapsamaz; yapıştırma modunda gerçek oluşturulmuş arka plan da ölçülmez. Son arayüzü ayrıca test edin.
- URL modu sayfayı ölçümlü headless tarayıcıda yükler ve gerçek hesaplanmış stilleri okur; yapıştırma modu yalnızca girdiğiniz renk çiftleri için matematik yapar. Bu, erişilebilirliğin tamamını kanıtlamaz.
Sık sorulan sorular
Hangi kontrast oranına ihtiyacım var?
WCAG AA standart metin için 4.5:1, büyük metin ve metin dışı kullanıcı arayüzü bileşenleri için 3:1 oranını gerektirir. AAA standart metin için 7:1, büyük metin için 4.5:1 gerektirir.
Bu sayfamın erişilebilir olduğunu kanıtlar mı?
Hayır. Renk çiftlerini kontrol eder; tipografiyi, odak durumlarını, metin görüntülerini veya yapıştırma modunda gerçek işlenmiş arka planları denetlemez. Bunu tasarım aşamasında bir kontrol olarak kullanın ve tamamlanmış arayüzü de deneme edin.
Paletim nereye gider?
Yapıştırma modunda tarayıcıda kalır. CSS özel özelliklerini, Tailwind tarzı ad/değer belirteçlerini veya serbest bir onaltılık renk listesini yapıştırabilirsiniz. Yalnızca URL modu sunucumuza bir şey gönderir; o da palet değil, girdiğiniz herkese açık sayfa adresidir.
URL modu renkleri yapıştırmaktan nasıl farklıdır?
Yapıştırılan renkler, yazdığınız çift üzerinde kesin matematik sağlar. URL modu ise gerçek sayfayı ölçümlü başsız bir tarayıcıda yükler ve CSS basamaklandırması, kalıtım, opaklık ve tarayıcı varsayılanları çözüldükten sonra her öğenin gerçek hesaplanmış rengini ve arka planını okur. Statik HTML'den yapılan renk tahmini yanlış olabileceği için canlı bir sayfada gerçek kontrast hükmü elde etmenin tek yolu budur.
Yaygın sorunlar ve çözümleri
- Hata Türkçe açıklama: Renk çift başarısız olur WCAG AA için standart metin Çözüm: Türkçe açıklama: Değişiklik ön plan veya arka plan kadar standart metin ulaşır konumunda en az 4.5:1 karşıtlık, ardından yeniden test edin unsur, odak, devre dışı, ve ziyaret edilen durumlar.
- Hata Renk çift başarısız olur WCAG AA için büyük metin Çözüm: Değişiklik renk çift kadar metin konumunda en az 24px alan veya 18.66px kalın ulaşır 3:1 karşıtlık.
- Uyarı Türkçe açıklama: Renk çift başarısız olur WCAG AAA için standart metin Çözüm: Türkçe açıklama: Ayarlayın renk çift kadar standart metin ulaşır 7:1 karşıtlık ne zaman AAA olur proje gereksinim.
- Uyarı Renk çift başarısız olur WCAG AAA için büyük metin Çözüm: Ayarlayın renk çift kadar kaynak büyük metin ulaşır 4.5:1 karşıtlık ne zaman AAA olur gerekli.
- Uyarı Renk çift başarısız olur durum karşıtlık rehberlik Çözüm: Yükseltin karşıtlık ile temel simgeler, odak öğe, denetim sınırlar, ve bilgi öğe için konumunda en az 3:1 karşı bitişik renkler.