Erişilebilirlik, web uygulamasına/web sitesine çeşitli engeller de dahil olmak üzere geniş bir kitle tarafından erişebilme yeteneğidir.

• Yazılım geliştirici olarak çalışıyorsanız veya Web geliştirme alanında bir geliştirici olarak kariyerinize yeni başlıyorsanız, bu Terminolojiyi sık sık dolaşacağınızdan emin olabilirsiniz.
• Bu, ilk başta acemi olarak anlamsız görünebilir, ancak bir web geliştiricisi olarak içgörü ve deneyim kazandıkça, bunun bir web sitesi geliştirmedeki en önemli faktörlerden biri olduğunu göreceksiniz.

Şimdilik renk kontrastının ne olduğuna ve bunun nasıl düzeltileceğine odaklanacağız .

WİEK başarı kriterleri hakkında kısa bir Giriş.

1. İyi bir kurumsal uygulama yapmak için WCAG kuralları adı verilen ve burada ayrıntılı olarak başvurabileceğiniz belirli kurallar/standartlar vardır .
2. Arka plan ve ön plan içeriği (yani, genellikle metin) arasındaki renk kontrast oranı, okunabilirliği sağlayacak kadar büyük olmalıdır (kullanıcı metni hiç zorluk çekmeden veya daha az zorlukla okuyabilmelidir).
3. Genel olarak bir web sitesinin 1.4.3 Minimum kontrast kriterlerine uyması beklenir . ancak tam teşekküllü bir web sitesi yapmak, 1.4.6 Gelişmiş kontrast kriterlerini izlemenizi gerektirir . ilave olarak.

Bir web sitesinin renk kontrastını kontrol etmek için en iyi araç, Siteimprove Erişilebilirlik Denetleyicisini kullanmaktır . Ücretsiz sürüm fazlasıyla yeterli.

1. Web siteniz açılırken uzantı çubuğundaki simgeye tıklayarak bu uzantıyı çalıştırın.

3. Şimdi mavi başlığa tıklayın → ve başarısız olduğu belirli öğeyi vurgulayacaktır. (siteimprove'un nasıl kullanılacağı ile ilgili daha sonra detaylı bir yazı daha oluşturacağım.)

4. Ve oradan, uygun kontrast oranı değerleriyle neyin ve neden başarısız olduğuna bakabilirsiniz.

Renk kontrastı nasıl analiz edilir ve düzeltilir

1. Öncelikle geliştirici araçları sekmenizi açın . Geliştirme araçları sekmesinin üstündeki bu küçük ok simgesine tıklayın ve sayfada vurgulanan öğenin üzerine gelin.

3. Ve bunu gerçek zamanlı olarak düzeltmek için, aşağıdaki GIF'te gösterdiğim gibi renk kaydırıcısını tutarak o öğeyi inceleyebilir ve renk kodunu (çoğunlukla HEX kodudur) değiştirebilirsiniz.

4. Kontrast Oranının 1,99 'den 4,2✅ ve 7,01✅✅'ye nasıl değiştiğine dikkat edin?

5. Tek ✅ Minimum ölçütün karşılandığını ve Çift ✅✅ Gelişmiş ölçütün karşılandığını gösterir. (Kurumsal uygulamalar için her zaman çift onay işareti kullanın).

6. Yapabileceğiniz başka bir şey de, buna benzer bir web sitesini kullanarak gerçek zamanlı olarak doğru oranı elde etmek için harici siteleri kullanmaktır .

Orada, renk kontrastı kriterlerinin ne olduğunu ve bunu nasıl düzelteceğinizi öğrendiniz. Bunu yaparak, geliştirici deneyiminizde bir adım daha ileri gittiniz. Bunu faydalı bulduysanız bir beğeni bırakın.