Kontrastı Ücretsiz Araçlarla Denetleme

Kontrastı göz kararıyla değerlendirmek zorunda değilsiniz. Ücretsiz araçlar, iki rengin kesin oranını hesaplar ve oranı karşılayıp karşılamadığınızı anında bildirir.

WebAIM Kontrast Denetleyicisi, klasik araçlardan biridir. Ön plan ve arka plan rengini yapıştırdığınızda oranı ve AA ile AAA uygunluk işaretlerini gösterir.

İyi araçlar, her sonucu normal ve büyük metin için ayrı ayrı Uygun veya Uygun Değil olarak etiketler. Böylece hangi eşiği geçtiğinizi tam olarak bilirsiniz.

Doğrudan tarayıcıda, DevTools renk seçici canlı kontrast oranını ve rengi ayarlarken AA sınırını gösteren bir çizgiyi görüntüler.

DevTools, gerçekten görüntülendiği hâliyle hesaplanmış rengi ve arka planı okur. Böylece umduğunuz değeri değil, gerçek pikselleri test edersiniz.

Tüm sayfayı tek seferde taramak için axe DevTools veya Lighthouse çalıştırın. Bu araçlar, tek tek renk çiftleri yerine kontrastı düşük her öğeyi işaretler.

Birçok denetleyicide damlalık bulunur. Böylece onaltılık kodları aramadan renkleri doğrudan canlı bir siteden veya taslaktan örnekleyebilirsiniz.

Figma ve benzeri uygulamalar kontrast eklentileri sunar. Böylece hataları kod yazılmadan çok önce, tasarım aşamasında yakalayabilirsiniz.

Araçlar tek bir düz renk çiftini denetler. Bir renk geçişi veya görsel üzerinde metin kontrastı yalnızca bir bölümde bozulabileceğinden, en kötü noktayı elle test edin.

Çoğu denetleyici, rengi uygun olana kadar küçük adımlarla ayarlamanıza izin verir. Böylece doğrudan CSS içine yapıştırabileceğiniz, kurallara uygun bir onaltılık değer elde edersiniz.

Bu renk eşleşmesinin yayımlamadan önce 4.5:1 oranını geçtiğini doğrulamak için stil dosyanızdaki kesin onaltılık değerleri bir denetleyiciye girin.

Kontrastı net bir uygun veya uygun değil sonucuna dönüştüren WebAIM, DevTools ve axe gibi ücretsiz araçlarla tanıştınız. Gerçek renkleri ölçün ve yayımlamadan önce hataları düzeltin. ✅