ImageColorPicker.com

Renk kontrast denetleyicisi

Erişilebilirliği sağlamak için ön plan ve arka plan renkleri arasındaki kontrast oranını test et.

Renklerini kontrol et

Metin okunabilirliğini sağlamak için WCAG erişilebilirlik standartlarına uygun renk kombinasyonlarını test et.

9.14 ila 1
Kontrast
AAA
Metin sonucu
Çok iyi

Karşılaştırıldı: #000000 üzerinde #31C36B

Metin

16px, Normal (400)

Normal metin sayılır.

  • AA (WCAG 1.4.3): en az 4.5:1

    Geçti

  • AAA (WCAG 1.4.6): en az 7:1

    Geçti

Arayüz bileşenleri ve grafikler

Simgeler, giriş kenarlıkları, odak göstergeleri ve arayüzü kullanmak için görmen gereken diğer parçalar.

  • AA (WCAG 1.4.11): en az 3:1

    Geçti
9.14:1. Metin: AA standardını karşılıyor, AAA standardını karşılıyor. Kullanıcı arayüzü bileşenleri: geçiyor.
Bunun nasıl kontrol edildiği
Karşılaştırılan renkler (karıştırıldıktan sonra)
Metin #000000, arka plan #31C36B
Göreli luminans
Metin 0.0000, arka plan 0.4074
Formül
(L1 + 0.05) / (L2 + 0.05) burada L1 daha açık rengin luminansı, L2 daha koyu rengin luminansıdır.
Tam oran
9.1489:1, gösterilen 9.14:1. Gösterilen değer kesilir, yuvarlanmaz, bu yüzden olduğundan daha iyi görünmez. Kesin değer gereksinimle karşılaştırılan değerdir.

Yazı boyutu: 16px, Normal (400)

Normal metin sayılır. Büyük metin en az 24px (18pt) veya kalınsa (ağırlık 700 veya daha fazla) en az 18.67px (14pt) olur. Boyutlar yuvarlanmaz, kesilerek gösterilir.

Normal metin sayılır. Büyük metin en az 24px (18pt) veya kalınsa (ağırlık 700 veya daha fazla) en az 18.67px (14pt) olur. Boyutlar yuvarlanmaz, kesilerek gösterilir.

Aa
Önizleme başlığı

Hızlı kahverengi tilki tembel köpeğin üzerinden atlar

Küçük metin örneği (12px)

Metin
#000000
Arka plan
#31c36b

WCAG Standartları

Seviye AA

Normal metin için minimum 4.5:1 kontrast oranı ve büyük metin için 3:1. Çoğu web sitesi için gereklidir.

Seviye AAA

Normal metin için geliştirilmiş 7:1 kontrast oranı ve büyük metin için 4.5:1. Optimal erişilebilirlik için önerilir.

Renk kontrast denetleyicisi

Metin ve arka plan renklerinin kontrast oranını hesapla.

Metin ve arka plan rengi için renk seçici kullanarak bir renk seçin veya RGB onaltılık formatında bir renk girin (örn. #259 veya #2596BE). Renk seçmek için kaydırıcıyı ayarlayabilirsiniz. Web İçeriği Erişilebilirlik Yönergeleri (WCAG), metnin görme yetisine sahip kullanıcılar için okunabilir olup olmadığını belirlemeye yardımcı olacak belirli bir yönergeye sahiptir. Bu kriter, renk kombinasyonlarını karşılaştırılabilir oranlara haritalamak için belirli bir algoritma kullanır. Bu formülü kullanarak, WCAG, metin ve arka planı ile birlikte en az 4.5:1 oranında kontrasta sahip olmanın düzenli (gövde metni) için yeterli olduğunu belirtir ve büyük metinler (18+ pt normal veya 14+ pt kalın) en az 3:1 kontrast oranına sahip olmalıdır.

Ana özellikler

  • Gerçek zamanlı kontrast oranı hesaplama
  • WCAG AA & AAA uyumluluk kontrolü
  • HSL ince ayar kaydırıcıları
  • Çoklu önizleme formatları

Gelişmiş araçlar

  • Otomatik renk düzeltme
  • Metin ve arka plan örnekleri
  • Renk adı algılama
  • Sonuçları dışa aktar

Sıkça sorulan sorular

WCAG AA uyumluluğu için normal metin en az 4,5:1 kontrast oranı gerektirir, büyük metin (18pt veya 14pt kalın) ise 3:1 gerektirir.

WCAG AAA daha yüksek kontrast oranları gerektirir: normal metin için 7:1, büyük metin için 4,5:1. AA için bu değerler sırasıyla 4,5:1 ve 3:1'dir.

Tasarım amacını korurken metin veya arka plan renklerini ayarlamak için otomatik düzeltme özelliğini kullan ya da AA/AAA uyumluluğu için en uygun alanları gösteren görsel göstergeli HSL kaydırıcılarıyla renkleri elle ayarla.

Yeşil alanlar ve AA/AAA işaretleri, WCAG uyumluluğu için en uygun aralıkları gösterir. Yön ipuçları (Daha açık/Daha koyu), mevcut renk kombinasyonuna göre seni daha iyi kontrasta doğru yönlendirir.

Evet, herhangi bir HEX renk kodu girebilir veya özel renkleri seçmek için renk seçiciyi kullanabilirsin. URL otomatik olarak güncellenir, böylece belirli renk kombinasyonlarını paylaşabilirsin.