İçeriğe geç
ToolMug

Gezinmek için ↑ ↓, açmak için Enter, kapatmak için Esc.

Renk Kontrastı Kontrolü

WCAG kontrast oranını görmek ve normal ya da büyük metnin AA ile AAA koşullarını karşılayıp karşılamadığını kontrol etmek için metin ve arka plan rengi girin. Başarısızsa araç tonu koruyup yalnızca açıklığı değiştirerek en yakın geçen rengi önerir.

Tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez

Kontrast oranı

4,54:1

  • AA normal metin ≥ 4.5:1Geçti
  • AA büyük metin ≥ 3:1Geçti
  • AAA normal metin ≥ 7:1Kaldı
  • AAA büyük metin ≥ 4.5:1Geçti

Büyük başlık metni

16 px normal gövde metni kolay okunmalıdır.

Küçük yazı, açıklamalar ve dipnotlar.

Düğme

AAA düzeyini geçen en yakın metin rengi: #595959 (7.00:1)

Nasıl kullanılır

  1. Renkleri seçin veya hex, rgb(), hsl(), oklch() ya da renk adı olarak yazın.
  2. Oranı ve dört WCAG sonucunu okuyun, aşağıdaki canlı önizlemeyi kontrol edin.
  3. Başarısızsa uygulamak için önerinin yanındaki “Bu rengi kullan”a tıklayın.

Seçeneklerin açıklaması

AA
Normal metin için en az 4,5:1, büyük metin için 3:1 gerekir (18 pt / 24 px veya 14 pt / yaklaşık 18,7 px kalın). Çoğu düzenleme ve tasarım sistemi AA ister.
AAA
Okunabilirliğin en önemli olduğu içeriklerde normal metin için en az 7:1, büyük metin için 4,5:1 gerekir.
Önerilen renk
OKLCH renk alanında tonu ve kroma değerini koruyup yalnızca açıklığı değiştirerek ancak geçen en yakın rengi bulur.
Saydam renkler
Saydam metin rengi, arka plan üzerinde göründüğü biçimde ölçülür.

Oran nasıl hesaplanır

Her renk sRGB’den doğrusal ışığa, oradan da bağıl parlaklığa dönüştürülür:

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Göz yeşile en duyarlı olduğu için yeşil en çok sayılır. Beyaz arka plandaki bazı sonuçlar:

Metin rengi Oran Sonuç
#000000 21 : 1 AAA
#0066cc 5,57 : 1 AA normal metin, AAA normal metin değil
#767676 4,54 : 1 AA normal metin
#777777 4,48 : 1 Normal yazıda AA’yı geçemez, büyük yazıda geçer

WCAG tanımları Understanding Success Criterion 1.4.3 sayfasındadır.

Sıkça sorulan sorular

Kontrast nasıl hesaplanır?

WCAG 2.x formülüyle hesaplanır: (açık göreli parlaklık + 0,05) ÷ (koyu göreli parlaklık + 0,05); sonuç 1:1 ile 21:1 arasındadır. Beyaz üzerine siyah 21:1’dir.

“#767676” neden sık geçiyor?

Beyaz üzerinde 4,5:1’e (yaklaşık 4,54:1) ulaşan en açık gridir; bu yüzden ikincil metin için yaygın alt sınırdır.

Simgeler ve kenarlıklar da kontrol edilmeli mi?

Evet. WCAG 2.1’den beri kullanıcı arayüzü bileşenleri ve grafikler — düğme kenarlıkları, giriş alanları ve simgeler — bitişik renklere karşı en az 3:1 olmalıdır.

Gizlilik

Bu araç tamamen tarayıcınızda çalışır. Dosyalarınız ve metinleriniz cihazınızda işlenir, sunucularımıza asla yüklenmez.

İlgili araçlar