1. Ana sayfa
  3. Tasarım
  5. WCAG Kontrast Kontrolü

WCAG Kontrast Kontrolü

Metin ve arka plan renklerinin kontrast oranını WCAG AA ve AAA'ya göre kontrol edin.

Tarayıcınızda çalışır Ücretsiz

Kontrast oranı

—
Büyük başlık metni
Normal gövde metni böyle görünür. Pijamalı hasta yağız şoföre çabucak güvendi.
Küçük yazı, 13px.

Oranlar WCAG 2.x göreli parlaklık formülüne göre hesaplanır. Büyük metin = en az 24px normal veya 18,66px (14pt) kalın.

Okunabilirlik herkes için

Düşük kontrastlı metinler; görme bozukluğu olan kullanıcılar, yaşlılar ve güneş altında telefon kullananlar için okunamaz hale gelir. WCAG (Web İçeriği Erişilebilirlik Yönergeleri), metin ile arka plan arasında minimum kontrast oranları tanımlar.

Kontrol edilen ölçütler

  • WCAG AA: normal metin için 4,5:1, büyük metin için 3:1
  • WCAG AAA: normal metin için 7:1, büyük metin için 4,5:1
  • Arayüz bileşenleri ve grafik öğeler için 3:1

Nasıl çalışır?

Metin ve arka plan renklerini seçin; araç WCAG 2.x göreli parlaklık formülüyle kontrast oranını hesaplar ve her ölçüt için geçti/kaldı sonucunu gösterir. Canlı önizleme, renk çiftinin gerçek metinde nasıl göründüğünü gösterir. Örneğin beyaz üzerine siyah 21:1 ile en yüksek kontrasttır.

WCAG Kontrast Kontrolü nasıl kullanılır?

  1. Metin rengini seçin veya HEX kodunu girin.
  2. Arka plan rengini seçin.
  3. Kontrast oranını ve AA/AAA sonuçlarını inceleyin.
  4. Gerekirse renkleri ayarlayarak ölçütü geçin.

Neden bu aracı kullanmalısınız?

Erişilebilirlik yasalarına ve standartlarına uyum sağlamanıza, daha geniş bir kitleye ulaşmanıza yardımcı olur.

Sıkça sorulan sorular

Hangi oran gerekli?

WCAG AA normal metin için 4,5:1, büyük metin ve arayüz bileşenleri için 3:1 ister; AAA ise 7:1 ve 4,5:1 ister.

Büyük metin ne demek?

WCAG'ye göre en az 18pt (yaklaşık 24px) normal veya 14pt (yaklaşık 18,66px) kalın yazılar büyük metin sayılır.

Gri metin neden sık başarısız oluyor?

Beyaz arka plan üzerinde açık gri tonlar 4,5:1 oranının altında kalır; #767676 beyaz üzerinde AA'yı geçen en açık gri tonlardan biridir.

İlgili araçlar

Gizli

Renk Skalası Oluşturucu (50–950)

Tek bir temel rengi CSS değişkenleri ve yapılandırma çıktısıyla Tailwind tarzı 50–950 ton skalasına dönüştürün.

Aracı aç
Gizli

Renk Paleti Oluşturucu

Uyumlu 5–8 renklik paletler üretin: rastgele, tamamlayıcı, analog, monokromatik veya üçlü.

Aracı aç
Gizli

Dokunma Alanı Boyutu Kontrolü

Buton veya bağlantı boyutunu WCAG 2.2, Apple HIG ve Material Design dokunma alanı önerilerine göre kontrol edin.

Aracı aç
Gizli

Renk Kodu Dönüştürücü

Renkleri HEX, RGB ve HSL arasında canlı önizlemeyle dönüştürün; alfa kanalı desteklenir.

Aracı aç