🛠️ Tarayıcı Aracı

Renk Kontrast Denetleyici

Web erişilebilirliği uyumluluğu için renk kontrast oranlarını kontrol edin. Metin ve arka plan rengi kombinasyonlarını WCAG yönergelerine göre gerçek zamanlı önizleme, erişilebilirlik derecelendirmeleri ve iyileştirme önerileriyle test edin.

Renk Kontrastı Kontrolü

Erişilebilir renk kombinasyonlarını güvenle oluşturun

#000000
#f0f4f8

Önizleme

Normal Metin

This is an example of normal body text that would appear on your website or application.

Büyük Metin

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

Kontrast Oranı

19.00:1

0

PUAN

Normal Metin

AAA

Büyük Metin

AAA

WCAG 2.1 Kılavuzları: AA, normal metin için 4,5:1, büyük metin için 3:1 gerektirir. AAA, normal metin için 7:1, büyük metin için 4,5:1 gerektirir.

İpuçları ve Öneriler

  • Maintain a contrast ratio of at least 4.5:1 for normal text.
  • Use 3:1 or higher for large text (18pt or 14pt bold).
  • Consider using darker text on lighter backgrounds or vice versa.
  • For full WCAG AAA compliance, aim for a ratio of 7:1.
  • Adjust brightness or saturation slightly to improve contrast.

İlgili Araçlar

RENK Tools

View All →

Etkileşimli Renk Çarkı

Etkileşimli renk çarkımızla çarpıcı renk uyumları oluşturun. Tamamlayıcı, üçlü, analog ve diğer renk şemalarını üretin. CSS, SCSS, Tailwind, PNG, PDF veya JSON olarak dışa aktarın.

Görsel Renk Seçici Online

Herhangi bir görselden çevrimiçi olarak ücretsiz renkleri çıkarın. Bir görsel yükleyin, renkleri seçmek için tıklayın ve HEX, RGB, HSL ve CMYK değerlerini alın. Renk paletleri oluşturun ve dışa aktarın.

Renk Paleti Görüntüleyici ve Oluşturucu

Gelişmiş özelliklerle renk paletleri oluşturun, görüntüleyin ve yönetin. Renk teorisi kullanarak paletler oluşturun, çeşitli formatlardan içe aktarın, erişilebilirlik kontrastını kontrol edin ve CSS, SCSS, Tailwind, JSON veya PNG formatlarına aktarın.

Renk Paleti Kolaj Oluşturucu

Görsellerinizi çıkarılan renk paletleriyle birleştirerek çarpıcı görsel kolajlar oluşturun. Herhangi bir görseli yükleyerek baskın renklerini otomatik olarak çıkarın ve özelleştirilebilir düzenler, stiller ve en-boy oranlarıyla güzel kompozisyonlar yaratın.

Ücretsiz Çevrimiçi CMYK'dan Pantone'a Dönüştürücü

Gelişmiş renk bilimi kullanarak CMYK renklerini en yakın Pantone eşleşmelerine dönüştürün. Gerçek zamanlı renk karşılaştırma ve kopyalama işlevselliği ile popüler Pantone renklerinin derlenmiş bir koleksiyonuna göz atın.

Ücretsiz Çevrimiçi CSS Gradyan Oluşturucu

Kullanımı kolay gradyan oluşturucumuzla çarpıcı CSS doğrusal ve radyal gradyanlar oluşturun. Web projeleriniz için anında renkleri seçin, yönleri belirleyin ve CSS kodunu kopyalayın.

Renk Kontrastı Nasıl Kontrol Edilir?

1

Metin Rengini Seçin

Metin renginizi seçmek için ilk renk seçiciye tıklayın veya doğrudan bir hex kodu girin.

2

Arka Plan Rengini Seçin

Kontrast testi için arka plan renginizi seçmek üzere ikinci renk seçiciyi kullanın.

3

Kontrast Sonuçlarını Gözden Geçirin

Hesaplanan kontrast oranını kontrol edin ve normal ve büyük metinler için AA/AAA derecelendirmelerini görün.

4

Tasarımınızı Önizleyin

Renk kombinasyonunuzun gerçek metin içeriğiyle nasıl göründüğünü görmek için canlı önizlemeyi görüntüleyin.

Temel Özellikler

Gerçek Zamanlı Kontrast Testi

Farklı metin ve arka plan rengi kombinasyonlarını seçtikçe kontrast oranlarını anında hesaplayın.

WCAG Uyumluluk Derecelendirmeleri

Web İçeriği Erişilebilirlik Yönergelerine göre hem normal hem de büyük metinler için AA ve AAA derecelendirmeleri alın.

Canlı Önizleme Paneli

Renk kombinasyonlarınızın hem normal hem de büyük boyutlarda örnek metinle tam olarak nasıl görüneceğini görün.

Görsel Puan Göstergesi

0-100 arasındaki puanları gösteren sezgisel bir dairesel grafik ile kontrast performansınızı görüntüleyin.

Etkileşimli Renk Seçiciler

Hem metin hem de arka plan renkleri için yerleşik renk seçici araçlarıyla renkleri kolayca seçin.

Erişilebilirlik İpuçları

Kontrastı iyileştirmek ve erişilebilirlik standartlarını karşılamak için pratik öneriler alın.

Renk Kontrast Denetleyici Nedir?

Renk kontrast denetleyici, metin ve arka plan renkleri arasındaki parlaklık farkını ölçen bir araçtır. İçeriğin renk körlüğü ve düşük görme dahil olmak üzere görme engelli kullanıcılar için okunabilir olmasını sağlamak amacıyla WCAG (Web İçeriği Erişilebilirlik Yönergeleri) standartlarına göre kontrast oranlarını hesaplar.

Renk Kontrast Denetleyicimizi Neden Kullanmalısınız?

1

WCAG Uyumluluğu

Tasarımlarınızın doğru AA ve AAA derecelendirmeleriyle uluslararası erişilebilirlik standartlarını karşıladığından emin olun.

2

Gerçek Zamanlı Geri Bildirim

Renkleri ayarlarken anında sonuçları görün, bu da uyumlu kombinasyonları bulmayı kolaylaştırır.

3

Görsel Puan Sistemi

Sezgisel 0-100 puanlama sistemimizle kontrast performansını bir bakışta anlayın.

4

Kurulum Gerektirmez

Tarayıcınızda herhangi bir yazılım indirmeden renk kombinasyonlarını anında test edin.

Sıkça Sorulan Sorular

İyi bir kontrast oranı nedir?

Normal metinler için, AA uyumluluğu için en az 4.5:1 veya AAA için 7:1 hedefleyin. Büyük metin (18pt veya 14pt kalın) AA için 3:1 veya AAA uyumluluğu için 4.5:1 gerektirir.

AA ve AAA derecelendirmeleri ne anlama geliyor?

AA, çoğu düzenleme tarafından istenen standart erişilebilirlik uyumluluğu seviyesidir. AAA, en yüksek seviye olup, daha şiddetli görme bozukluğu olan kullanıcılar için gelişmiş erişilebilirlik sağlar.

Kontrast oranı nasıl hesaplanır?

Kontrast oranı, WCAG yönergeleri tarafından tanımlandığı gibi renklerin göreli parlaklığı kullanılarak hesaplanır. 1:1 (kontrast yok) ile 21:1 (maksimum kontrast) arasında değişir.

Büyük metin ne anlama gelir?

Büyük metin, 18 punto (24 piksel) veya daha büyük, ya da kalın ise 14 punto (18.66 piksel) veya daha büyük olarak tanımlanır. Büyük metinlerin daha esnek kontrast gereksinimleri vardır.

Renk kontrastı neden önemlidir?

İyi renk kontrastı, görme engelli, renk körü olan veya içeriği parlak güneş ışığında ya da kötü ekranlarda görüntüleyen kullanıcılar da dahil olmak üzere herkes için içeriğin okunabilir olmasını sağlar.

Bunu herhangi bir renk formatı için kullanabilir miyim?

Araç, hex renk kodlarını kabul eder. Diğer formatlardan (RGB, HSL vb.) hex'e çevrimiçi dönüştürücüler veya tasarım araçları kullanarak dönüştürebilirsiniz.