Erişilebilir Renk Kontrastı: Gri Bulanıklığı Olmadan WCAG
Markanızı griye boğmadan WCAG 2.2 kontrastına uygun tasarım nasıl yapılır? Oranlar, APCA, gerçek tasarım sistemi örnekleri ve belirteç tabanlı bir test iş akışı.
Erişilebilirlik ve tasarım kişiliği birbiriyle çelişmez. Bu, çoğu marka ekibinin kontrast konusundan kaçınırken kendilerine anlattığı bir efsanedir ve bu nedenle birçok "erişilebilir" yeniden markalaşma çalışması havaalanı tabelalarına benzemektedir.
Erişilebilir renk kontrastı bir ölçüm problemidir. Modern tasarım sistemleri bunu zaten belirteç katmanında çözmüştür; bu da WCAG'e ulaşmak ile markayı ilgi çekici tutmak arasında seçim yapmak zorunda olmadığınız anlamına gelir. Sadece kuralları bilmeniz, kuralların nerede yanlış olduğunu bilmeniz ve işin aslında nerede yapıldığını bilmeniz gerekir.
Kontrast Neden Atlanamayacak Tek Kuraldır?
Yaklaşık 300 milyon insan, temel paletinizin varsaydığından farklı renkler görüyor ve daha da fazlası düşük ışıkta, kötü ekranlarda veya kimsenin şikayet etmediği kısmi görme kaybıyla arayüzleri kullanıyor.
Düşük kontrast, web'deki en yaygın erişilebilirlik hatasıdır. Aynı zamanda düzeltilmesi en kolay olanıdır. Kör noktalar, renk eksiklikleri, parlama, yaşlanan gözler, ucuz monitörler, telefon ekranına doğrudan güneş ışığı. Tüm bunlar aynı çözüme indirgeniyor: metin ve arka plan arasında yeterli kontrast, mesajın en zorlu koşullarda bile, sadece tasarımcının Retina ekranında değil, görünür kalmasını sağlar.
Bunu yanlış yapmanın maliyeti sadece dışlanma değil, aynı zamanda uyumluluk riskine maruz kalmaktır. AB'nin Avrupa Erişilebilirlik Yasası, ABD'deki 508. Bölüm, Ontario'daki AODA ve giderek artan sayıda ulusal yasa, yasal referans olarak WCAG'yi kullanmaktadır. Kontrast, denetimin ilk kontrol ettiği şeylerden biridir çünkü ilk arızalı olarak gönderilen şeylerden biridir.
WCAG 2.2 Kontrast Kuralları Basit Bir Dilde
WCAG size üç sayı verir: 4.5:1, 3:1 ve 3:1 ve her biri belirli bir UI öğesi türüne uygulanır.
| Öğe | AA minimum | AAA minimum | Notlar |
|---------|-----------|-------------|-------|
| Gövde metni | 4.5:1 | 7:1 | 18pt normal veya 14pt kalın yazı tipinden küçük tüm metinler |
| Büyük metin | 3:1 | 4.5:1 | 18pt+ normal veya 14pt+ kalın yazı tipleri |
| Kullanıcı arayüzü bileşenleri ve grafikler | 3:1 | Belirtilmemiş | Düğmeler, simgeler, form kenarlıkları, odak halkaları |
| Logolardaki veya dekoratif resimlerdeki metin | Muaf | Muaf | Marka öğeleri ve rastgele metinler sayılmaz |
AA, çoğu ticari ürünün hedeflediği ve çoğu erişilebilirlik yasasının gerektirdiği seviyedir. AAA daha katı bir hedeftir ve çoğunlukla hükümet, sağlık ve eğitim alanlarında kullanılır. Birisi size AAA yazan bir uyumluluk belgesi vermedikçe, AA minimum seviyedir.
Çoğu tasarımcının düştüğü tuzak, metin dışı 3:1 kuralını unutmaktır. Sayfa arka planına karşı 2:1 oranındaki bir form alanı kenarlığı, içindeki etiket başarılı olsa bile başarısız sayılır.
Yetersiz kontrasta sahip bir odak halkası başarısız sayılır. Anlamı renge bağlı olan bir simge 2,5:1 oranında başarısız sayılır. Metin dışı kontrast isteğe bağlı değildir.
WCAG Matematiği Neden Sıklıkla Yanlıştır
WCAG kontrast oranları, algısal görmeyi göz ardı eden 30 yıllık bir formüldür; bu nedenle bazen korkunç görünen renkleri geçer, iyi görünen renkleri ise başarısız sayar.
WCAG 2 formülü yalnızca parlaklığa dayanır. Arka plan üzerindeki metni, iki rengin göreceli parlaklığı arasındaki doğrusal bir ilişki olarak ele alır. İnsan görsel sistemi kontrastı bu şekilde okumaz.
APCA Algısal Sorunu Nasıl Çözüyor?
Erişilebilir Algısal Kontrast Algoritması (APCA), kontrastı insan görüşünün gerçekte nasıl çalıştığını ölçer; bu nedenle WCAG 3 taslağı bunu WCAG 2'nin yerine önermektedir.
APCA puanları 0 (kontrast yok) ile yaklaşık 108 (aşırı kontrast) arasında değişir. WCAG 2'nin aksine, metin ağırlığını, metin boyutunu ve polariteyi (açık zemin üzerinde koyu zemin ile koyu zemin üzerinde açık zemin) hesaba katar.
Genel metinler için yaklaşık APCA eşikleri:
- Gövde metni (16 piksel normal): 75+ (gerekli), 90+ (ideal)
- Küçük gövde (14 piksel normal): 90+ (gerekli)
- Büyük metin (24 piksel+): 60+ (gerekli)
- Metin dışı kullanıcı arayüzü: Minimum 45+
APCA henüz hiçbir yerde yasal olarak zorunlu değil. Ancak piyasaya sürülen ürünler, okunabilirliği daha iyi yansıttığı için dahili bir standart olarak zaten kullanıyor. Akıllıca olan, uyumluluk için WCAG 2 AA'yı ve gerçek kalite için APCA'yı karşılamaktır. renk belirteçleri'leriniz buna göre tasarlanmışsa, her iki hedefi aynı anda gerçekleştirmek zor değildir.
Kontrastı Belirteçleyen Dört Tasarım Sistemi
Bu sistemler zaten erişilebilirliği belirteç katmanına kodluyor, bu nedenle tasarımcılar bir oran hesaplamak yerine bir rol seçiyor.
Radix Colors
Radix-ui.com adresinden canlı olarak izleyin.
Radix Colors, her adımın önceden bir role atandığı 12 adımlı ölçekler sunar. 11. ve 12. adımlar, alt adımlara karşı WCAG AA'yı geçmesi garanti edilen yüksek kontrastlı metin adımlarıdır. Rol belirteçleri (text, textContrast, solid, solidHover), tasarımcıların asla bir oran hesaplaması yapmadığı anlamına gelir. Bir rol seçerler.
Ne çalınmalı: numaralandırılmış kontrast-rol modeli. 11. adımı seçen herhangi bir tasarımcı, aynı ölçeğin daha açık renkli adımlarına karşı geçtiğini bilir. Oran, adım numarasının kendisinde kodlanmıştır.
Materyal Tasarım 3
m3.material.io adresinden canlı olarak izleyin.
Material 3, her renk rolünü, ebeveynine karşı 4,5:1 oranını karşılaması garanti edilen bir on- karşılığıyla (on-primary, on-surface, on-error) eşleştirir. Eşleştirilmiş token'lar, doğrudan sisteme entegre edilmiş erişilebilirlik katmanıdır.
Çalınacak şey: on- deseni. Bir tasarımcı metin için on-primary'a uzandığında, erişilebilirlik otomatik olarak sağlanır. Yanlış karar verme olasılığı yoktur.
İki Tane Daha: Oranlar ve Algısal Sistemler
Radix ve Materyal, rol eşleştirmesi yoluyla kontrastı çözer. Sonraki iki yaklaşım ise belgelenmiş oranlar ve algısal olarak tekdüze ölçekler yoluyla bunu çözer. Her iki yaklaşım da işe yarar. Her ikisinden de ilham almakta fayda var.
GitHub Primer
primer.style adresinden canlı izleyin.
Primer, ön plan, arka plan ve kenar token'larını belgelenmiş kontrast oranlarıyla açık katmanlara ayırır. fg.default ve bg.default değerleri tam oranlarla yayınlanır ve her rol tabanlı semantik token aynı şekilde ele alınır.
Çalınacak şey: oranları token'ların yanına yayınlamak. Her token'ın ilgili her arka plana karşı kontrastı belgelendiğinde, tasarımcılar ve geliştiriciler denetleyiciyi tamamen atlayabilirler.
Adobe Spectrum
spectrum.adobe.com adresinden canlı olarak izleyin.
Spectrum, algısal olarak tekdüze renk ölçekleri kullanır, böylece aynı adım numarasına sahip iki ton, tonlar arasında aynı görsel ağırlığa sahip olur. Bu, bir tema içindeki tonların değiştirilmesinin kontrast ilişkilerini koruduğu anlamına gelir. Artık "mavide geçti ama turuncuda kaldı" yok.
Çalınacak şey: algısal tekdüzelik. Algısal modeller üzerine kurulu ölçekler (HSLuv, OKLCH veya Spectrum'un özel yaklaşımı gibi) erişilebilirliği marka temaları arasında taşınabilir hale getiriyor.
Kişiliğinizi Kaybetmeden Erişilebilir Kalmanın Yolları
Erişilebilirlik, beyaz zemin üzerine siyah yazı ve soluk bir marka anlamına gelmez ve en kapsayıcı ürünleri piyasaya süren ekipler bunu anlayanlardır.
Püf noktası, erişilebilirliğin yığın içinde nerede yer aldığıdır. Eğer belirteç katmanında yer alıyorsa, marka canlı olur ve tasarımcılar yine de erişilebilir çıktılar elde eder. Eğer son inceleme olarak yer alıyorsa, her marka rengi denetimde başarısız olmayı bekleyen bir yükümlülüktür.
Üç teknik, kişiliği ve erişilebilirliği aynı odada tutar:
-
Vurgu katmanını bir marka rengi ve erişilebilir bir eylem rengi olarak ayırın. Linear, marka anları için belirli bir mor ve etkileşimli öğeler için biraz farklı bir mor kullanır. Her ikisi de markayı tanınabilir kılar. Her yüzeyde yalnızca birinin garantili olması sağlanır.
-
Algısal olarak tekdüze ölçekler kullanın. OKLCH ve HSLuv, renk değerlerini algılanan parlaklığa eşler, böylece kontrastı bozmadan tonlar arasında geçiş yapabilirsiniz. Radix, Spectrum ve Material 3'ün tümü bunun çeşitli varyasyonlarını yapar.
-
Karanlık modu sonradan eklenmiş bir özellik değil, paralel bir belirteç seti olarak gönderin. Karanlık modda başarısız olan bir belirteç, karanlık moda hazır değildir. Sisteminiz
text-default'yi açıkta bir renge ve karanlıkta farklı bir renge çözüyorsa, her iki değer de eşleştirilmiş yüzeylerine karşı geçerli olmalıdır.
En kötü sonuç, kimsenin istemediği uzlaşmadır: hala erişilebilir olmayan, soluk bir marka. Bu, ekiplerin kontrast geri bildirimine, eşleştirmeleri düzeltmek yerine her rengi doygunluğunu azaltarak tepki vermesiyle olur. Doygunluğu azaltmak, erişilebilirlikle aynı şey değildir. İlişkiler önemlidir.
Erişilebilirlik Testi İş Akışı
Kontrast testi ucuz, otomatiktir ve tasarım incelemesine kadar bırakırsanız tamamen anlamsızdır.
İşleyen iş akışı, kontrast kontrollerini tek bir noktada değil, dört noktada gerçekleştirir.
- Token tanımında. Bir token oluşturulduğunda, izin verilen yüzeyleri de tanımlanır. 1.
text-defaultyalnızcabg-default,bg-subtlevebg-raisedüzerinde kullanılabilir. Token'ın her birine karşı kontrastı bir kez kontrol edilir ve kilitlenir. - Bileşen taahhüdünde. Storybook ve bir axe-core veya pa11y entegrasyonu, CI'nin bir parçası olarak her bileşen varyantında erişilebilirlik kontrolleri yapar. Başarısız olan herhangi bir yeni varyant, birleştirmeden önce engellenir.
- Tasarım dosyası tesliminde. Stark gibi Figma eklentileri veya yerleşik WCAG denetleyicisi, tasarım aracı içindeki sorunları işaretler. Bunu tasarım zamanında yakalayın, inceleme zamanında değil.
- Sayfa düzeyinde. Lighthouse, axe DevTools veya pa11y, hazırlık veya üretim ortamındaki canlı sayfalarda çalışır. Bu, bileşen testlerinin gözden kaçırdığı gerçek dünya hatalarını (üçüncü taraf yerleştirmeler, kullanıcı tarafından oluşturulan içerik, dinamik temalar) yakalar.
Amaç daha fazla araç çalıştırmak değil. Amaç, kontrolü daha erken bir aşamaya taşımaktır. Bir CI hattı tarafından bulunan kontrast hatası beş dakikalık bir düzeltmedir. Aynı hata, lansman öncesi denetimde yakalanırsa ekibe bir haftaya mal olur.
Bu katmanlı yaklaşımın işe yaramasının yapısal nedenini anlamak için tasarım sistemleri kılavuzu, belirteç katmanı düşüncesinin neden kazandığını açıklıyor. Ve 60-30-10 kuralı ihlal edildi. yazısı, rol tabanlı rengin (erişilebilirliğin bağlı olduğu) oran tabanlı düşüncenin yerini neden aldığını açıklıyor.
SSS
WCAG AA yeterli mi yoksa AAA'ya mı ihtiyacım var?
AA, çoğu ticari ürün ve çoğu erişilebilirlik yasası için standarttır. AAA, yalnızca belirli bağlamlarda (devlet, sağlık, eğitim) yasal olarak gereklidir ve paleti düzleştirmeden ulaşılması pahalıdır. AA'yı taban, APCA idealini ise tavan olarak hedefleyin.
Her metin dışı öğenin kontrast oranlarını karşılaması gerekiyor mu?
Anlam taşıyan metin dışı kullanıcı arayüzü bileşenlerinin WCAG 2.2'ye göre minimum 3:1 kontrast oranına sahip olması gerekir. Bu, düğmeleri, form kenarlıklarını, odak halkalarını, anlamlı simgeleri ve grafik öğeleri kapsar. Saf dekorasyon (arka plan desenleri, ortam gradyanları) muaftır. Rastgele metin (bir logotip, bir fotoğraf alt yazısı) de muaftır.
WCAG ve APCA arasındaki fark nedir?
WCAG 2, 30 yıllık bir parlaklık formülüne dayanan mevcut yasal standarttır. APCA, insan algısının gerçekte nasıl çalıştığına dayanan, WCAG 3 taslağında önerilen bir alternatiftir. APCA puanları gerçek okunabilirlikle daha iyi ilişkilidir, ancak henüz yasal olarak zorunlu değildir. Piyasada bulunan ürünler her ikisini de kullanır: uyumluluk için WCAG 2, kalite için APCA.
Erişilebilirliği Token'lara Entegre Edin
Erişilebilir renk kontrastı bir stil seçimi değil, bir sistem özelliğidir.
En kapsayıcı ve marka odaklı ürünleri piyasaya süren ekipler, erişilebilirliği sonradan düşünülmüş bir şey olarak ele almayı bırakıp, renk paleti'nin kendisinin bir özelliği olarak ele almaya başlayanlardır.
Token'lar oranları kodlar. Ölçekler eşleştirmeleri kodlar. Testler iş akışının dört noktasında gerçekleşir. Kimse lansmandan önce ekrana kontrast denetleyicisi tutmaz.
Mevcut süreciniz bir tasarımcının "okunabilir görünüyor" diye bir paleti gözle incelemesini içeriyorsa, denetimden geçemezsiniz. Süreciniz bir denetleyici aracı ve manuel incelemeleri içeriyorsa, büyük ölçekte başarısız olursunuz. Süreciniz, erişilebilirliği tanımlama katmanında kodlayan rol tabanlı token'ları içeriyorsa, piyasaya sürebilirsiniz.
Token'ları oluşturun. Oranları yayınlayın. Kontrolleri otomatikleştirin. Marka canlılığını koruyor, arayüz okunabilirliğini sürdürüyor ve denetim yeniden yapılandırma yerine bir formalite haline geliyor.
Need a color system that hits WCAG without flattening the brand? Brainy builds token-layer accessibility into every palette.
Get Started
