Renk

Sitenin tanımladığı 11 renk değeri bunlardır; token dosyasından, dosyadaki sırayla okunurlar. Sitedeki diğer her renk bu tokenların bir karışımıdır. Her örnek canlı tokenla boyanır; altında o rengin kâğıda ve mürekkebe karşı kontrastı, normal boy metin ölçütüyle derecelendirilmiş olarak yer alır.

Oranlar iki ondalığa aşağı yuvarlanır. Normal boy metinde AA en az 4,5:1, AAA en az 7:1 demektir; Geçmez, oranın 4,5:1'in altında kaldığını gösterir. Bir çizginin ya da yüzeyin metin ölçütünü geçmesi beklenmez: tokenın ne için kullanıldığını her örneğin altındaki açıklama söyler.

Paleti dört rol karşılar: mürekkep, sıcak bir nötr dizi, tek bir vurgu ailesi ve raw. Her rol kullanım hâliyle gösterilir; altında tokenları ve token dosyasındaki hex değerinden hesaplanan OKLCH koordinatları yer alır.

İki renk yapıyı göstermenin ötesinde anlam taşır. accent doğrulanmış tek sinyaldir. Kanıt sahnelerinde raw, değişmiş ama doğrulanmamış her şeydir. raw'ın neden var olduğunu token dosyası açıklar: anlam için tek bir renk olsaydı, gürültüyü ve sinyali birlikte gösteren bir sahne tek renkli bir grafiğe dönerdi.

Renk tek başına anlam taşımaz.

accent ile raw parlaklıkta birbirine yakındır, OKLCH L değerleri 0,553 ve 0,517; aralarındaki kontrast yalnızca 1,30:1. Onları ayıran tondur. Bu yüzden sahne ikisini yönle, işaretlerin biçimiyle ve her işaretin etiketiyle de ayırır; iki tonu ayırt edemeyen biri de sahneyi okuyabilir. Dar ekranda etiketler açıklama kutusuna taşınır.

Kararı kanıt boyar.

Zero Door sayfasındaki karar sahnesi tek bir vakayı çizer ve rengini kanıta bırakır. Kapsül, içinde sözcük olmadan ink-subtle bir çerçeve olarak doğar. 3 başarısız kanıtın her biri onu raw ile eşit bir parça daha doldurur. Hiçbir yöne bir şey bulmayan 3 nötr kanıtın her biri ise üst kenarında ink-subtle bir çentik bırakır ve renk eklemez. Son parça dolarken çerçeve raw olur; sözcük, Şüpheli, ancak o zaman paper ile açılır. raw, onu hak ettiren kanıttan önce hiçbir zaman boyanmaz.

Buradaki her oran derleme sırasında token değerlerinden WCAG 2.x formülüyle hesaplanır ve iki ondalığa aşağı yuvarlanır; böylece bir eşiğin altında kalan çift hiçbir zaman geçiyormuş gibi görünmez. İlk tablo kullanımdaki başlıca token üzerine token metin çiftlerini, onları yazan dosyayla birlikte listeler.

Eşiğin altında kalanlar

accent-tint üzerinde ink-subtle 4,44:1'e ulaşır, yani 4,5:1'in altında kalır; bu yüzden accent-tint üzerindeki metin her yerde ink, ink-muted ya da accent-deep ile yazılır. accent üzerinde kâğıt rengi 4,38:1'e ulaşır; birincil düğmenin accent-deep ile dolmasının nedeni budur. Kullanımdaki her çift 4,5:1'e ulaşır, dolayısıyla büyük metinde AAA'yı da geçer.

Karışım zemin üzerinde metin

Bazı zeminler token değil, bir tokenın kâğıtla karışımıdır; bileşen onu yerinde, OKLab'de color-mix ile yazar. Aşağıdaki oranlar bileşenin yazdığı ifadenin aynısından hesaplanır ve bir test o ifadeyi dosyadan okur.

Çizgiler ve odak halkası

Metin dışı kontrast, sayfayı anlamak ya da kullanmak için bir çizgiye veya şekle ihtiyaç duyulan yerde 3:1 ister. Odak halkası 2px'lik bir accent çerçevedir ve düşebileceği her yüzeyde, mürekkep dahil, 3:1'i aşar. Sitenin formlarındaki alanların, yani iletişim formunun, eylem çağrısı bandının ve sözlük filtresinin kenarı ink-subtle'dır; alanın kendi kâğıt dolgusuna da, çevresindeki paper-2 ve accent-tint yüzeylere de karşı 3:1'i aşar. hair ayırıcısı 3:1'e ulaşmaz ve onun için bu iddiada bulunmayız: içeriği ayırır, içeriğin anlamı ise kendi metnindedir.

Sitenin tek bir teması var, o da açık. Mürekkep yerel bir panel olarak görünür: Güven merkezindeki security.txt dosyası, araştırmadaki onaltılık döküm, Zero Door sayfasındaki kanıt şeridi, görsellerin üzerindeki etiketler ve damgalar. Mürekkep üzerinde metin kâğıt rengindedir; ikincil metin kâğıt ile mürekkebin karışımından gelir; vurgulanan metin accent-tint'tir. Onaltılık döküm bunun istisnasıdır: eşleşen baytları raw bir karışımla işaretler, tarama çizgisini accent ile çizer.

# Zerone Security vulnerability reporting (RFC 9116)# Please do not report security issues in public channels.Contact: mailto:security@zeronesecurity.comEncryption: https://zeronesecurity.com/.well-known/pgp-key.txtAcknowledgments: https://zeronesecurity.com/trust#acknowledgementsPolicy: https://zeronesecurity.com/trust#disclosureExpires: 2027-09-01T00:00:00.000ZPreferred-Languages: en, trCanonical: https://zeronesecurity.com/.well-known/security.txt

Token değil, karışım.

Mürekkep üzerindeki metin için bir token yok, bir karışım ölçeği de tanımlı değil. Her panel adımlarını satır içinde color-mix(in oklab, var(--color-paper), var(--color-ink) N%) olarak türetir; aşağıdaki adımlar kullanımda olanlardır ve her biri onu yazan dosyaya karşı denetlenir. Metin adımları N = 25 ile N = 45 arasındadır ve en zayıfı bile mürekkep üzerinde 5,17:1'e ulaşır. Daha yüksek adımlar nokta ve ayırıcı çizgidir, metinde kullanılmaz.

Mürekkep üzerinde vurgu rengi accent-tint'tir.

Koyu bir panelde metin taşıyan bakır yeşili accent-tint'tir: 15,07:1. Mürekkep üzerinde accent yalnızca 3,78:1'e, accent-deep ise 2,49:1'e ulaşır; bu yüzden ikisi de orada metin taşımaz. Mürekkep üzerinde odak halkasını ve onaltılık dökümün tarama çizgisini yine accent çizer, çünkü bir çizgi için gereken eşik 3:1'dir.

Üç çift de tek bir kurala uyar ve onu bir test denetler: hiçbir bileşen metni accent ile yazmaz. Birincil düğme kuralın kendine düşen yarısını bir yorumda da söyler: kâğıt rengi metnin arkasında accent değil, accent-deep. Düğme metni 600 ağırlıkta 14px'dir; WCAG bunu normal boy metin sayar, yani 4,5:1 geçerlidir.

Dolu düğmeler

Küçük bakır yeşili metin

Mürekkep üzerinde vurgulanan metin

Ortak düğmeler ve bağlantılar, üzerine gelme ve odak durumlarını bir kez, sitenin stil dosyasında tanımlar. Aşağıda her biri zorlanmış durumunda, stil dosyasının yazdığı kuralla boyanmış olarak ve metninin zemine karşı oranıyla gösterilir. Üzerine gelmek bir düğmenin metin rengini hiç değiştirmez; odak ise her öğede aynı 2px'lik accent halkadır. Stil dosyası halkayı öğeden 3px uzağa koyar, bazı bileşenler bu boşluğu kendileri belirler (bkz. Erişilebilirlik).

Birincil düğmede üzerine gelmek accent-deep'i ink ile karıştırarak koyulaştırır. Mürekkep düğmede ink'i paper'a doğru açar, çerçeveli düğmeyi paper-2 ile doldurur, bir bağlantının metnini ise accent-deep yapar.

Tokenlar bir kez, önce varsayılan paleti silen bir Tailwind @theme bloğunda tanımlanır. Bileşenler onları kendi kapsamlı stillerinde var(--color-ad) ile okur.

@theme {
  --color-*: initial;
  --color-transparent: transparent;
  --color-current: currentColor;
  --color-paper: #fdfaf6;
  --color-paper-2: #f6f3ee;
  --color-hair: #e2dfdb;
  --color-hair-2: #cdcac6;
  --color-ink: #0f1c26;
  --color-ink-muted: #5c5753;
  --color-ink-subtle: #736d69;
  --color-accent: #00847e;
  --color-accent-deep: #006560;
  --color-accent-tint: #d9f5f3;
  --color-raw: #a9432c;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
}

.btn-ink {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.link:hover {
  color: var(--color-accent-deep);
}

@theme bloğu text-ink-muted ya da bg-paper-2 gibi yardımcı sınıflar da üretir. Bugün hiçbir bileşen onları kullanmaz: bileşenlerdeki her renk bir var(--color-*) başvurusu ya da bunların karışımıdır. Bir bileşen paletin karşılamadığı bir adıma ihtiyaç duyduğunda, koyu panellerin yaptığı gibi onu yerinde, OKLab'de color-mix ile karıştırır.

Token dosyasını indirin: tokens.css

Bu sayfadaki bir kural ya her değişiklikte koşan bir testle denetlenir ya da incelemenin koruduğu bir kural olarak etiketlenir.

• 11 renk değeri sabitlenmiştir.

  NedenBir renk ancak bilerek değişir. Test her tokenı tam değeriyle listeler; paleti değiştirmek, incelemede testi de değiştirmek demektir.

  TestHer değişiklikte bir testle korunur.

• Token dosyasında saf siyah ya da beyaz yok.

  NedenOnların yerini ink ve paper tutar: soğuk mürekkep ve sıcak kâğıt, dilin görünüşünün bir parçasıdır. Test ikisinin de hex, anahtar sözcük, rgb() ve oklch() biçimlerini reddeder.

  TestHer değişiklikte bir testle korunur.

• Yayına çıkan hiçbir stil dosyasında saf siyah ya da beyaz yok.

  NedenKapı derleme çıktısındaki her CSS dosyasını ve her HTML sayfasının satır içi <style> bloklarını bildirim bildirim okur. black ve white anahtar sözcüklerini, üç, dört, altı ya da sekiz haneli hex'i, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() ve color() biçimlerini ve satır içi SVG resimlerinin içindeki renkleri yakalar. Tamamen saydam bir renk sayılmaz. Bir çatı varsayılanı, Tailwind'in ring-offset rengi, tanımlandığı iki yerde dışarıda bırakılır. Satır içi style öznitelikleri okunmaz: tasarım sayfaları ürünün kendi renklerini orada boyar.

  TestHer değişiklikte bir testle korunur.

• Tailwind'in varsayılan paleti sıfırlanmıştır.

  NedenPalet silindiğinde bg-red-500 gibi hazır renk sınıfları hiç oluşmaz. Sınıf adına yazılan keyfi bir değer yine çalışırdı; hiçbir bileşen böyle bir değer yazmaz.

  TestHer değişiklikte bir testle korunur.

• Bakır yeşili metin accent-deep kullanır, accent kullanmaz.

  Nedenaccent-deep, paper ve paper-2 üzerinde 4,5:1'i tutar; accent tutmaz (paper üzerinde 4,38:1). Test her bileşeni ve stil dosyasını okur; herhangi biri metni ya da SVG metnini accent ile yazarsa düşer. Yalnız bu tasarım sayfalarının bileşenlerini atlar; yanlış kullanım örneklerini onlar bilerek çizer.

  TestHer değişiklikte bir testle korunur.

• Kontrast tablolarındaki her metin çifti, onu yazan kurala karşı denetlenir.

  NedenTablolar veridir, test de aynı veriyi okur. Tablonun gösterdiği dosyada metin rengini ve zemini yazan kuralları bulur ve oranı denetler: kullanımdaki çiftler 4,5:1'e ulaşır, eşiğin altında kalanlar altında kalır. Doğruluğunu yitiren bir kaynak, test koşusunu düşürür.

  TestHer değişiklikte bir testle korunur.

• axe hiçbir sayfada kontrast ihlali bulmaz.

  NedenToken oranları işin yarısıdır. axe derlenmiş her sayfayı ekrana geldiği hâliyle, metnin gerçekten üzerinde durduğu yüzeyle denetler; koşu sıfır ihlalle bitmek zorundadır. axe, karar sahnesi ya da onaltılık döküm gibi resim olarak işaretlenmiş görsellerin içindeki metni görmez; onlar için denetim bu sayfadaki tablolardır.

  TestHer değişiklikte bir testle korunur.

• Bileşenler düz bir renk değeri yazmaz; var(--color-*) kullanır.

  NedenTek kaynak, bir token değişikliğinin her bileşene ulaşması demektir. Token değerleri yalnızca token dosyasının okunamadığı yerlere kopyalanır: tarayıcı tema rengi, derleme sırasında çalışan paylaşım kartı çizicisi, logo SVG dosyaları ve ayrı dağıtılan form servisinin kayıt listesi. Kaynaklar sayfası bu dosyaları listeler; listenin eksiksiz kaldığını bir test denetler.

  İncelemeBir testle değil, incelemeyle korunur.

• Renk hiçbir zaman tek işaret değildir.

  Nedenaccent ile raw esas olarak tonla ayrılır; parlaklıkta aralarında yalnızca 1,30:1 var. Sahneler onları yön, işaret biçimi ve etiketle de ayırır; anlam renk olmadan da yerinde kalır.

  İncelemeBir testle değil, incelemeyle korunur.

Zero Door arayüzü aynı dilin sakin üslubunu konuşur. OKLCH ile yazılmış kendi tokenları, bir açık ve bir koyu teması vardır ve koyu temayla açılır. Aşağıda 15 renk tokenından 10 tanesi yer alır; değerler token dosyasından gelir ve dosyanın son değişikliği 2026-08-23 tarihlidir. Kontrast burada her temanın üç yüzeyine karşı hesaplanır.

Açık tema

Koyu tema

Bağlantı metninde marka rengi

Arayüzde bağlantıları da brand boyar. Koyu temada raised yüzeyinde 4,36:1'e ulaşır, yani 4,5:1'in altında kalır. Ne ürünün kontrast testi ne de buradaki denetim brand'i listeler; bu yüzden yukarıdaki örnek bu açığı gizlemek yerine gösterir.

İkisinin buluştuğu yer.

Ürünün açık temadaki tokenlarından 6 tanesi bir site tokenıyla tam olarak aynı sRGB değerine çözülür; tablo bunu iki dosyadan hesaplar. Birincil metinde yolları ayrılır: site onu ink ile, ürün ise sıcak, siyaha yakın bir tonla yazar; ürün, site mürekkebine yakın brand rengini eylemlere ayırır.

Ürün tokenlarının anlık görüntüsünü indirin: product-tokens.json

Kenarlar ince çizgidir.

Ürünün kenar tokenları sitedekiler gibi ince çizgidir ve yüzeye karşı 3:1'in epey altında kalır: açık temada 1,27:1, koyu temada 1,35:1. Onlar için 3:1 iddia etmeyiz.

• Ürünün metin ve sinyal tokenları iki temada da üç yüzeyin üçünde 4,5:1'e ulaşır.

  NedenBu sayfadaki değerler ürün token dosyasının eşitlenmiş bir anlık görüntüsüdür. Test bu anlık görüntüde fg, fg-muted, fg-subtle ve dört sinyal rengini yeniden denetler; bu çiftlerden birini bozan bir eşitleme üründe olduğu gibi burada da düşer. brand listede yok.

  TestHer değişiklikte bir testle korunur.

• Ürün kenarları için 3:1 iddiası yok.

  NedenTest kenar tokenını yüzeye karşı 3:1'in altında sabitler; aksini iddia eden bir sayfa geçen bir testle çelişmiş olur.

  TestHer değişiklikte bir testle korunur.

• Önem derecesi olmayan grafik serileri önem derecesi renklerini ödünç almaz.

  NedenÜrün token dosyası onlar için ayrı bir kategorik palet tutar ve nedenini söyler: yoksa yan yana iki grafik yüksek bir alarmı ve değişmiş bir dosyayı aynı kehribar renge boyardı.

  İncelemeBir testle değil, incelemeyle korunur.