Renk Dönüştürücü - HEX, RGB, HSL ve WCAG Kontrastı
Renk dönüştürücü ve kontrast ölçer
HEX, rgb(), hsl() ya da bir CSS renk adı — dördü de okunur.
Tonlar
Aynı renk tonu, on bir farklı açıklıkta. Birine tıklayınca geçerli renk olur.
Kontrast
İki renk arasındaki oran; WCAG'in tanımladığı biçimde ölçülüyor.
| Çift | Oran | Seviyeler |
|---|
Eşikler: normal metin 4,5 (AA) ve 7 (AAA); 18pt'ten ya da 14pt kalından itibaren 3 ve 4,5; arayüz ögeleri ve grafikler 3.
En yakın geçen renk
Yalnızca açıklık kayar — ton ve doygunluk yerinde kalır, yani renk hâlâ tanınabilir biçimde sizinkidir.
Önizleme
Oran bir sayıdır, bir hüküm değil: bir renk 4,5'i geçtiği hâlde ince bir yazı tipinde hâlâ zor okunabilir.
Büyük başlık metni
Çoğu sayfanın paragraflarda gerçekten kullandığı boyutta normal gövde metni.
Düğme ya da denetimBu araç ne yapar
Bir rengi bir gösterimden diğerine çevirmek beş satırlık aritmetiktir. Asıl zor soru, o renkteki bir yazının gerçekten okunup okunamayacağıdır ve o cevap, çoğu aracın atladığı bir adım ister. İkisi de bu sayfada, yazdığınız aynı renk üzerinden.
Nasıl kullanılır
- 1 Herhangi bir gösterimde renk yazın ya da seçiciyi kullanın.
- 2 İhtiyacınız olan gösterimi kopyalayın ya da bir tona tıklayıp ona geçin.
- 3 Kontrast tablosunu okuyun. Geçmez işaretli her satır, birileri için okunması zor demektir.
Aynı renk tonu HSL'de neden farklı görünür
HSL tam dereceye ve tam yüzdeye yuvarlar; bu yüzden HSL'e çevirip geri dönmek her zaman başladığınız bayt değerlerini geri vermez. Bu nedenle burada gösterilen HEX her zaman girdiğiniz değerden türetilir, HSL üzerinden gidip gelen bir değerden değil — aksi hâlde alan her tıklamada bir adım kayardı.
Kontrast sayıları ne anlama geliyor
Oran, iki özdeş renk için 1:1'den, beyaz üzerine saf siyah için 21:1'e kadar gider. Aşağıdaki eşikler, aracın kontrol ettiği değerlerdir.
| 4.5:1 | Normal gövde metni, WCAG AA |
| 3:1 | Büyük ya da kalın metin, WCAG AA |
| 7:1 | Normal gövde metni, WCAG AAA |
| 21:1 | Ulaşılabilecek en yüksek oran: beyaz üzerine siyah |
Çoğu aracın atladığı adım
Bağıl parlaklık, kanal değerlerinin ortalaması değildir. Her kanal önce doğrusallaştırılmalıdır; çünkü bir HEX kodundaki sayılar ışıkla orantılı değil, gama kodludur. Bu adımı atlarsanız oran yine makul bir sayı olarak çıkar, yalnızca yanlış olur — ve hata, arayüz renklerinin çoğunun bulunduğu orta tonlarda en büyüktür.
Kontrast gereklidir, yeterli değildir
Bir çift 4,5:1'i geçebilir ve yine de kötü bir tercih olabilir: renk körlüğü bazı çiftleri yüksek oranlarda bile ayırt edilemez kılar ve anlam hiçbir zaman yalnızca renkle taşınmamalıdır. Buradaki geçer notunu, tasarım hakkında bir hüküm değil, alt sınırın aşılması olarak görün.