Renk dönüştürücü ve kontrast denetleyici

Bu araç ne yapar

Her zaman tek bir işe dönüşen iki iş. Bir renginiz var ve onu farklı bir gösterimde istiyorsunuz — tasarım dosyası bir şey söyler, stil sayfası başkasını ister. Ve iki renginiz var ve birincideki metnin ikincinin üzerinde okunabilir olup olmadığını bilmeniz gerekir. Bu yüzden bu sayfa iki rengi alır, her birini aynı anda her biçimde gösterir ve aralarındaki kontrastı ölçer.

Her şey tarayıcınızda çalışır. Henüz yayımlanmamış bir marka paleti hakkında hiçbir şeyin dönüştürülmek için bir sunucuya gitmesi gerekmez.

Beş gösterim

Bunların herhangi biri yapıştırılabilir ve hepsi geri çıkar:

• Hex — üç, dört, altı ya da sekiz basamak. Kısa biçimler her basamağı ikiye katlar; böylece #f0a, #ff00aa demektir. Dört ve sekiz basamak son konumda alfa taşır.
• RGB — üç kanal sayı ya da yüzde olarak. Hem rgb(59, 130, 246) hem rgb(59 130 246 / 50%) kabul edilir; virgül biçimi bu aracın geri yazdığıdır, çünkü hâlâ çevrenizdeki çoğu kodun kullandığı budur.
• HSL — derece cinsinden ton, sonra yüzde olarak doygunluk ve açıklık. Tonlar sarar; böylece 480 ve -120 geçerlidir ve 120 ile 240 demektir.
• OKLCH — algısal olarak tekdüze bir uzayda açıklık, kroma ve ton. Açıklık 62.8% ya da 0.628 olarak yazılabilir.
• CSS adları — hepsi 148 tane, rebeccapurple ve her grinin iki yazımı dahil. Bir ad, yalnızca tam eşleştiğinde çıktıda gösterilir.

Bilmeye değer bir tuhaflık: hex, RGB ve OKLCH bir gidiş-gelişten değişmeden sağ çıkar, ama HSL tam olarak çıkmaz. İnsanların gerçekte okuduğu kesinlikte yazdırılır — tam derece, yüzdenin bir ondalığı — ve bu, 16,7 milyon sRGB rengin tümünü adreslemeye yetmez. Bir hex'i HSL'ye çevirin ve geri döndürün, bir kanal bir adım kayabilir. Alternatif, hsl(217.22, 91.19%, 59.8%) gibi kimsenin yapıştırmak istemediği bir çıktı olurdu. Hata, bir gözün görebileceğinin çok altındadır.

OKLCH neden var

HSL, açıklığı tanımlıyormuş gibi görünür ve tanımlamaz. Açıklık sayısı, ışığın değil, sayıların bir özelliğidir. Saf sarı ve saf mavi HSL'de her ikisi de %50 açıklıktır:

yellow  #ffff00   hsl 50% lightness    oklch 96.8% lightness
blue    #0000ff   hsl 50% lightness    oklch 45.2% lightness

Herkes sarının ikisinin daha parlağı olduğunu görebilir ve OKLCH bunu söyler. Bu akademik değil: HSL açıklığını sabit tutup tonu döndürerek kurulan bir paletin neden çılgınca dengesiz görünen bir renk kümesi ürettiğinin ve aynı numaranın OKLCH'de neden bir aile gibi görünen bir küme ürettiğinin nedeni budur. Ayrıca OKLCH'de aynı açıklıktaki iki rengin genellikle aynı arka plana karşı benzer bir kontrasta sahip olmasının da nedenidir — HSL'nin hiç söz veremediği bir şey.

Diğer iki sayı kromadır — kabaca ne kadar renkli, gri için 0'dan — ve derece cinsinden ton. HSL doygunluğunun aksine, kroma hiçbir şeyin yüzdesi değildir; kullanılabilir azami değerin hem açıklığa hem tona bağlı olmasının nedeni budur.

Bir renk gösterilemediğinde

OKLCH, sıradan bir ekranın üretebileceğinden daha çok rengi tanımlayabilir. 0.4 kromada %70 açıklık isteyin, ilkesel olarak var olan ve sRGB'de hiçbir yerde olmayan bir yeşil adlandırmış olursunuz. Araç böyle bir rengi aralığa kırpar ve sessizce başka bir şey vermek yerine onu sRGB dışında olarak işaretler.

Uyarı yalnızca kırpma aldığınız rengi gerçekten değiştirdiğinde görünür. Bu ayrım kulağa geldiğinden daha önemlidir. sRGB kırmızısı tam olarak renk alanı sınırında oturur; bu yüzden onun için yayımlanmış bir OKLCH değeri, dört ondalığa yuvarlandığında, teknik olarak bir saç payı dışarı düşer — on binde iki kadar, ki bu aynı bayta düşer ve görünmezdir. Bunun için uyarmak, sizi uyarıyı yok saymaya alıştırırdı. Geniş renk alanı bir paletinden bir renk ise tam adımlarla kaçırır: Tailwind v4 blue-500, mavi kanalda olası 255'ten 261 ister ve bir sRGB ekranda gerçekten istenen renk değildir.

Kontrast ve üç eşik

Kontrast oranı iki rengin göreli parlaklığını karşılaştırır. İki özdeş renk için 1:1'den beyaz üzerine siyah için 21:1'e kadar gider ve başka hiçbir şey onu geçemez. WCAG 2.1 üç eşik belirler ve bunlar birbirinin yerine kullanılamaz:

• Gövde metni için 4,5:1 — 18pt'nin altında herhangi bir şey ya da kalınken 14pt'nin altında. İnsanlar bir renk «kontrastta kalır» dediğinde kastettikleri budur.
• Büyük metin için 3:1 — 18pt ve üzeri ya da 14pt kalın ve üzeri. Daha büyük harf biçimleri sinyalin daha çoğunu kendileri taşır; bu yüzden çıta daha alçaktır.
• Denetimler ve grafikler için 3:1 — bir girdinin kenarlığı, bir seçmedeki ok, bir grafiğin çubukları. WCAG 2.1'de eklendi ve yaygın olarak kaçırılır, çünkü insanlar metinlerini kontrol eder ve çevresindeki kutuyu asla kontrol etmez.

AAA, ilk ikisini 7:1 ve 4,5:1'e yükseltir. Gövde metninde hedeflemeye değer ve bir marka paletinde gerçekten zor tutturulur; düzenlemelerin ve denetimlerin istediği AA'dır.

O kurallardaki punto boyutları piksel değil, CSS puntosudur: varsayılan ayarlarda 18pt 24px'tir ve 14pt yaklaşık 18,7px'tir. 20px'lik bir başlığın büyük metin sayıldığını varsaymak kolaydır. Sayılmaz.

Yarı saydam renkler

Opak bir arka plan üzerinde yarı saydam metnin kusursuzca iyi tanımlanmış bir kontrast oranı vardır: tarayıcı boyamadan önce iki rengi karıştırır ve bu araç da öyle. %60 saydamlıkta gri metin, indiğinde yalnızca daha açık bir gridir ve indiği şey olarak ölçülür. Alfa kanalını yok sayan araçlar, kimsenin gördüğü renk yerine yazdığınız rengin oranını bildirir; bu her zaman onu abartır — lehinize yanılan bir erişilebilirlik denetçisi, hiç olmamasından daha kötüdür.

Yarı saydam bir arka plan farklı bir durumdur ve araç onu reddeder. İçinden görünen, altında ne varsa ona bağlıdır; bu, bu sayfadaki iki rengin yanıtlayabileceği bir şey değildir. Arka planı gerçekte bindirildiği renge çözün ve onu ölçün.

Oranın size söylemediği

Geçen bir oran bir alt sınırdır, bir hüküm değil. Kapsamadığı üç şey:

• Renk körlüğü. Özdeş parlaklıkta kırmızı ve yeşil, 1:1'e yakın bir kontrast oranına sahiptir ve herkes için ayırt edilemez — ama iki renk oranı geçebilir ve yine de iki durumu ayıran tek şey olabilir; bu, onları ayırt edemeyen herkes için başarısız olur. Anlamı asla yalnızca tonda taşımayın.
• İnce yazı. Formül, çizgi kalınlığı hakkında hiçbir şey bilmez. 4,5:1'de bir saç teli kalınlığı, 4:1'de normal bir kalınlıktan daha zor okunabilir.
• Formülün kendisi. WCAG 2 kontrastının, koyu arka planlar üzerinde açık metne haksız olduğu bilinir; okunduğundan daha yüksek hissettiren oranlar bildirir. WCAG 3 için taslaklanan APCA bunu daha iyi modeller — ama normatif değildir, henüz hiçbir denetim onu kabul etmez ve birbiriyle çelişen iki puan göstermek kimseye yardım etmezdi. Burada tartışılıp yukarıda yazdırılmamasının nedeni budur.

Sonuçları kendi kodlarıyla karşılaştıran herkes için bir uygulama notu: parlaklık formülü 0.03928 eşiğini kullanır; bu, güncel sRGB tanımındaki 0.04045'ten çok az farklıdır. WCAG eski değeri belirtir; bu yüzden burada kullanılan değer odur. Belirtimle eşleşmek, içsel olarak derli toplu olmaktan daha önemlidir ve fark asla bir geçişi bir kalıya çevirmez.