Kontrast Denetleyicisi: WCAG Kontrast Oranı Hesaplayıcısı

Kontrast Denetleyicisi ile iki renk arasındaki WCAG kontrast oranını hesaplayın. Gerçek zamanlı sonuçlar alın ve renk kontrastınızı derecelendirin.

Colors

Foreground (Text)

Background

Preview & Results

Sample Text

The quick brown fox jumps over the lazy dog.

21.00

Contrast Ratio

AAA

WCAG Grade

AA (normal text, 4.5:1)

AA Large (3:1)

AAA (7:1)

Kontrast Denetleyicisi: WCAG Kontrast Oranı Hesaplayıcısı

Hızlı Özet: Kontrast Denetleyicisi, iki renk arasındaki WCAG kontrast oranını hesaplayan, gerçek zamanlı sonuçlar sağlayan ve renk kontrastınızı derecelendiren bir web aracıdır.

Bu Araç Ne Yapar ve Temel Özellikleri

Kontrast Denetleyicisi, iki renk arasındaki WCAG kontrast oranını hesaplamanıza yardımcı olan bir web aracıdır. Gerçek zamanlı sonuçlar sağlar ve renk kontrastınızı WCAG standartlarına (AA, AA Büyük, AAA) göre derecelendirir.

Adım Adım Kullanım Kılavuzu

Kontrast Denetleyicisi aracını açın.
Renk seçiciye tıklayarak veya metin alanına onaltılık kodu yazarak ön plan (metin) rengini seçin.
Renk seçiciye tıklayarak veya metin alanına onaltılık kodu yazarak arka plan rengini seçin.
Kontrast oranını ve derecesini gerçek zamanlı olarak görüntüleyin.

Temel Formül / Teknik Mantık

Kontrast oranı aşağıdaki formül kullanılarak hesaplanır:

Kontrast Oranı = (L1 + 0.05) / (L2 + 0.05)

Burada L1 ve L2 sırasıyla ön plan ve arka plan renklerinin göreceli parlaklık değerleridir.

Pratik Gerçek Dünya Örnekleri

Örnek 1: Ön Plan: #000000 (siyah), Arka Plan: #ffffff (beyaz) Kontrast Oranı: 21.00, Derece: AAA
Örnek 2: Ön Plan: #ffffff (beyaz), Arka Plan: #000000 (siyah) Kontrast Oranı: 21.00, Derece: AAA
Örnek 3: Ön Plan: #808080 (gri), Arka Plan: #ffffff (beyaz) Kontrast Oranı: 4.50, Derece: AA

Karşılaştırma veya Karar Matrisi / Kontrol Listesi

Kontrast Oranı	WCAG Derecesi
≥ 7.00	AAA
≥ 4.50	AA
≥ 3.00	AA Büyük

Yaygın Hatalar ve Bunlardan Nasıl Kaçınılır

Hata: Düşük kontrast oranına sahip renkler kullanmak. Nasıl Kaçınılır: Tasarımlarınızda renkleri kullanmadan önce her zaman kontrast oranını ve derecesini kontrol edin.
Hata: Renk kontrastı için WCAG yönergelerini göz ardı etmek. Nasıl Kaçınılır: Tasarımlarınızın erişilebilirlik için WCAG standartlarını karşıladığından emin olmak için Kontrast Denetleyicisi'ni kullanın.

Sıkça Sorulan Sorular

Kontrast Denetleyici kontrast oranını nasıl hesaplar?

Kontrast Denetleyici, kontrast oranını (L1 + 0.05) / (L2 + 0.05) formülünü kullanarak hesaplar; burada L1 ve L2, ön plan ve arka plan renklerinin göreli parlaklık değerleridir.

AA, AA Büyük ve AAA dereceleri arasındaki fark nedir?

AA derecesi ≥ 4.50 kontrast oranı gerektirirken, AA Büyük ≥ 3.00 kontrast oranı ve AAA derecesi ≥ 7.00 kontrast oranı gerektirir.

Web sitemin erişilebilirliğini iyileştirmek için Kontrast Denetleyici'yi nasıl kullanabilirim?

Metin ve arka plan renkleriniz arasındaki kontrast oranını hesaplamak için Kontrast Denetleyici'yi kullanın ve WCAG standartlarını (AA, AA Büyük, AAA) karşıladığından emin olun. Bu, görme engelli kullanıcılar için web sitenizin erişilebilirliğini artırmaya yardımcı olacaktır.