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 | AA (4,5:1) | AAA (7:1) |
|---|
Bu 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.