Karşıtlık ve Vurgu

Önceki iki ders ayrımı hep tek yönlü ele aldı: bir ögeyi öne çıkarmak. Bu bakış, ekranda tek bir öge varmış gibi davranır. Oysa vurgu paylaşılan bir kaynaktır. Katalog kaydının altındaki eylem satırında üç düğme vardır — “Ödünç al”, “Listeye ekle”, “Paylaş” — ve üçünü de öne çıkarmak, hiçbirini öne çıkarmamakla aynı sonucu verir.

Bu ders vurguyu bir bütçe olarak ele alır. Bütçenin ölçülebilmesi için önce görsel ağırlığın hesaplanması, hesaplanabilmesi için de karşıtlık ile kontrast oranının birbirinden ayrılması gerekir.

Karşıtlık İlke, Kontrast Oranı Ölçüdür

Türkçede iki ayrı kavram aynı sözcüğe sıkışabilir, bu yüzden kurs boyunca ayrım korunacaktır.

Karşıtlık (contrast) algısal bir ilkedir: iki öge arasındaki fark, o ögelerin ayrı şeyler olduğunu ilan eder. Karşıtlık renkle kurulabileceği gibi boyutla, biçimle, yönle, dokuyla ya da boşlukla da kurulur. Büyük bir başlığın küçük bir üstveri satırıyla ilişkisi bir boyut karşıtlığıdır; yatay bir listedeki tek dikey öge bir yön karşıtlığıdır.

Kontrast oranı (contrast ratio) ise ölçülen bir niceliktir: iki rengin bağıl parlaklıklarından türetilen ve 1:1 ile 21:1 arasında değişen tek bir sayı. Bir kontrast oranı yalnız renk çifti için tanımlıdır; bir boyut karşıtlığının kontrast oranı yoktur.

Ayrımın pratik sonucu şudur: “bu iki öge arasında yeterli karşıtlık var mı” sorusu, tek başına kontrast oranı ölçerek yanıtlanamaz. Kontrast oranı yalnız bir kanalı ölçer; ilke tüm kanalları kapsar.

Görsel Ağırlığı Hesaplamak

Bir ögenin dikkat çekme gücü, önceki derste kanallar üzerinden niteliksel olarak ele alındı. Eylem satırı gibi dolgulu ve çerçeveli ögelerin bulunduğu bir bölgede bu güç sayısallaştırılabilir. Bu kursun kullandığı model şudur:

Görsel ağırlık, zeminden ayrışan yüzeylerin alanı ile o yüzeylerin zeminle bağıl parlaklık farkının çarpımıdır. Dolgu ve kenar çizgisi ayrı ayrı hesaplanır, toplanır.

Model metni yok sayar; ölçtüğü şey renkli yüzeydir. Bu bir eksiklik değil, kasıtlı bir sadeleştirmedir: eylem satırında kararı belirleyen şey düğmenin dolgusu ve çerçevesidir, etiket metninin kendisi değil.

// 03-vurgu.mjs — eylem satirindaki gorsel agirligin ve vurgu paylarinin hesabi

// Model: bir ogenin gorsel agirligi, zeminden ayrisan alanlarinin
// (alan x bagil parlaklik farki) toplamidir. Dolgu ve kenar cizgisi ayri hesaplanir.
// Metin agirligi bu modelde yok sayilir; olculen sey renkli yuzeydir.

function kanal(v) {
  const s = v / 255;
  return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
}
function parlaklik(hex) {
  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
  return 0.2126 * kanal(r) + 0.7152 * kanal(g) + 0.0722 * kanal(b);
}
function kontrast(a, b) {
  const [x, y] = [parlaklik(a), parlaklik(b)].sort((p, q) => q - p);
  return (x + 0.05) / (y + 0.05);
}

const ZEMIN = "#ffffff";
const VURGU = "#1b4d3e";

function agirlik(oge) {
  const alan = oge.genislik * oge.yukseklik;
  const dolgu = oge.dolgu ? alan * Math.abs(parlaklik(oge.dolgu) - parlaklik(ZEMIN)) : 0;
  const cevre = 2 * (oge.genislik + oge.yukseklik);
  const kenar = oge.kenar ? cevre * oge.kenarKalinligi * Math.abs(parlaklik(oge.kenar) - parlaklik(ZEMIN)) : 0;
  return dolgu + kenar;
}

function senaryo(ad, ogeler) {
  const agirliklar = ogeler.map((o) => ({ ad: o.ad, deger: agirlik(o) }));
  const toplam = agirliklar.reduce((t, a) => t + a.deger, 0);
  console.log(`${ad}`);
  console.log("  oge              gorsel agirlik   pay");
  for (const a of agirliklar) {
    console.log(
      `  ${a.ad.padEnd(15)} ${a.deger.toFixed(0).padStart(14)} ${((100 * a.deger) / toplam)
        .toFixed(1)
        .padStart(5)}%`
    );
  }
  console.log(`  toplam agirlik: ${toplam.toFixed(0)}   en buyuk pay: ${(
    (100 * Math.max(...agirliklar.map((a) => a.deger))) / toplam
  ).toFixed(1)}%`);
  console.log("");
}

// A: tek birincil eylem. Ikincil cerceveli, ucuncul ciplak.
senaryo("senaryo A  bir birincil eylem", [
  { ad: "Odunc al", genislik: 120, yukseklik: 40, dolgu: VURGU, kenar: null, kenarKalinligi: 0 },
  { ad: "Listeye ekle", genislik: 128, yukseklik: 40, dolgu: null, kenar: VURGU, kenarKalinligi: 1 },
  { ad: "Paylas", genislik: 76, yukseklik: 40, dolgu: null, kenar: null, kenarKalinligi: 0 },
]);

// B: uc eylem de dolgulu.
senaryo("senaryo B  uc dolgulu eylem", [
  { ad: "Odunc al", genislik: 120, yukseklik: 40, dolgu: VURGU, kenar: null, kenarKalinligi: 0 },
  { ad: "Listeye ekle", genislik: 128, yukseklik: 40, dolgu: VURGU, kenar: null, kenarKalinligi: 0 },
  { ad: "Paylas", genislik: 76, yukseklik: 40, dolgu: VURGU, kenar: null, kenarKalinligi: 0 },
]);

// C: birincil ayni kalir, ikincil notr griye bastirilir.
senaryo("senaryo C  ikincil bastirilmis", [
  { ad: "Odunc al", genislik: 120, yukseklik: 40, dolgu: VURGU, kenar: null, kenarKalinligi: 0 },
  { ad: "Listeye ekle", genislik: 128, yukseklik: 40, dolgu: null, kenar: "#767676", kenarKalinligi: 1 },
  { ad: "Paylas", genislik: 76, yukseklik: 40, dolgu: null, kenar: null, kenarKalinligi: 0 },
]);

console.log("kenar renginin zeminle kontrast orani (WCAG 1.4.11 esigi 3:1)");
for (const renk of [VURGU, "#c9c9c9", "#767676"]) {
  const o = kontrast(renk, ZEMIN);
  console.log(`  ${renk}  ${o.toFixed(2)}:1  ${o >= 3 ? "gecer" : "kalir"}`);
}

senaryo A  bir birincil eylem
  oge              gorsel agirlik   pay
  Odunc al                  4517  93.5%
  Listeye ekle               316   6.5%
  Paylas                       0   0.0%
  toplam agirlik: 4834   en buyuk pay: 93.5%

senaryo B  uc dolgulu eylem
  oge              gorsel agirlik   pay
  Odunc al                  4517  37.0%
  Listeye ekle              4819  39.5%
  Paylas                    2861  23.5%
  toplam agirlik: 12197   en buyuk pay: 39.5%

senaryo C  ikincil bastirilmis
  oge              gorsel agirlik   pay
  Odunc al                  4517  94.3%
  Listeye ekle               275   5.7%
  Paylas                       0   0.0%
  toplam agirlik: 4792   en buyuk pay: 94.3%

kenar renginin zeminle kontrast orani (WCAG 1.4.11 esigi 3:1)
  #1b4d3e  9.64:1  gecer
  #c9c9c9  1.66:1  kalir
  #767676  4.54:1  gecer

Vurgu Bir Bütçedir

Senaryo A ile B’nin karşılaştırması bu dersin ana bulgusudur. “Ödünç al” düğmesinin görsel ağırlığı iki senaryoda da aynıdır: 4517. Değişmeyen bir ögenin payı 93.5 yüzdeden 37.0 yüzdeye düşer. Düğmeye hiçbir şey yapılmamıştır; yanındakiler değişmiştir.

Vurgu payı bir orandır ve oranın paydası ekrandaki toplam ağırlıktır. Bir ögeyi öne çıkarmanın iki yolu vardır: payı büyütmek ya da paydayı küçültmek. İkinci yol çoğu zaman daha ucuzdur, çünkü ekranda yer tüketmez.

Senaryo B’nin ikinci bulgusu daha rahatsız edicidir. Üç düğme de aynı biçimde çizildiğinde en yüksek payı “Ödünç al” değil, “Listeye ekle” alır: 39.5 yüzde. Sebep basit bir geometridir: etiketi daha uzun olduğu için düğmesi daha geniştir, 128 piksele karşı 120 piksel. Bütün eylemler aynı biçimde çizildiğinde vurgu sırasını belirleyen şey eylemin önemi değil, etiketinin karakter sayısı olur.

Bu, “hepsini öne çıkaralım” kararının neden yalnızca hiyerarşiyi silmekle kalmayıp aynı zamanda yanlış bir hiyerarşi kurduğunu gösterir. Hiyerarşinin yokluğu nötr bir durum değildir; boşluğu rastgele bir sıralama doldurur.

Bastırmanın Sınırı

Payda küçültme yolu senaryo C’de sınanır: ikincil eylemin çerçevesi vurgu renginden nötr griye çekilir. Sonuç 93.5 yüzdeden 94.3 yüzdeye çıkar. Kazanç 0.8 puandır.

Bu küçük sayı önemlidir, çünkü sezgiye aykırıdır. İkincil eylemi soluklaştırmak birincil eylemi belirgin biçimde öne çıkarmaz; asıl fark, ikincil eylemi dolgulu çizmemekten gelir. Senaryo A ile B arasındaki fark 56.5 puan, A ile C arasındaki fark 0.8 puandır. Vurgu bütçesinde kazanç, gürültüyü kısmaktan değil gürültüyü hiç eklememekten gelir.

Bastırmanın bir de alt sınırı vardır. Çerçeve rengi daha da açığa çekilirse görsel ağırlık düşmeye devam eder ama bir noktada çerçeve görünmez olur. Çıktının son bloğu bunu ölçüyor: #c9c9c9 çerçeve zeminle 1.66:1 kontrast oranı verir ve WCAG 1.4.11 ölçütünün metin dışı ögeler için istediği 3:1 eşiğinin altında kalır. #767676 ise 4.54:1 ile eşiği geçer.

Kural şudur: bastırma, ögenin algılanabilirlik eşiğinde durur. Bir ögeyi bastırmak onu ikinci sıraya koymak demektir, görünmez kılmak değil. Eşiklerin nasıl türetildiği ve hangi ölçütün hangi öge sınıfına uygulandığı Karşıtlık ve Erişilebilirlik dersinin konusudur; burada yalnızca bütçenin bir tabanı olduğu saptanmıştır.

Karşıtlığı Renkten Başka Kanallarda Kurmak

Vurgu bütçesi dar olduğu için, bütçeyi tüketmeyen karşıtlık biçimleri değerlidir.

• Boyut karşıtlığı. Katalogda kayıt başlığı ile üstveri arasındaki ayrım, ek renk kullanmadan kurulur. Bedeli dikey yerdir.
• Biçim karşıtlığı. Yuvarlatılmış köşeli bir öge, keskin köşeli ögelerin arasında ayrışır. Bedeli, biçim kararının anlam taşımaya başlamasıdır: yuvarlak köşe bir kez “eylem” demeye başladıysa, süs olarak kullanılamaz.
• Yön karşıtlığı. Dikey akan bir listede yatay bir şerit güçlü ayrışır. Bedeli, yön değişiminin okuma akışını kesmesidir.
• Boşluk karşıtlığı. Çevresi boş bırakılmış bir öge, çevresi dolu ögelerden ayrışır. Bedeli, önceki derste hesaplanan gruplama oranlarının bozulma riskidir.

Bu kanalların ortak özelliği, kontrast oranı ölçüsüne girmemeleridir. Bir arayüzün erişilebilirlik denetiminden geçmesi, karşıtlığının yeterli olduğu anlamına gelmez; denetim yalnız renk kanalını ölçer. Tersi de doğrudur: renk kontrastı eşiği geçemeyen bir ayrım, boyut ya da biçim karşıtlığıyla desteklenerek kurtarılamaz — ölçüt renk kanalı için ayrıca sağlanmalıdır.

Özet

• Karşıtlık algısal bir ilkedir ve renk, boyut, biçim, yön, boşluk kanallarında kurulabilir; kontrast oranı ise yalnız renk çiftleri için tanımlı ölçülen bir niceliktir.
• Görsel ağırlık, zeminden ayrışan yüzeylerin alanı ile bağıl parlaklık farkının çarpımı olarak modellenebilir ve böylece vurgu tartışması sayıya bağlanır.
• Vurgu payı bir orandır; bir ögenin payı, kendisi hiç değişmeden yalnız komşuları değiştiği için düşebilir. Ölçülen düşüş 93.5 yüzdeden 37.0 yüzdeye kadardır.
• Bütün eylemler aynı biçimde çizildiğinde vurgu sırasını eylemin önemi değil etiketin uzunluğu belirler; hiyerarşinin yokluğu nötr değil, rastgeledir.
• Bütçedeki asıl kazanç ikincil ögeyi soluklaştırmaktan (0.8 puan) değil, onu dolgulu çizmemekten (56.5 puan) gelir.
• Bastırmanın tabanı algılanabilirlik eşiğidir; metin dışı ögeler için WCAG 1.4.11 ölçütü 3:1 kontrast oranı ister ve bu eşik bütçe hesabının altına inilemeyeceği sınırı çizer.

Sonraki Adım

Buraya kadar ögeler ayrıldı, gruplandı ve vurgulandı; hepsi tek tek ögelerin özellikleri üzerinden yürüdü. Bir ekranı bir arada tutan şey ise ögelerin kendileri değil, aralarındaki eksenlerdir: sol kenarların hizası, sütun başlangıçları, ağırlığın ekranın iki yanına dağılımı. Sonraki ders hizalama eksenlerinin sayısını bir ölçü olarak kullanır, katalog arayüzünün denge momentini hesaplar ve düzensiz sağ kenarın ne kadar düzensiz olduğunu gerçek bir metin üzerinde ölçer.