Renk Kontrast Denetleyici
Bir metin ve arka plan rengi arasındaki WCAG kontrast oranını kontrol edin — normal metin, büyük metin ve UI bileşenleri için AA/AAA geçti-kaldı notlarını canlı önizleme ve erişilebilir renk önerileriyle görün.
Çabuk kahverengi tilki
Kontrast yeterliyse büyük metin rahatça okunur.
Bu normal gövde metninin örnek paragrafıdır. İyi renk kontrastı içeriğinizi görme güçlüğü veya renk körlüğü olan kişiler dahil herkes için okunabilir kılar. örnek bağlantı.
Küçük yazı ve başlıklar en zor okunanlar — en fazla kontrastı gerektirirler.Her şey WCAG 2.x göreli parlaklık formülü kullanılarak tarayıcınızda canlı hesaplanır — yükleme yok, kayıt yok, tamamen ücretsiz.
Renk Kontrast Denetleyici Hakkında
Color Contrast Checker, bir metin rengi ile bir arka plan rengi arasındaki WCAG kontrast oranını ölçer, ardından çifti normal metin, büyük metin ve UI bileşenleri için AA ve AAA erişilebilirlik seviyelerine göre derecelendirir. Herhangi bir rengi ayarladığınızda oran ve her geçti/kaldı sonucu canlı olarak güncellenir.
Gerçekçi bir önizleme paneli, seçtiğiniz kombinasyonda başlıkları, gövde metnini, küçük yazıyı, bir düğmeyi ve bir bağlantıyı gösterir; böylece soyut renk örnekleri yerine gerçek içerikle okunabilirliği değerlendirebilirsiniz. Bir çift başarısız olduğunda araç, tek tıkla uygulamaya hazır, AA eşiği olan 4.5:1'e ulaşan en yakın erişilebilir metin rengini önerir.
Matematik, WCAG 2.x göreli parlaklık formülünü izler ve tamamen tarayıcınızda çalışır — hiçbir şey yüklenmez ve kontroller ücretsizdir. Oranın ve derecelerin kısa bir metin raporunu bir erişilebilirlik incelemesine veya bir pull request'e yapıştırmak için de kopyalayabilirsiniz.
Renk Kontrast Denetleyici Nasıl Kullanılır
- Seçicilerle veya değer yazarak metin renginizi ve arka plan renginizi ayarlayın.
- Normal metin, büyük metin ve UI bileşenleri için kontrast oranını ve AA/AAA sonuçlarını okuyun.
- Renklerinizde gerçek başlıkları, paragrafları, düğmeleri ve bağlantıları görmek için canlı önizlemeyi inceleyin.
- Çift başarısız olursa, önerilen erişilebilir metin rengini uygulayın veya iki rengi değiştirin.
- Oranı ve uyumluluk sonuçlarını paylaşmak için "Raporu kopyala"ya tıklayın.