WCAG Analizörü
Tüm renk paletinizi WCAG AA ve AAA erişilebilirlik uyumluluğu için analiz edin. Her HEX çiftinin kontrast oranını görün ve başarısız olanları kolayca düzeltin.
Analiz edilecek palet
Kontrast matrisi
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
WCAG 2.1 açıklaması
AAA Seviyesi
Oran ≥ 7:1 - Mükemmel
AA Seviyesi
Oran ≥ 4,5:1 - Standart
AA büyük
Oran ≥ 3:1 - Büyük metin
Başarısız
Oran < 3:1 - Uyumsuz
Tüm renk paletinizi WCAG AA ve AAA erişilebilirlik uyumluluğu için analiz edin. Her HEX çiftinin kontrast oranını görün ve başarısız olanları kolayca düzeltin.
WCAG Analizörü, yalnızca işlevine ait kontrolleri ve sonuçları gösterir. Kullanılabilir seçenekler araca ve sağlanan girdiye bağlıdır.
Desteklenen formatlar
Nasıl çalışır
Adım 1
WCAG Analizörü aracını açın ve arayüzün istediği girdiyi hazırlayın
Adım 2
Görünür kontrolleri istediğiniz sonuca göre ayarlayın
Adım 3
Kopyalamadan, dışa aktarmadan veya yeniden kullanmadan önce sonucu kontrol edin
Kaçınılması gereken yaygın hatalar
- Arayüzde görünmeyen bir biçimin veya seçeneğin desteklendiğini varsaymayın.
- Değerleri marka sistemi, arayüz veya üretim dosyasında kullanmadan önce kontrol edin.
- Sonuç metin veya UI için kullanılacaksa kontrastı da kontrol edin.
Profesyonel ipuçları
- Varyantları karşılaştırmak için kaynak değeri sonuçla birlikte saklayın.
- Dönüşümü tahmin etmek yerine aracın gerçekten gösterdiği biçimleri kullanın.
- Mobil ve tablette metinlerin ve kontrollerin satıra taşmasına izin verin.
Veri işleme
Veri işleme kullanılan özelliğe bağlıdır. Site onayı, analitik ve hesap özellikleri renk işleminden ayrıdır.
Bu araç ne yapar
Tüm renk paletinizi WCAG AA ve AAA erişilebilirlik uyumluluğu için analiz edin. Her HEX çiftinin kontrast oranını görün ve başarısız olanları kolayca düzeltin. WCAG Analizörü bu göreve odaklanır ve arayüzde gösterilmeyen özellikleri varsaymaz. İhtiyacınız olan sonucu almak için mevcut kontrolleri kullanın, ardından değerleri başka bir araca, stil dosyasına, tasarım dosyasına veya belgeye taşımadan önce kontrol edin.
Uygun girdiyi hazırlama
WCAG Analizörü tarafından istenen girdiden başlayın: ekrana göre renk, değer, görüntü veya ayar. Bu sayfada belirtilen biçimler Palette, HEX, CSS Variables, JSON. Bir biçim veya seçenek arayüzde görünmüyorsa bu işlev tarafından desteklendiğini varsaymayın.
Sonucu okuma ve doğrulama
Sonucu gerçekleştirdiğiniz işlemin bağlamında değerlendirin. Kaynak değerle karşılaştırın ve hesabı etkileyen ayarları gözden geçirin. Önemli görsel işlerde yalnızca koda güvenmek yerine sonucu kullanılacağı gerçek arayüzde de inceleyin.
Mobil ve tablette kullanım
WCAG Analizörü, sitenin duyarlı düzenini kullanır. Başlıklar, alt başlıklar, breadcrumbs ve kontroller dar ekranlarda satıra taşabilir; böylece uzun çeviriler kesilmez. Yine de sonucu kullanacağınız cihaz ve bağlamda son görünümü kontrol edin.
Sonucu projede yeniden kullanma
Sonucu doğruladıktan sonra yalnızca WCAG Analizörü tarafından gerçekten sunulan kopyalama veya dışa aktarma gibi işlemleri kullanın. Ayarı yeniden üretmeniz gerekebilecekse kaynak değeri saklayın; UI renklerinde ayrıca rengin rolünü ve gerekli kontrastı belgeleyin.
İlgili araçlar
Kılavuzlar ve eğitimler
Detaylı kılavuzlarımızla araçlarımızı nasıl kullanacağınızı öğrenin.
wcag-analyzer: accessibility için pratik rehber
wcag-analyzer kullanımı, accessibility en iyi uygulamaları ve yaygın hatalar için yerelleştirilmiş rehber.
wcag-analyzer: accessibility için pratik rehber
wcag-analyzer kullanımı, accessibility en iyi uygulamaları ve yaygın hatalar için yerelleştirilmiş rehber.
wcag-analyzer: export için pratik rehber
wcag-analyzer kullanımı, export en iyi uygulamaları ve yaygın hatalar için yerelleştirilmiş rehber.
Sık sorulan sorular
Detaylı kılavuzlarımızla araçlarımızı nasıl kullanacağınızı öğrenin.