Renk, kontrast ve hareket

Kontrast Nedir

Kontrast oranı, metnin (ya da bir arayüz parçasının) rengi ile arkasındaki renk arasındaki parlaklık farkını tek bir sayıyla ifade eder: 4.5:1 gibi. Oran yükseldikçe metin düşük görme keskinliği olan, renk algısı farklı olan ya da güneş altında telefona bakan herkes için daha kolay okunur.

Bu, webdeki en yaygın erişilebilirlik hatasıdır: 2026'da bir milyon ana sayfanın %83,9'unda düşük kontrastlı metin bulundu, sayfa başına ortalama 34 farklı örnekle.¹

Metin Kontrastı (1.4.3)

WCAG 2.2'nin 1.4.3 Contrast (Minimum) kriteri (AA) iki eşik koyar:²

• Yuvarlama yok: 4.499:1 çıkan bir renk çifti 4.5:1'i karşılamaz.²

• İstisnalar: Devre dışı (inactive) bir bileşenin metni, saf süs olan metin ve logo içindeki yazı bu kurala tabi değildir.²

• Neden 4.5: Standart metin için önerilen 3:1, yaşla ve hafif görme kaybıyla azalan kontrast duyarlılığını telafi edecek şekilde 4.5:1'e çıkarılmıştır.²

Metin Dışı Kontrast (1.4.11)

1.4.11 Non-text Contrast (AA), metin olmayan ama anlam taşıyan görsellerin bitişik renge karşı en az 3:1 olmasını ister:³

• Bir bileşeni tanıtan görsel: input kenarlığı, checkbox çerçevesi.

• Durumu gösteren işaret: seçili sekme, işaretli kutu, odak göstergesi.

• Grafiklerin anlam taşıyan parçaları: pasta grafiğin dilimleri, ikonlar.

Beyaz zemin üzerinde #9D9D9D gri kenarlıklı bir checkbox 2.7:1 ile bu kriteri geçemez. Devre dışı bileşenler ve tarayıcının değiştirilmemiş varsayılan görünümü istisnadır.³ Odak göstergesinin ayrıntıları Klavye ve Odak dersinde.

DevTools'ta Kontrol Etmek

Chrome DevTools kontrastı birkaç yerden gösterir:⁴

1. Inspect tooltip: Elements panelinde bir metnin üzerine gelince oran görünür; yetersizse uyarı ikonu çıkar.

2. Color Picker: Styles'ta color değerinin yanındaki kareye tıklayın, Contrast ratio bölümünü açın. AA ve AAA'yı geçip geçmediğini, renk alanındaki çizgilerle hangi tonların yeterli olduğunu gösterir; Use suggested color uygun bir rengi kendisi seçer.

3. CSS Overview: Tüm sayfadaki kontrast sorunlarını tek listede toplar (Colors > Contrast issues).

Rendering sekmesindeki görme bozukluğu emülasyonu sayfayı bulanık görme ya da farklı renk algısıyla görmenizi sağlar.⁶ Otomatik tarama araçları Erişilebilirlik Testi dersinde.

Bilgiyi Yalnızca Renkle Vermeyin (1.4.1)

1.4.1 Use of Color (A), rengin bilgiyi iletmenin tek görsel yolu olmamasını ister. Kırmızı ile yeşili ayırt edemeyen biri için "kırmızı alanlar zorunludur" bir anlam taşımaz.⁷

// Kötü: hata yalnızca kırmızı kenarlıkla belli
<input className="border-red-600" />

// İyi: renk + ikon + metin
<input id="email" aria-describedby="email-error" className="border-red-600" />
<p id="email-error" className="text-red-700">
  <AlertIcon aria-hidden="true" /> Geçerli bir e-posta adresi girin.
</p>

Metin içindeki linkler için de aynı kural geçerlidir: link rengi çevredeki metinden en az 3:1 farklı olmalıdır; fark belirli bir rengi algılamaya dayanıyorsa alt çizgi gibi ek bir görsel ipucu şarttır.⁷

APCA Hakkında

Kontrastı daha gerçekçi ölçmeyi hedefleyen APCA algoritması bir dönem WCAG 3 taslağındaydı ama 2023'te çıkarıldı; WCAG 3'ün hangi algoritmayı kullanacağı hâlâ belirsiz ve standart en erken 2030'da bekleniyor, bu yüzden bugün geçerli olan WCAG 2 oranlarıdır.⁸

Metin Büyütme ve Reflow

Kullanıcılar metni büyütür ya da sayfayı yakınlaştırır. İki kriter bunun bozulmadan çalışmasını ister:

• 1.4.4 Resize Text (AA): Metin, yardımcı teknoloji olmadan %200'e kadar büyütüldüğünde içerik ya da işlev kaybolmamalıdır; kırpılan, üst üste binen metin bu kriteri bozar.⁹

• 1.4.10 Reflow (AA): İçerik 320 CSS px genişlikte yatay kaydırma gerektirmeden okunabilmelidir. Bu, 1280px genişliğindeki bir ekranda %400 yakınlaştırmaya denk gelir. Harita, veri tablosu, video gibi iki boyutlu düzen gerektiren içerik istisnadır.¹⁰

Pratikte: yazı boyutlarını CSS dersinde gördüğünüz gibi rem ile verin, sabit height ile metin kutusunu kilitlemeyin, düzeni responsive kurun. Test için tarayıcıda %400'e yakınlaştırın ya da DevTools'ta genişliği 320px'e indirin.

Hedef Boyutu (2.5.8)

WCAG 2.2 ile gelen 2.5.8 Target Size (Minimum) (AA), tıklanan ya da dokunulan hedeflerin en az 24x24 CSS px olmasını ister.¹¹¹²

.icon-button {
  min-width: 24px;
  min-height: 24px;
}

Hedef daha küçükse, merkezine 24px çapında bir daire çizildiğinde komşu hedeflere değmeyecek kadar boşluk bırakmak da yeterlidir. Cümle içindeki linkler, aynı işi yapan yeterli boyutta bir alternatif ve tarayıcının değiştirilmemiş kontrolleri istisnadır. Önemli butonlar için daha sıkı olan 2.5.5 Target Size (Enhanced) hedeflenebilir.¹¹

Azaltılmış Hareket

Büyük yakınlaştırmalar, dönen öğeler ve özellikle parallax, vestibüler bozukluğu olan kişilerde baş dönmesi ve mide bulantısı tetikleyebilir.¹³¹⁴ İşletim sistemleri bunun için bir "hareketi azalt" ayarı sunar (Windows'ta Animation Effects, macOS ve iOS'ta Reduce Motion, Android'de Remove animations). Tarayıcı bu tercihi prefers-reduced-motion media query'siyle sayfaya iletir; tüm tarayıcılarda 2020'den beri desteklenir.¹³

İşletim sistemi web animasyonlarını kendiliğinden kapatmaz, tercihe uymak geliştiricinin işidir.¹⁵ Önerilen yaklaşım no-motion-first: animasyonu varsayılan olarak yazmayın, yalnızca kullanıcı bir tercih belirtmediyse ekleyin.¹⁵¹⁶

.card {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 300ms ease;
  }
  .card:hover {
    transform: translateY(-4px);
  }
}

"Azaltılmış" hiç hareket olmaması demek değildir. Büyük bir kaydırma ya da yakınlaştırmayı crossfade'e çevirmek, parallax'ı kaldırıp içeriği korumak yeterlidir; küçük renk ve opaklık değişimleri genellikle sorun yaratmaz.¹⁴ Hover gibi geri bildirimleri de tamamen silmeyin, yalnızca hareketsiz hale getirin.¹⁶

Tailwind dersinden hatırlarsanız aynı iş variant'larla yapılır: motion-safe: yalnızca kullanıcı hareketi azaltmadıysa, motion-reduce: yalnızca azalttıysa uygulanır.¹⁷

<button class="motion-safe:transition motion-safe:hover:-translate-y-0.5">
  Kaydet
</button>

JavaScript ile çalışan animasyonlarda (React Spring, Framer Motion, GSAP) tercihi window.matchMedia ile okursunuz. Aşağıdaki hook Josh Comeau'nun örneğinden kısaltılarak uyarlandı; sunucuda tercih bilinmediği için başlangıç değeri "hareket azaltılmış" kabul edilir:¹⁸

"use client";

import { useEffect, useState } from "react";

const QUERY = "(prefers-reduced-motion: no-preference)";

export function usePrefersReducedMotion() {
  const [reduced, setReduced] = useState(true);

  useEffect(() => {
    const mql = window.matchMedia(QUERY);
    setReduced(!mql.matches);
    const onChange = (e: MediaQueryListEvent) => setReduced(!e.matches);
    mql.addEventListener("change", onChange);
    return () => mql.removeEventListener("change", onChange);
  }, []);

  return reduced;
}

Ayarı değiştirmeden test etmek için DevTools'ta Command Palette'i açıp prefers-reduced-motion: reduce emülasyonunu seçebilirsiniz.¹⁵ Çok hareketli sayfalarda kullanıcıya sayfa içinde bir "animasyonları durdur" düğmesi sunmak da önerilir.¹⁴

Forced Colors

Windows'taki yüksek kontrast temaları gibi forced colors modunda tarayıcı sizin renklerinizi kullanıcının seçtiği sınırlı bir paletle değiştirir ve box-shadow'u kaldırır. Yalnızca gölgeyle belirginleşen bir buton bu modda görünmez olabilir; @media (forced-colors: active) içinde ButtonText gibi bir sistem rengiyle kenarlık eklemek yeterlidir. Bu modu ayrı bir tasarıma dönüştürmeyin, yalnızca bozulan yerleri düzeltin.¹⁹ Tailwind'de karşılığı forced-colors: variant'ıdır.¹⁷

Detaylı Öğrenmek İçin

• Konuşma: Val Head'in hareket hassasiyeti için güvenli animasyon tasarlamayı anlattığı konuşma (Web Directions Code 2020, Conffab'da ücretsiz hesapla izlenir).²⁰

• Yazı: Val Head'in hangi hareketin tetikleyici olduğunu ve yerine ne konacağını örneklerle anlattığı Smashing yazısı.¹⁴

• React'te animasyon: Josh Comeau'nun prefers-reduced-motion yazısı; React Spring ile örnek ve SSR notu.¹⁵

• Kontrastın geleceği: Adrian Roselli'nin WCAG 3 ve APCA'nın Nisan 2026 durumunu özetleyen yazısı.⁸

• WCAG 2.2'de ne değişti: W3C'nin yeni kriterleri listeleyen özeti.¹²