Markalar için renk erişilebilirliği

Erişilebilir renk paleti, hangi metin, buton, bağlantı, durum ve odak renginin hangi zeminde kullanılabileceğini açıkça söyleyen ve her eşleşmesi WCAG 2.2’ye göre ölçülmüş bir kurumsal renk setidir. Mevcut marka paletinizi denetliyor, her eşleşmenin kontrast oranını ölçüyor ve paleti kendi renk tonlarınızı koruyan ton skalalarıyla genişletiyorum. Elinize onaylı eşleşmeler listesi, arayüz durumları, karanlık mod, tasarım tokenları ve bir kullanım kılavuzu geçer. Logo renkleriniz yerinde kalır; her değişikliğin kararı sizindir.

Aşağıdakilerden biri sizin durumunuzsa doğru yerdesiniz:

• E-ticaret sitenizde bir erişilebilirlik taraması düşük kontrast uyarısı veriyor ve sorunlu renkler doğrudan kurumsal kimlik kılavuzunuzdan geliyor.
• Bir marka ya da tasarım ajansısınız; müşterinizin AB’deki alıcısı ya da şartnamesi WCAG 2.2 AA istiyor ve markayı bozmadan geçen bir palete ihtiyacınız var.
• Tasarım sisteminiz açık ve karanlık mod için token istiyor, ama hangi renk eşleşmelerine gerçekten izin verildiğini kimse ölçmemiş.
• Hata ve başarı mesajlarınız yalnızca kırmızı ve yeşil yazıyla ayrılıyor ve herkesin bu farkı görebildiğinden emin değilsiniz.

• Gövde metni: metin renginizi ve zemin renginizi WebAIM Contrast Checker’a girin. Normal boyutlu metinde 4,5:1’in altı WCAG AA’dan geçmez.
• Butonlar: ana buton renginizin üzerindeki yazı rengini kontrol edin. Parlak turuncu, turkuaz ya da sarı üzerinde beyaz yazı çoğu zaman 2:1 civarında kalır.
• Odak: sitenizde Tab tuşuna basın. Nerede olduğunuzu göremiyorsanız ya da halka soluk bir tonsa klavye kullananlar da göremez.
• Durum mesajları: telefonunuzu gri tonlamaya alın ve hata veren bir formu açın. Hata mesajı diğer yazılardan ayırt edilemiyorsa, anlam yalnızca renge dayanıyordur.

Teknik ayrıntılar için okumaya devam edin. Aşağıda: bir paleti ilgilendiren WCAG ölçütleri, kurgusal bir kahve markası üzerinde ölçülmüş bir öncesi–sonrası örneği (bütün dosyalar indirilebilir) ve Türkiye, AB ve ABD’deki düzenlemeler. Doğrudan başlamak isterseniz kurumsal kimlik kılavuzunuzu ya da renk listenizi gönderin, hangi eşleşmelerin geçmediğini söyleyeyim.

Bir palet, markanızın gerçekten kullandığı her renk eşleşmesi kendi WCAG eşiğini geçiyorsa ve hiçbir bilgi yalnızca renge dayanmıyorsa erişilebilirdir. Tek başına bir renk “erişilebilir” olmaz; erişilebilir olan eşleşmelerdir.

WCAG 2.2 kontrastı iki rengin bağıl parlaklığı arasındaki oranla ölçer; değer 1:1 ile 21:1 arasındadır. 1.4.3 başarı ölçütü (AA düzeyi) normal metin için 4,5:1, büyük metin (yaklaşık 24 px ya da kalın 18,7 px) için 3:1 ister. 1.4.6 (AAA düzeyi) bu değerleri 7:1 ve 4,5:1’e çıkarır. Yasalar ve şartnameler genellikle AA’yı anar; hangi eşleşmelerin AAA’ya da ulaştığını ayrıca işaretlerim.

Metin dışı kontrast, 1.4.11 (AA), bir kontrolü ya da durumunu tanımak için gereken görsel parçalarda 3:1 ister: form alanının kenarlığı, onay kutusu, yazısız bir butonun kenarı, odak halkası, bir simgenin anlam taşıyan kısımları. Beyaz zemin üzerindeki soluk gri kenarlık en tipik hatadır.

Renk kullanımı, 1.4.1 (A düzeyi), bilginin yalnızca renkle aktarılmamasını ister. Yalnızca tonuyla ayrılan kırmızı ve yeşil iki mesaj, kontrastları ne kadar iyi olursa olsun bu ölçütten geçmez. Bir simge ve “Hata:” gibi bir sözcük bunu çözer; palet de bu ikisini desteklemekle yükümlü olur.

Odak görünümü, 2.4.13 (AAA, WCAG 2.2 ile geldi), yeterli büyüklükte ve odaklı ile odaksız hâli arasında 3:1 kontrastı olan bir odak göstergesi ister. Palet renkleri ve halkanın tanımını verir; büyüklüğü ancak uygulanmış sayfa kanıtlar. Sık karıştırılan 2.4.11, Odağın gizlenmemesi, sabit üst menülerin ya da açılır katmanların odaklanan öğeyi örtmesiyle ilgilidir. Bu bir yerleşim konusudur; hiçbir palet çözemez.

Bu, kurgusal bir marka üzerinde yapılmış, ölçülmüş bir örnek çalışmadır; bir müşteri işi değildir. “Örnek Kahve Co.” markasını ve kurumsal kimlik kılavuzundaki paleti, kılavuzlarda sık görülen tercihlerle ben oluşturdum; ölçtüm, yeniden kurdum ve sonucu bağımsız araçlarla doğruladım. Aşağıdaki her görsel, rapor ve dosyada “Fictional example brand” (kurgusal örnek marka) ibaresi var.

• Önceki palet: beyaz #FFFFFF, krem #FFF8F0, ana turuncu #F28C28, ikincil turkuaz #2EC4B6, vurgu sarısı #FFD166, gri metin #A0A0A0, espresso #4A3428, durum kırmızısı #E74C3C ve yeşili #2ECC71 (simgesiz), soluk odak halkası #CDEFEB.
• Renk hesapları: WCAG 2.x oranı sRGB bağıl parlaklığından; ton skalaları OKLCH renk uzayında (coloraide 8.13), renk tonu korunarak ve açıklık beyaza karşı sabit bir kontrast hedefine göre çözülerek.
• Renk görme farklılığı simülasyonu: Machado, Oliveira ve Fernandes (2009) matrisleri, şiddet 1,0, doğrusal sRGB’de.
• APCA: npm apca-w3 0.1.9 ile karşılaştırıldı ve yalnızca bilgi amaçlı raporlandı. APCA, WCAG 2.2’nin bir şartı değildir.
• Görsellerde ve kılavuzda yazı tipi: Inter (SIL Open Font License 1.1).

Kılavuz 14 kullanım tarif ediyordu (gövde metni, buton yazıları, bağlantılar, mesajlar, odak halkası, kenarlıklar). 14 kullanımdan yalnızca biri eşiğini geçti: sarı üzerinde espresso, 8,03:1.

Kalan dört kullanım da (krem zeminde gövde metni, vurgu başlıkları, buton kenarı, form kenarlığı) geçemedi; 14’ünün hepsi ölçüm dosyasında. Normal görmede kırmızı ve yeşil durum renkleri birbirinden çok farklı (CIEDE2000 72,35). Döteranopi simülasyonunda bu fark 11,64’e düşüyor.

Her renk tonu için OKLCH’de 11 adımlı bir skala kurdum ve her rol için geçen adımları seçtim. Markanın turuncusu, turkuazı, sarısı ve kremi logo, illüstrasyon ve geniş zeminler için olduğu gibi kalıyor. Turuncu ya da sarı zemin üzerindeki yazılar koyu bir nötr renkle yazılıyor (6,48:1 ve 11,03:1).

İşin açık konuşulması gereken yanı: CIEDE2000’de yaklaşık 2’lik fark ancak fark edilir. 18 ile 29 arası kaymalar açıkça görülür. Renk tonu kalıyor, açıklık kalmıyor: buton turuncusu daha koyu, kehribar-kahve bir tona dönüyor. Bunun hâlâ sizin markanız olup olmadığı bir marka kararıdır ve o karar sizindir. Gerçek bir işte bu sayıları ve renk örneklerini hiçbir şey kesinleşmeden önce görürsünüz.

• Üzerine gelme ve basılı hâl: orange-700 (beyazla 6,22:1) ve orange-800 (8,84:1).
• Odak: teal-800 renginde 3 px dış halka ve 2 px beyaz iç halka. Dış halka sayfaya karşı 8,83:1, kreme karşı 8,38:1; beyaz iç halka turuncu butona karşı 4,86:1.
• Devre dışı: yazı açık modda 2,17:1, karanlık modda 1,80:1; bilgi amaçlı raporlandı. Etkin olmayan bileşenler 1.4.3’ten muaftır.
• Durum mesajları: artık bir simge ve “Hata:” ya da “Tamam:” sözcüğü taşıyor; renk tek ipucu olmaktan çıktı.
• Karanlık mod: kendi onaylı eşleşmeleri var, hepsi yeniden ölçüldü; karanlık modda buton rengi #ed8c33 değerini alıyor.

Durum renkleri için arama yalnızca beyaz ve krem zeminde 4,5:1’e ulaşan hata ve başarı adaylarını tuttu, sonra üç simülasyondaki en küçük farkı en büyük olan çifti seçti.

Kazanç, başarı rengini mavimsi bir yeşile taşımaktan geliyor. İkisi arasındaki açıklık oranı öncekiyle hemen hemen aynı (1,82:1’e karşı 1,81:1); yani renk ikincil bir ipucu olarak kalıyor. Anlamı simge ve sözcük taşıyor.

Bir de şu: sayı, marka kararı değildir. ΔE2000 bir rengin ne kadar kaydığını söyler; hâlâ markanız gibi durup durmadığına siz karar verirsiniz.

Örnek dosyalar ve raporlar İngilizcedir; görsellerdeki form mesajları Türkçedir.

Ölçülmüş bir palet, onu kullanma kuralları ve tasarımcılarınızla yazılımcılarınızın doğrudan yükleyebileceği dosyalar teslim ediyorum.

• Mevcut paletinizin (öncesi) ve genişletilmiş paletin (sonrası) kontrast matrisi; HTML ve CSV olarak.
• Kendi renk tonlarınızdan kurulmuş ton skalaları; her adımın ölçülmüş oranıyla.
• Açık ve gerekiyorsa karanlık mod için onaylı eşleşmeler listesi; arayüz durumları ve odak halkasıyla.
• Tasarım tokenları: CSS özel değişkenleri, W3C DTCG JSON, Tailwind ayarı, Adobe ASE renk örnekleri, Figma değişkenleri JSON’u.
• HTML ve PDF kullanım kılavuzu ve her renk kaymasını (ΔE2000) ve denetimlerin göremediklerini listeleyen bulgu raporu.

Önce kurumsal renklerinizi gönderirsiniz; fiyat, iş başlamadan sabitlenir.

1. Kurumsal kimlik kılavuzunuzu ya da renk listenizi gönderin. Kılavuzun PDF’i, sitenizin CSS’i ya da ana ekranların ekran görüntüsü yeterli. Hangi eşleşmelerin ne kadar farkla geçmediğini söylerim.
2. Kapsamı ve sabit fiyatı alırsınız; ihtiyacınız olan modlar ve token biçimleri dahil.
3. İşi yaparım. Önizleme olduğu belirtilmiş palet ve kılavuz, kontrast raporu ve onayınıza sunulan her renk kayması size gelir.
4. Onayınızla son dosyalar teslim edilir: tokenlar, kılavuz, matrisler ve bulgu raporu.

Her işi malzemeyi gördükten sonra fiyatlandırıyorum. Emek; renk ve rol sayısına, karanlık mod gerekip gerekmediğine ve araçlarınızın hangi token biçimlerini kullandığına göre değişir. Adlandırılmış tokenları olan bir tasarım sistemi, dağınık hex kodlarından oluşan bir kılavuzdan daha hızlı ilerler. İş başlamadan sabit fiyat alırsınız; saat ölçen bir sayaç yok.

Düşük kontrastlı metin, WebAIM’in her yıl bir milyon ana sayfa üzerinde yaptığı taramada en sık bulunan hatadır. Türkiye’de e-ticaret sitelerini de kapsayan bir Cumhurbaşkanlığı Genelgesi var; AB’de ise Avrupa Erişilebilirlik Yasası 28 Haziran 2025’ten beri tüketiciye dönük pek çok site ve online mağaza için geçerli. Bunların sizin için ne anlama geldiği hukuki bir sorudur.

Hukuki not: Bu sayfa işin teknik tarafını anlatır; kendi durumunuz için hukuk danışmanınıza başvurun.

• Türkiye: “Web Siteleri ve Mobil Uygulamaların Erişilebilirliği” konulu Cumhurbaşkanlığı Genelgesi; kamu kurumları, bankalar, özel hastaneler ve elektronik ticaret hizmet sağlayıcıları gibi kuruluşlara web siteleri ve mobil uygulamalarını erişilebilir hâle getirme talimatı veriyor. Aile ve Sosyal Hizmetler Bakanlığı’nın kontrol listesi WCAG 2.2 temel alınarak hazırlanmış (A seviyesi). Renk kullanımı (1.4.1) A seviyesindedir; kontrast ölçütleri 1.4.3 ve 1.4.11 ise AA seviyesindedir.
• AB özel sektörü: (AB) 2019/882 sayılı Avrupa Erişilebilirlik Yasası 28 Haziran 2025’ten bu yana, e-ticaret dahil, listelediği ürün ve hizmetlere uygulanıyor. Hizmet veren mikro işletmeler muaf. AB’deki tüketicilere satış yapan Türk ihracatçıları ve e-ticaret firmaları bu kurallarla satış kanalları üzerinden karşılaşıyor.
• Standart: (AB) 2021/1339 sayılı Uygulama Kararı ile atıf yapılan EN 301 549 V3.2.1, 1.4.1, 1.4.3 ve 1.4.11 dahil WCAG 2.1 başarı ölçütlerini uyguluyor. Ben hepsini içeren WCAG 2.2’ye göre çalışıyorum.
• AB kamu sektörü: (AB) 2016/2102 sayılı Web Erişilebilirliği Direktifi kamu kurumlarının web sitelerini ve uygulamalarını aynı standarda göre kapsıyor.
• ABD: ADA Title II kuralı eyalet ve yerel yönetimlerin web içeriğini WCAG 2.1 AA ölçütüyle kapsıyor. Nisan 2026’daki uzatmayla son tarihler 26 Nisan 2027 (50.000 ve üzeri nüfus) ve 26 Nisan 2028 (daha küçük kuruluşlar).

Token düzeyinde düzeltilmiş bir palet, onu kullanan her sayfayı düzeltir. Bu genellikle kontrastı sayfa sayfa düzeltmekten daha ucuzdur.

Logonuz ve marka renkleriniz logo, illüstrasyon ve geniş zeminler için olduğu gibi kalır. Metin, bağlantı, buton ve durum rolleri aynı renk tonunun daha koyu adımlarını alır ve bu kaymalar açıkça görülür (örnekte CIEDE2000 18 ile 29 arası). Onaylamadan önce her kaymayı görürsünüz; marka kararı sizindir.

Çünkü gerekmiyor. Örnekte yeniden düzenlemeden sonra 45 çiftin 17’si AA metin eşiğini geçiyor; geri kalanı zaten kimsenin metin için kullanmaması gereken kombinasyonlar. Ekibinizin çalışacağı liste, açık ve karanlık modda 27’de 27 geçen onaylı eşleşmeler listesidir.

APCA değerlerini hesaplıyor ve bilgi amaçlı ekliyorum, çünkü ince ve küçük yazı hakkında daha çok şey söylüyorlar. WCAG 2.2 kontrast oranını kullanır ve bugün yasaların ve şartnamelerin andığı da odur. Palet WCAG 2.x’ten geçecek şekilde kuruluyor.

Dosyalar yayımlanmış biçimlere uyuyor ve örnekte yapıları bağımsız araçlarla denetlendi: Style Dictionary CSS’i üretiyor, bağımsız bir okuyucu ASE’yi okuyor, Figma dosyası bir değişken REST API yükü. Figma’ya ya da bir Adobe uygulamasına aktarılmadılar ve Figma’nın değişken API’si Enterprise plan istiyor. Onaylamadan önce kendi aracınızda neyle karşılaşacağınızı söylerim.

Hayır. Bu, tam dikromasinin yayımlanmış bir modelidir, insanlarla yapılmış bir test değildir. Durum mesajlarına simge ve sözcük eklememin nedeni de bu: anlam artık iki rengi ayırt edebilmeye bağlı değil.

Tokenlar tarif edildiği gibi uygulanırsa sık görülen bir hata türünü ortadan kaldırır. Odak sırası, sabit üst menünün örttüğü odak halkası, formlar, alternatif metin ve klavye kullanımı ayrı konulardır. Uygulanmış sitenin erişilebilirlik denetimi ayrı bir iştir.

• Erişilebilir PDF (PDF/UA)
• Erişilebilir grafik ve infografik
• Erişilebilir Word ve PowerPoint
• Erişilebilir e-posta bülteni
• Erişilebilir Excel
• Alt metin ve görsel betimleme
• VPAT erişilebilirlik uyum raporu
• Erişilebilir EPUB

Bir kurumsal kimlik kılavuzu, hex kodlarından oluşan bir liste ya da ana sayfanızın ekran görüntüsü. Hangi eşleşmelerin ne kadar farkla geçmediğini ve her rengin ne kadar kayması gerektiğini açıkça yazarım.

Ali Karabüyük · Tekirdağ, Türkiye · dünyanın her yerindeki müşterilerle uzaktan çalışıyor · 2004’ten beri belge ve görsel üretimi, 2008’den beri profesyonel olarak.