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

Renk biçimleri

Ekranlar kırmızı, yeşil ve mavi ışığı karıştırır; web'deki renk biçimlerinin çoğu da aynı sRGB değerlerini yazmanın farklı yollarıdır. HEX ve rgb() kanal değerlerini doğrudan verir, HSL rengi ton, doygunluk ve açıklık olarak tanımlar, OKLCH ise eşit değişikliklerin göze de eşit görüneceği biçimde tasarlanmış bir uzayda tanımlar. XGM dönüştürücüsü tek bir renk için bunların hepsini aynı anda gösterir. Böylece hangi biçime ihtiyacınız varsa, değeri elle hesaplamadan doğrudan kopyalayabilirsiniz.

Renk Dönüştürücü nasıl kullanılır

1. Renk Dönüştürücü aracını açın ve bir rengi HEX, rgb() ya da hsl() olarak girin.
2. İhtiyacınız olan biçimi renk biçimleri tablosundan kopyalayın.
3. Kontrastı kontrol etmek için bir arka plan rengi girin; tersini denemek için Renkleri değiştir düğmesini kullanın.
4. Kontrast oranını ve normal ile büyük metin için AA ve AAA sonuçlarını, önizlemeyle birlikte okuyun.

Tasarımınızın gerçekten kullandığı çiftleri test edin: sayfa arka planı üzerindeki gövde metni, arka plan üzerindeki bağlantı rengi, düğme rengi üzerindeki düğme metni ve giriş alanlarındaki ipucu metni. Her çiftin kendi oranı vardır. Tek bir marka renginin genel olarak yeterli olduğuna karar vermek yerine, o rengin kullanıldığı her yüzeyi ayrı ayrı ölçün. İki renk alanı bağlantıda tutulduğu için, çıkan sonucu bir iş arkadaşınıza olduğu gibi gönderebilir ve aynı çifti daha sonra tek tıklamayla yeniden açabilirsiniz.

WCAG kontrast gereksinimleri

Web İçeriği Erişilebilirlik Kılavuzu (WCAG), kontrastı iki rengin göreli parlaklığı arasındaki bir oran olarak tanımlar: 1:1 (birbirinin aynı) ile 21:1 (beyaz üzerine siyah) arasında değişir. Düşük kontrast, az gören, renk görme eksikliği olan ya da telefonunu güneş altında kullanan herkes için metni okunması zor hâle getirir. Oran matematikseldir; bu yüzden kendi ekranınızda gayet iyi görünen bir çift, ölçüldüğünde yine de eşiğin altında kalabilir. Gözle karar vermek yerine sayıya bakmak, bu tahminleri baştan ortadan kaldırır.

Büyük metin, en az 18 punto (24 CSS pikseli) normal kalınlıkta ya da 14 punto (yaklaşık 18.66 CSS pikseli) kalın yazı anlamına gelir. Önizleme 24 px'lik bir örnek gösterir; böylece büyük metin durumunu yalnızca sayıya değil, gözünüze de bakarak değerlendirebilirsiniz. Başlıklarınız bu eşiğin altında kalıyorsa, onlar da gövde metni kurallarına tabidir.

OKLCH neden işe yarar

HSL'de aynı açıklık değerine sahip renkler parlaklık olarak çok farklı görünebilir: %50 açıklıktaki bir sarı, %50'deki bir maviden çok daha açık görünür. OKLCH'in açıklığı algıyla örtüşecek biçimde tasarlanmıştır; yalnızca tonu değiştirdiğinizde görünür parlaklık yaklaşık olarak aynı kalır. Bu da renk paletleri kurmayı ve kontrastı önceden kestirmeyi kolaylaştırır. Aynı açıklık basamağını paylaşan renkler yan yana konduğunda dengeli bir aile gibi görünür, çünkü hiçbiri diğerlerinin önüne geçmez.

:root {
  --brand: oklch(0.52 0.17 262);
  --brand-hover: oklch(0.46 0.17 262);
  --success: oklch(0.52 0.12 150);
  --danger: oklch(0.52 0.18 27);
}

Güncel tarayıcılar CSS'te oklch() biçimini destekler. OKLCH, geniş renk alanlı ekranların gösterebildiği, sRGB dışındaki renkleri de tanımlayabilir; dönüştürücü sRGB renkleriyle çalıştığı için ürettiği OKLCH değerleri her ekranın gösterebileceği aralıkta kalır. Dolayısıyla buradan kopyaladığınız bir değerin sıradan bir ekranda beklenmedik biçimde kırpılması gibi bir durum ortaya çıkmaz.

Eşiğin altında kalan bir renk çiftini düzeltmek

Bir çift eşiği geçemediğinde önce açıklığı değiştirin, tonu olduğu gibi koruyun. Metin rengini küçük adımlarla koyulaştırmak ya da arka planı açmak, tasarımın karakterini bozmadan çoğu zaman 4.5:1 değerine ulaşmanızı sağlar. OKLCH'te bu özellikle öngörülebilirdir: ilk değeri, yani açıklığı düşürün ve yeniden kontrol edin. Doygunluğu artırmak kontrastı nadiren kurtarır; çoğu durumda rengi yalnızca daha yorucu hâle getirir.

Rozet arka planları ve çizimler gibi dekoratif kullanımlar için daha açık bir tonu ayrı tutun; metin ve simgeler için ise aynı ton ailesinin daha koyu bir üyesini kullanın. Tasarım sistemleri çoğu zaman ikisini ayrı belirteçler olarak tanımlar; böylece kimse yanlışlıkla açık tonu metin için kullanmaz. İsimlendirme de yardımcı olur: bir belirtecin adında yüzey ya da metin geçmesi, doğru kullanımı belgeye bakmadan anlatır. Bu ayrım bir kez yapıldığında, kontrast düzeltmeleri tek bir yerde toplanır.

Koyu temaların ters çevrilmiş değerler yerine kendi kontrollerine ihtiyacı vardır. Saf siyah üzerine saf beyaz metin 21:1 değerine ulaşır ama sert görünebilir; koyu gri bir yüzey üzerinde biraz yumuşatılmış bir metin rengi rahatlıkla AAA'yı geçer ve göze daha kolay gelir. Koyu temada aynı vurgu renginin çoğu zaman biraz açılması gerekir, çünkü orta açıklıktaki renkler koyu zeminde yeterli kontrast vermez. İki temayı da aynı çift listesiyle baştan sona ölçmek, bu farkı görmenin en pratik yoludur.

Erişilebilir renk için pratik ipuçları

• Hem açık hem koyu temayı kontrol edin; beyaz üzerinde geçen bir renk koyu bir yüzeyde çoğu zaman geçemez.
• Anlamı yalnızca renkle aktarmayın; hatalara ve durum rozetlerine metin ya da simge ekleyin.
• Bağlantı rengini gövde metninden yalnızca tonla değil, örneğin alt çizgiyle de ayırt edilebilir tutun.
• Odak göstergelerini hem bileşenin hem de sayfa arka planının üzerinde test edin.
• Renkleri tasarım belirteçleri olarak tanımlayın ki kontrast düzeltmeleri tek bir yerde yapılsın.

Kontrast, erişilebilirliğin yalnızca bir parçasıdır. https://www.example.com gibi bir sayfada otomatik denetleyiciler pek çok kontrast sorununu yakalar, ancak üzerine gelme durumlarındaki, devre dışı kontrollerdeki ve kaplamalardaki gerçek çiftler bunun gibi bir araçla elle kontrol edilmelidir. Otomatik araçlar yalnızca o an ekranda olan durumu ölçer; bir düğmenin basılı hâli ya da bir açılır menünün altındaki gölge çoğu zaman taramaya hiç girmez. Bu yüzden bileşen kitaplığınızdaki her durumu en az bir kez elle ölçmek işe yarar.

SSS

Kaynaklar

• W3C: Web İçeriği Erişilebilirlik Kılavuzu (WCAG) 2.2
• W3C: 1.4.3 Kontrast (Asgari) başarı ölçütünü anlamak
• W3C: CSS Color Module Level 4
• MDN: oklch()