Sonra iki rengi WCAG AA ve AAA'ya göre kontrol edin ve metni ekranda görün. Bir rengi HEX, RGB, HSL, HSV ve OKLCH arasında dönüştürün ve metnin arka planında kolay okunup okunmadığını test edin. Ücretsizdir ve tarayıcınızda çalışır.
Bir renk nasıl dönüştürülür
- Bir renk seçmek için Seç'i kullanın veya Herhangi bir renk alanına bir değer yazın ya da yapıştırın.
- Aynı rengi HEX, RGB, HSL, HSV, OKLCH ve varsa CSS adıyla okuyun.
- İstediğiniz biçimin yanındaki Kopyala'ya veya HEX'i kopyala'ya basın.
Kontrast nasıl kontrol edilir
- Bir Metin rengi ve bir Arka plan rengi seçin veya Ana rengi metin olarak kullan ya da Arka plan olarak kullan'ı kullanın.
- Kontrast oranını ve normal metin, 24px'te Büyük metin, 19px'te Kalın metin ve bir Düğme çerçevesi için AA ve AAA'yı geçip geçmediğini okuyun.
- Çift başarısız olursa geçen önerilen yakın rengi kullanın.
Hangi biçim kullanılmalı
HEX ve RGB bir renkteki kırmızı, yeşil ve mavi ışığı tanımlar ve her yerde çalışır. HSL ve HSV ton, doygunluk ve açıklık ya da parlaklığı tanımlar; bu bir rengi elle ayarlamayı kolaylaştırır. OKLCH en yeni CSS biçimidir: açıklığı renklerin insanlara ne kadar parlak göründüğüyle eşleşir, bu yüzden aynı L'ye sahip iki renk gerçekten eşit açık görünür; bu da onu paletler ve temalar için harika kılar. Tüm modern tarayıcılar CSS'te oklch() destekler.
Kontrast oranı nasıl çalışır
Oran, iki rengin bağıl parlaklığını karşılaştırır; aynı renkler için 1:1'den beyaz üzerine siyah için 21:1'e. Sonuçlar asla yukarı yuvarlanmaz, bu yüzden 4,49:1 AA'yı geçemez. Metin rengi saydamsa önce arka planla karıştırılır. Bir çift başarısız olduğunda her iki taraf için geçen yakın bir renk önerilir.
WCAG AA, normal metin için 4,5:1 ve büyük metin için 3:1 ister. AAA, normal metin için 7:1 ve büyük metin için 4,5:1 ister. Bunları karşılamak az gören insanlara ve parlak bir ekranda okuyan herkese yardımcı olur.
Bu aracın anladığı girdi
# ile veya #'siz üç, dört, altı ve sekiz basamaklı HEX, virgüllü veya boşluklu rgb() ve rgba(), deg, turn veya rad'lı hsl(), hsv(), oklch() ve oklab(), 148 CSS renk adı ve 59, 130, 246 gibi düz sayılar. Eğik çizgiden sonraki veya dördüncü değer olarak alfa korunur.
Kimler kullanır
Tema yapan web tasarımcıları ve geliştiricileri, marka renklerinin okunabilir olduğunu kontrol eden küçük işletme sahipleri, slayt yapan öğrenciler ve bir biçimde rengi olup diğerine ihtiyaç duyan herkes. Bir fotoğraftan renk bulmak için görsel renk seçiciyi kullanın.
Sorular
İyi bir kontrast oranı nedir?
Normal metin için en az 4,5:1 hedefleyin. Daha yüksek daha iyidir ve 7:1 AAA'yı karşılar.
Aynı renk değerleri neden ekranlarda biraz farklı görünüyor?
Ekranların parlaklığı ve rengi değişir. Sayılar aynıdır, ancak ekran nasıl göründüklerini değiştirir.
Bir şey yükleniyor mu?
Hayır. Dönüştürme tarayıcınızda yapılır.