WCAG Kontrast Rehberi: Erisilebilir renkler secmek icin kontrast oranlari ve ornekler

Bir web sitesini açtığınızda metni rahatça okuyor musunuz? Peki güneş altında telefonunuzun ekranında aynı siteyi okumayı denediniz mi? Ya da 60 yaşında birinin aynı deneyimi yaşadığını düşündünüz mü? Renk kontrastı, dijital tasarımda erişilebilirliğin en temel yapı taşlarından biri. WCAG (Web Content Accessibility Guidelines) standartları, herkesin web içeriklerini okuyabilmesi için minimum kontrast oranları tanımlar. Bu yazıda WCAG 2.1 kontrast gereksinimlerini derinlemesine inceleyecek, yaygın hataları gösterecek ve Helmlab ile erişilebilir renkler nasıl seçilir anlatacağız.

Kontrast Neden Bu Kadar Önemli?

Dünya nüfusunun yaklaşık %15'i bir tür görme engeli yaşıyor. Bunun ötesinde, yaşlanmayla birlikte lens sararır ve kontrast duyarlılığı düşer. 60 yaşındaki bir kişi, 20 yaşındaki birine kıyasla %30-40 daha düşük kontrast algılar. Bunlara eklenen çevresel faktörler de var:

Güneş ışığı — Parlak dış ortamda ekran kontrastı dramatik şekilde düşer. Ofiste rahatça okuduğunuz metin, dışarıda görünmez olabilir.
Düşük kaliteli ekranlar — Ucuz monitörler ve eski telefonlar renkleri soluk gösterir, kontrast oranını daha da düşürür.
Renk körlüğü — Erkeklerin %8'i, kadınların %0.5'i bir tür renk körlüğü yaşar. Sadece renge dayalı bilgi iletmek bu kullanıcıları dışlar.
Bilişsel yük — Düşük kontrastlı metin, sağlıklı gözlere sahip kişilerde bile okuma hızını düşürür ve göz yorgunluğu yaratır.

Kısacası kontrast, "güzel görünüm" tercihi değil, kullanılabilirlik gerekliliğidir.

WCAG 2.1 Kontrast Gereksinimleri

WCAG 2.1 standardı iki uygunluk seviyesi tanımlar: AA (minimum) ve AAA (geliştirilmiş).

AA Seviyesi (Minimum)

Normal metin (18px altı): minimum 4.5:1 kontrast oranı
Büyük metin (18px bold veya 24px normal): minimum 3:1 kontrast oranı
UI bileşenleri ve grafikler: minimum 3:1 kontrast oranı

AAA Seviyesi (Geliştirilmiş)

Normal metin: minimum 7:1 kontrast oranı
Büyük metin: minimum 4.5:1 kontrast oranı

AA seviyesi yasal olarak birçok ülkede zorunludur (ADA, EAA). AAA seviyesi ise özellikle kamu hizmetleri, sağlık uygulamaları ve eğitim platformları için şiddetle tavsiye edilir.

Göreceli Luminans (Relative Luminance) Nedir?

Kontrast oranını hesaplamak için önce her rengin göreceli luminansını bulmamız gerekir. Bu, bir rengin insan gözüne ne kadar "parlak" göründüğünü ölçen bir değerdir (0 = tam siyah, 1 = tam beyaz).

Formül üç adımdan oluşur:

Adım 1: sRGB değerlerini [0, 1] aralığına getirin (0-255 ise 255'e bölün).

Adım 2: Gamma düzeltmesini kaldırın (linearize edin):

// Her kanal (R, G, B) için:
if (kanal <= 0.04045)
  linear = kanal / 12.92
else
  linear = ((kanal + 0.055) / 1.055) ^ 2.4

Adım 3: Ağırlıklı toplam ile luminans hesaplayın:

L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear

Katsayılara dikkat edin: yeşil en büyük ağırlığı alır (%71.5) çünkü insan gözü yeşile en hassastır. Mavi ise yalnızca %7.2 ağırlığa sahiptir.

Kontrast oranı ise şöyle hesaplanır:

Kontrast = (L_açık + 0.05) / (L_koyu + 0.05)

L_açık daha parlak rengin luminansı, L_koyu daha koyu rengindir. 0.05 sabiti sıfıra bölünmeyi önler. Sonuç 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasında bir değerdir.

Yaygın Kontrast Hataları

Birçok tasarımcı ve geliştirici farkında olmadan düşük kontrastlı renk kombinasyonları kullanır. En sık karşılaşılan hatalar:

1. Açık gri metin beyaz zemin üzerinde. Bu en yaygın hatadır. Placeholder metin veya devre dışı buton için #a3a3a3 gibi açık griler sıklıkla kullanılır. Beyaz üzerinde kontrast oranı yalnızca 2.2:1'dir — AA'nın yarısından az.

2. Renkli metin beyaz zemin üzerinde. Turuncu (#f59e0b) beyaz üzerinde modern ve çekici görünür ama kontrast oranı sadece 2.1:1'dir. Sarı ve açık yeşil tonları da aynı sorunu yaşar.

3. Renkli metin renkli zemin üzerinde. Kırmızı metin mavi zemin üzerinde (veya tam tersi) "canlı" bir etki yaratır ama kontrast oranı genellikle 2:1'in altındadır. Bu aynı zamanda renk körlüğü olan kullanıcılar için de sorunludur.

4. Pastel tonlar açık zemin üzerinde. Açık mavi (#93c5fd) açık mavi zemin üzerinde (#eff6ff) neredeyse görünmezdir. Kontrast oranı sadece 1.6:1.

Helmlab'ın Yaklaşımı: Algısal Açıklık Ayarı

Geleneksel kontrast araçları genellikle ikili bir sonuç verir: "geçer" veya "kalmaz". Peki ya marka renginiz kontrastı karşılamıyorsa? Rengi tamamen değiştirmek mi gerekiyor?

Helmlab farklı bir yaklaşım sunar. ensureContrast metodu, bir ön plan rengini WCAG minimum kontrast oranına ulaşana kadar sadece açıklık ekseninde ayarlar. Rengin tonu (hue) ve doygunluğu (chroma) korunur — yani marka renginiz hala aynı renk ailesinde kalır, sadece yeterince koyu veya açık olur.

Bu nasıl çalışır?

Ön plan rengini Helmlab'ın algısal Lab uzayına dönüştürür
L (açıklık) ekseninde binary search ile hem koyulaştırma hem açıklaştırma yönünde arar
Orijinal açıklığa en yakın, WCAG oranını karşılayan L değerini bulur
Sonucu sRGB'ye geri dönüştürür ve gamut mapping uygular

Helmlab'ın 13 aşamalı pipeline'ı sayesinde bu açıklık ayarı algısal olarak doğrudur. HSL'de L değerini değiştirmek ton kaymasına neden olabilir; Helmlab'da ton korunur.

Kod Örnekleri

Kurulum

npm install helmlab

Temel Kontrast Kontrolü

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Kontrast oranını hesapla
const ratio = hl.contrastRatio('#3B82F6', '#ffffff');
console.log(ratio); // → 3.68 (AA'yı karşılamıyor!)

// WCAG seviyesini kontrol et
hl.meetsContrast('#3B82F6', '#ffffff', 'AA');  // → false
hl.meetsContrast('#3B82F6', '#ffffff', 'AAA'); // → false
hl.meetsContrast('#1e3a5f', '#ffffff', 'AA');  // → true

Rengi Otomatik Olarak Erişilebilir Yapma

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Mavi (#3B82F6), beyaz üzerinde AA'yı karşılamıyor (3.68:1)
const accessible = hl.ensureContrast('#3B82F6', '#ffffff', 4.5);
// → daha koyu bir mavi döner, hala aynı ton

// Doğrulama
console.log(hl.contrastRatio(accessible, '#ffffff')); // → 4.5+
console.log(hl.meetsContrast(accessible, '#ffffff', 'AA')); // → true

Marka Rengi ile Erişilebilir Palet

import { Helmlab } from 'helmlab';

const hl = new Helmlab();
const brandColor = '#3B82F6'; // Tailwind blue-500

// Farklı zeminler için erişilebilir ön plan renkleri
const onWhite = hl.ensureContrast(brandColor, '#ffffff', 4.5);
const onBlack = hl.ensureContrast(brandColor, '#000000', 4.5);
const onDark  = hl.ensureContrast(brandColor, '#1e293b', 4.5);

// AAA seviyesi için (7:1)
const aaaOnWhite = hl.ensureContrast(brandColor, '#ffffff', 7.0);

// Semantik ölçek oluştur — her seviye perceptual olarak eşit
const scale = hl.semanticScale(brandColor);
// scale['900'] koyu zeminlerde, scale['100'] açık zeminlerde metin olarak kullanılabilir

Yaygın Renkler İçin Kontrast Tablosu

Aşağıdaki tabloda popüler renklerin beyaz (#ffffff) ve siyah (#000000) üzerindeki kontrast oranlarını ve WCAG uyumluluğunu görebilirsiniz:

Tablodan net bir desen ortaya cikiyor: orta tonlardaki renkler (kirmizi, turuncu, yesil, mavi, mor) ne beyaz ne de siyah uzerinde ayni anda AA'yi karsilayamaz. Bu renkleri kullanmak istiyorsaniz, ya daha koyu varyantlarini secin ya da Helmlab'in ensureContrast metoduyla otomatik olarak ayarlayin.

Pratik Uygulama: Marka Renginden Erisilebi̇li̇r Palette

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Marka rengimiz: Tailwind blue-500
const brand = '#3B82F6';

// Beyaz zemin icin AA-uyumlu on plan
const fgOnWhite = hl.ensureContrast(brand, '#ffffff', 4.5);
console.log(fgOnWhite);
// → mavi tonunu koruyan daha koyu bir varyant

// Koyu zemin (slate-900) icin AA-uyumlu on plan
const fgOnDark = hl.ensureContrast(brand, '#0f172a', 4.5);
console.log(fgOnDark);
// → mavi tonunu koruyan daha acik bir varyant

// Her ikisini de dogrula
console.log(hl.meetsContrast(fgOnWhite, '#ffffff', 'AA')); // → true
console.log(hl.meetsContrast(fgOnDark, '#0f172a', 'AA'));   // → true

// Tam semantik olcek olustur
const scale = hl.semanticScale(brand);
// scale['50'] - scale['950'] arasi 11 seviye
// Her seviye perceptual olarak esit aralikli

Sonuc

WCAG kontrast gereksinimleri sadece bir "kontrol listesi maddesi" degildir — gercek insanlarin web iceriklerinizi okuyabilmesi icin hayati onem tasir. Asagidaki kurallari aklinda tut:

Normal metin icin minimum 4.5:1, buyuk metin icin 3:1 kontrast orani sagla
Acik renkli metni beyaz zemin uzerinde kullanma — turuncu, acik yesil ve acik gri ozellikle tehlikelidir
Renkli metin + renkli zemin kombinasyonlarini her zaman kontrast araciyla dogrula
Marka rengini degistirmek zorunda degilsin — Helmlab'in ensureContrast metodu tonu koruyarak acikligi ayarlar
Dark mode icin de kontrast kontrolu yap — acik renkler koyu zemin uzerinde farkli kontrast oranlarina sahiptir

Helmlab, WCAG kontrastini perceptual renk biliminin gucu ile birlestirerek, erisilebi̇li̇r ve estetik renk paletleri olusturmaniza yardimci olur. 10KB'lik npm paketiyle projenize bugunden ekleyebilirsiniz:

npm install helmlab

Bu yazi, Helmlab renk uzayi serisinin 15. yazisidir. Onceki yazi: Insan Gozu ve Renk Algisi. Sonraki yazi: Egitim Verisi: 64.000 Insan Gozlemi.

WCAG Kontrast Rehberi: Erişilebilir Renkler Seçmek