Ana içeriğe atla
ImageColorPix

Kontrast Denetimi

Metin ve arka plan kombinasyonunuzun erişilebilir olup olmadığını kontrol edin. Renk pencereleriyle elle seçin, Beyaz / Siyah hazır ayarlarını kullanın veya fotoğraf yükleyip herhangi bir piksele tıklayın. Anında WCAG AA ve AAA notları.

Metin rengi

rgb(59, 130, 246)

Detayları görüntüle →

Arka plan rengi

rgb(255, 255, 255)

Detayları görüntüle →

Kontrast oranı

5.20 : 1

İyi kontrast

A+A

WCAG dereceleri

AA Normal metin (≥ 4.5)✓ Geçti
AA Büyük metin (≥ 3)✓ Geçti
AAA Normal metin (≥ 7)✕ Kaldı
AAA Büyük metin (≥ 4.5)✓ Geçti

Hızlı kahverengi tilki tembel köpeğin üzerinden atlar, normal metin 16px.

Büyük metin 24px kalın

Kontrast denetimi nedir?

Herkes için okunaklı metin

Kontrast oranı, metnin arka planından ne kadar ayırt edildiğini ölçer, 1:1 (aynı renk) ile 21:1 (beyazda siyah) arasındadır. Denetim aracımız, denetçilerin ve tasarım sistemlerinin güvendiği aynı standart olan WCAG göreli ışıklılık formülünü kullanır.

Normal metin için en az 4.5:1 (AA), büyük metin için 3:1 ve AAA için 7:1 hedefleyin. Yayından önce marka renklerinizi, düğme stillerinizi veya fotoğraf üstü metinleri test edin.

Nasıl kullanılır

01

Renkleri seçin

HEX yazın, yerel renk penceresini kullanın veya Beyaz / Siyah / Rastgele hazır ayarlarına basın. Dilediğiniz zaman değiştirin.

02

Ya da fotoğraftan seçin

Fotoğraf simgesine tıklayın, JPG/PNG/WebP yükleyin, sonra fotoğrafa veya çıkarılan paletine tıklayın. Metin / Arka plan hedefini değiştirin.

03

Erişilebilir arayüz yayınlayın

Oranı, AA/AAA notlarını ve canlı önizlemeyi okuyun.

04

Paylaşın ve dışa aktarın

Tam çifti paylaşmak için URL adresini (?text=…&bg=…) kopyalayın, teslim için CSS kopyalayın veya TXT raporu indirin.

Gerçek hayattan örnekler

Gövde metni 16px: #FFFFFF üstünde #767676 (4.54:1 geçti) ve #999999 (2.85:1 kaldı)

En gerçek kontrol budur. İkincil gri metin temiz görünür ama açık griler kalır. Yukarıdaki iki çifti de deneyin: AA sınırını geçmek için soluk metni #767676 veya #595959 tonuna koyultun. Küçük uzun metinler tam 4.5:1 ister.

Düğme yazıları: mavide beyaz

En çok test edilen arayüz kontrolü. Canlı maviler (yaklaşık 3.9:1) yalnızca büyük metni geçer. Normal boy yazılar için düğme zeminini yaklaşık 5-6:1 olacak şekilde koyultun. Normal, fareyle üzerine gelme ve devre dışı durumları ayrı test edin.

Gövde metni içindeki bağlantılar

Kullanıcılar bağlantı mavisini gövde arka planıyla yapıştırıp yalnızca renkle ayırt edilen bağlantıların 4.5:1 değerini geçip geçmediğini görür. Geçmezse bağlantıyı koyultun veya alt çizgi ekleyin (renk tek başına tek ipucu olmamalı).

Girdiler, kenarlıklar ve küçük 13px yazılar

Kontrastın öldüğü yer burasıdır: girdi kenarlıkları, onay kutuları ve 13px açıklamalar. Kenarlık/arayüz 3:1 ister. 13px açıklamalar gövde gibi 4.5:1 ister. Kenarlık grinizi ve alan arka planınızı buraya yapıştırın.

24-32px başlıklar ve grafikler

Büyük metin (24px üstü veya 19px kalın üstü) yalnızca 3:1 ister, simgeler, grafik çizgileri ve odak halkalarıyla aynı. Başlıkları, simgeleri ve veri görselleştirme çizgilerini gövde metninden ayrı çiftler olarak test edin.

Fotoğraf ve geçiş üstü metinler

En iyi fotoğraf kullanımı: ana görseli yükleyin, başlığın arkasındaki en açık ve en koyu piksellere tıklayın. Biri kalırsa gölge perdesi veya metin gölgesi ekleyip karışmış rengi yeniden test edin. Geçişin tek durağını test etmeyin.

Sık sorulan sorular

1Hangi WCAG kontrast oranı gerekli: AA mı AAA mı?
En çok sorulan soru. AA: normal metinde 4.5:1, büyük metinde 3:1, çoğu site için yasal ve pratik hedeftir. AAA: normalde 7:1, büyükte 4.5:1, yüksek erişilebilir içerik içindir. Çoğu ekip AA yayınlar. Dördünü de notluyoruz, ikisini de görürsünüz.
2Yazı boyu ve kalınlığı gereksinimi değiştirir mi?
Evet, en yaygın ikinci soru. Büyük, 24px üstü normal veya 19px üstü kalın demektir (18pt / 14pt kalın). Büyük metin AA için yalnızca 3:1 ister. Gövde ve başlıkları ayrı test edin: aynı çift gövdede kalıp başlıkta geçebilir.
3Kalan kombinasyonu markayı bozmadan nasıl düzeltirim?
En iyi kullanıcı akışı: tonu koruyun, açıklığı kaydırın. Eşiği geçene kadar metni koyultun veya arka planı açın. Ya da kalan rengi büyük metin ve simgelerle sınırlayın (3:1), fotoğrafların üstüne perde veya dış çizgi ekleyin ya da gövde metni için uyumlu daha koyu bir tonla eşleştirin.
4Geçiş, fotoğraf veya şeffaflığı kontrol edebilir miyim?
Denetim araçları düz çiftlerde çalışır, bu yüzden kullanıcılar en kötü pikselleri test eder: ana görseli yükleyin, metnin arkasındaki en açık ve en koyu noktalara tıklayıp ikisini de test edin. Opaklık için karışmış arayüzün ekran görüntüsünü alıp işlenmiş pikseli örnekleyin, %50 katman ham HEX değildir.
5Bağlantı, düğme, girdi ve simgeleri kontrol etmek gerekir mi?
Evet, en çok test edilen arayüz seti. Düğme ve bağlantılar metin oranlarını ister (normalde 4.5:1). Girdi kenarlıkları, onay kutuları, simgeler, grafik çizgileri ve odak halkaları komşu renklere karşı 3:1 metin dışı değer ister. Her durumu test edin: varsayılan, fareyle üzerine gelme, odak, devre dışı.
6Damlalık ve ekrandan seçme nasıl kullanılır?
Fotoğraf simgesine tıklayın, herhangi bir ekran görüntüsü yükleyin veya yapıştırın, sonra üstteki Metin veya Arka plan anahtarıyla herhangi bir piksele tıklayarak yükleyin. Hızlı varyantlar için palet renklerine tıklayın.
7Mobil uygulamalar ve karanlık modda çalışır mı?
Aynı ışıklılık matematiği iOS/Android ve koyu temalar için geçerlidir. Kullanıcılar iki modu ayrı kontrol eder, açıkta geçen çift koyuda genelde kalır. Dışarıda parlak görüntüleme dahil her temayı ayrı test edin.
8Sonucu paylaşabilir, kaydedebilir veya otomatikleştirebilir miyim?
URL adresini (?text=…&bg=…) kopyalayarak tam çifti paylaşın, teslim için CSS kopyalayın veya TXT raporu indirin. Uzman kullanıcılar çiftleri belgelere ekler veya marka jeton matrislerini tek tek test eder.

Diğer renk araçlarını keşfet

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

HEX RGB HSL HSV CMYK LAB

Palet Oluşturucu

Rastgele uyumlar + görsel modu

Görsel Renk Seçici

Herhangi bir görselden piksel seç

Gradyan Oluşturucu

Doğrusal, radyal ve konik CSS