Metin renk kontrastı nasıl kontrol edilir? AA ve AAA sonuçları

Gerçek metin ve arka plan rengini seçin

Renk Kontrast Kontrolü’nü açın. Yazı rengini ve yazının hemen arkasındaki rengi belirleyin. Örneğin düğmenin normal veya üzerine gelinmiş durumunda kullanılan renkleri ayrı ele alın. Araç opak üç veya altı haneli HEX ve tam sayılı rgb(r, g, b) değerlerini kabul eder. Ekran görüntüsü yüklemez, görselden renk seçmez, şeffaf katmanları birleştirmez ve site taramaz. rgba, HSL veya fotoğraf arka planı için önce uygun hazırlık gerekir.

Önce belirgin bir örnekle deneyin

Metin rengine #000000, arka plan rengine #ffffff yazıp Uygula’ya basın. Oran 21.00:1 olur ve dört metin kontrolü de geçer. Sonra beyaz üzerinde #777777 deneyin. Yaklaşık 4.48:1 oranıyla AA normal metin geçmez, AA büyük metin geçer; iki AAA satırı da geçmez. Kayıt gerekiyorsa sonucu kopyalayabilir veya indirebilirsiniz. Hangi tasarım durumunu ölçtüğünüzü unutmamak için renk çiftini de sonuçla saklayın.

Dört kontrolü birbirinden ayırın

AA eşikleri normal yazı için 4,5:1, büyük yazı için 3:1’dir. AAA eşikleri sırasıyla 7:1 ve 4,5:1’dir. Büyük yazı, en az 18pt normal veya 14pt kalın yazı ya da ilgili yazı sistemi için eşdeğer boyut anlamına gelir. Bir alanın başlık olması tek başına yeterli değildir. Satırı seçmeden kullanıcıya sunulan yazı boyutunu ve kalınlığını kontrol edin. Büyük metinde geçen renk çifti, aynı bileşendeki küçük yazıda kalabilir.

Yuvarlatılmış oranı dikkatli okuyun

Ekrandaki oran iki ondalıkla gösterilir; geçti/kaldı satırları yuvarlatılmamış hesabı kullanır. Eşiğin altındaki değeri yukarı yuvarlayıp uygun saymayın. Örneğin beyaz üzerinde #767676 yaklaşık 4.54:1 verir; AA normal ve AAA büyük yazıyı geçer, AAA normal yazıyı geçmez. Rengi değiştirince eski sonuç temizlenir; yeniden uygulayın. Okunabilirliği yalnız hesaplayıcıdaki küçük örnekten değerlendirmek yerine gerçek metni kullanılacağı boyutta da inceleyin.

Tasarımın içinde yeniden kontrol edin

Farklı temalar ve etkileşim durumları dahil, ilgili her yazı/arka plan çiftini deneyin. Önizleme girdiğiniz çiftin örneğidir; bitmiş sitenin taraması değildir. Geçen bir satır yalnız o kontrast karşılaştırmasını kapsar. Sayfanın bütün erişilebilirliğini, klavye kullanımını, etiketlerini veya okuma sırasını onaylamaz. Araç APCA veya metin dışı bileşen gereksinimlerini hesaplamaz. İşlem tarayıcıda yapılır. Renkleri uyguladıktan sonra gerçek arayüzün kontrol ettiğiniz opak değerleri kullandığını doğrulayın.

Kaynaklar

• W3C: WCAG 2.2 minimum text contrast
• W3C: WCAG 2.2 enhanced text contrast