Renk Kontrast Denetleyici

Bu araç ne işe yarar?

Renk Kontrast Denetleyici, seçtiğiniz yazı ve arka plan renkleri arasındaki kontrast oranını hesaplar ve WCAG erişilebilirlik eşiklerini geçip geçmediğini anında gösterir. Tasarımcılar, geliştiriciler ve içerik üreticileri için metnin herkes tarafından okunabilir olmasını sağlar.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Kontrast oranı nasıl hesaplanır

Araç, her iki rengin bağıl parlaklığını (relative luminance) sRGB formülüyle bulur ve bunları (L1 + 0.05) / (L2 + 0.05) oranıyla karşılaştırır. Sonuç 1:1 (kontrast yok) ile 21:1 (siyah-beyaz) arasında bir değer olur. Yazı ve arka plan rengini seçtiğinizde örnek başlık ve paragraf gerçek zamanlı olarak güncellenir, böylece sayıyı görsel sonuçla birlikte değerlendirebilirsiniz.

WCAG AA ve AAA seviyeleri

Dört rozet sonucu özetler: AA Normal metin ≥4.5:1, AA Büyük metin ≥3:1, AAA Normal ≥7:1 ve AAA Büyük ≥4.5:1. Büyük metin yaklaşık 18pt (veya 14pt kalın) ve üzeridir. Buton, bağlantı ve gövde metni için en az AA hedefleyin; daha yüksek erişilebilirlik isteyen kamu veya sağlık siteleri için AAA seviyesini geçmeye çalışın.

Sıkça sorulan sorular

Yeşil/turuncu/kırmızı renkler ne anlama geliyor?

Oran 4.5 ve üzeriyse yeşil (AA Normal geçti), 3 ile 4.5 arasında turuncu (yalnızca büyük metin için yeterli), 3'ün altında kırmızı (başarısız) gösterilir.

Büyük metin neden daha düşük orana izin veriyor?

Büyük ve kalın harfler daha kalın çizgilere sahip olduğu için gözle ayırt edilmesi kolaydır, bu yüzden WCAG bunlara 3:1 gibi daha esnek bir eşik tanır.

Saydam veya yarı saydam renkleri test edebilir miyim?

Bu araç tam opak HEX renkleriyle çalışır. Yarı saydam bir katmanı test etmek için önce onun arka planla karışmış son rengini bulup o HEX değerini girin.