Daha Erişilebilir Tasarım İçin Yüksek Renk Kontrastını Kullanma

Renk Kontrastı için Web Standartları

Renk kontrast oranı İki renk arasındaki kontrast farkını ölçer. Değer ne kadar yüksek olursa, ön plandaki nesneyi (metin, resim, grafik) arka plandan ayırt etmek o kadar kolaydır..

Renkler, gibi farklı şekillerde kontrast oluşturabilir. renk, değer ve doyma. Renk kontrast oranı, World Wide Web için ana uluslararası standartlar organizasyonu olan W3C tarafından sağlanan bir formülle hesaplanmaktadır..

Arasında bir değer alabilir 1: 1 (hiç kontrast yok, ön plan ve arka plan aynı renge sahiptir) ve 21: 1 (maksimum kontrast sadece siyah beyaz arasında var olan).

W3C'nin en yeni Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.0, web geliştiricilerine ve içerik oluşturucularına minimum (Seviye AA) ve artırılmış (Seviye AAA) kabul edilebilir renk kontrast oranı değeri için göstergeler sunar.

AA seviyesi en az gerektirir Normal metin için 4.5: 1 oranı, ve Büyük metinler için 3: 1. Alt yazılar gibi büyük metni okumak çok daha kolay, bu yüzden renk kontrastını düşürmesi gerekiyor.

Gelişmiş seviye olan AAA Seviyesine ulaşmak istiyorsanız, renk düzeninizi en az dikkat gerektiren şekilde daha büyük bir özenle tasarlamanız gerekir. Normal metin için 7: 1 kontrast oranı, ve 4.5: 1 büyük. Bir metin bir logo veya marka adının parçasıysa, WCAG düzeyinde minimum renk kontrastı gerekliliği yoktur.

Biz sadece görsel olarak erişilebilir bir web sitesini arayabiliriz. her ön plan nesnesi ve arka planı arasındaki renk kontrast oranı en az AA Seviyesine ulaşır.

Yüksek Renk Kontrast Oranının Yararları

Daha iyi okunabilirlik sağlayarak, yalnızca görme engelli kullanıcıları değil, aynı zamanda içeriğinizi küçük ekranlarda okuyan insanlar Bir akıllı telefonda veya bir akıllı telefonda Kötü aydınlatma koşulları, ve üzerinde düşük kaliteli monitörler.

İnsanlar, metinle arka plan arasında daha yüksek kontrast olduğunda da daha hızlı okurlar, bu nedenle sitenin içeriğinden sıkılmaları daha fazla zaman alır..

Daha yüksek kontrast oranını uygulamanın tasarımınızın estetiğini olumsuz yönde etkileyeceğinden endişe ediyorsanız, gerçek hayattan örneklerle yüksek kontrast oran kurallarına uymanın hala sonuçlanabileceğini kanıtlayan Contrast İsyanı web projesini kontrol etmeniz gerekir çekici ve havalı tasarımlarda.

Renk Kontrastını Kontrol Etmek İçin Uygulamalar

Web üzerinde, tasarımcıların web sitelerinin renk kontrast oranını kontrol etmelerine yardımcı olabilecek birçok ücretsiz araç bulunmaktadır..

Tasarımınızı renk kontrastı açısından test etmenin en kolay yolu, ana renkleri Photoshop ile veya Firefox için buna uygun bir tarayıcı uzantısı ile seçmek ve değerleri aşağıdaki uygulamalardan birine kopyalamaktır..

Hatırlanması gereken en önemli şey, her zaman ihtiyaç duymanız gerektiğidir. Metin rengi gibi ön plan rengini çevresindeki alana göre karşılaştırır. (Arka plan rengi).

1. WebAim Renk Kontrast Denetleyicisi

WebAim (Web'de Erişilebilirlik Akılda Olma), geliştiricilere, size yardımcı olabilecek genel bir erişilebilirlik değerlendirme uygulaması olan Wave gibi diğer birçok erişilebilirlik araçları arasında basit ama güvenilir bir renk kontrastı kontrolü sunan web erişilebilirliğini destekleyen bir organizasyondur. sitenizin erişilebilirlik sorunlarını hızla değerlendirin.

WebAim'in Renk Kontrastı Denetleyicisi size söyler renkleriniz WCAG AA ve AAA testlerini geçerse, Hem normal hem de büyük metinler için.

2. Snook Renk Kontrast Kontrolü

Halen Shopify'da ön uç geliştirici olarak çalışan Jonathan Snook, on yıldan fazla bir süredir kullanışlı renk kontrastı kontrol aracını barındırmaktadır. Snook'un uygulaması size sağlar HSL ve RGB değerlerini değiştir Ön plan ve arka plan rengini tek tek kullanarak uygun menzil sürgüleri WCAG 2.0 benchmarkları ile uyumlu bir sonuca ulaşana kadar.

CheckMyColours

Giovanni Scala tarafından oluşturulan CheckMyColours, tüm ön plan arkaplan renk kombinasyonlarının renk kontrast oranını kontrol etmenizi sağlar canlı bir web sitesinde.

Hesaplar parlaklık kontrast oranı, parlaklık farkı, ve renk farkı, ve sonuçlar hakkında size tam bir rapor sunar. CheckMyColours'un raporu, sitenizin görsel erişilebilirliğini nasıl geliştirebileceğinizi anlamanızı önemli ölçüde kolaylaştırabilir.

Renk Şeması Tasarımcısı

Renk Düzeni Tasarımcısı, özellikle bir renk kontrastı denetleyicisi değil, aynı zamanda komple renk şemaları tasarımı.

Bu koleksiyona dahil ediyoruz, çünkü renk düzeninizin farklı türlerde görme engelli insanlar tarafından nasıl algılandığını görmenize izin veren bir özelliğe sahiptir. Renklerinizi tam renk körlüğü, protanopy, deuteranopy ve diğer birçok görme bozukluğu için test edebilirsiniz. Uygulamanın Paletton adında daha gelişmiş bir sürümü var, bu da daha karmaşık bir görüntü simülasyonunu mümkün kılıyor (kötü LED ekranları veya zayıf CRT ekranları gibi şeyleri de test edebilirsiniz).

W3C ayrıca, bu kullanışlı Erişilebilirlik Renk Tekeri gibi diğer birçok renk kontrastı aracını bulabileceğiniz büyük bir Web Erişilebilirlik Değerlendirme Araçları Listesi sunar..

Görsel olarak erişilebilir web siteleri oluşturmak için ipuçları

Görsel olarak erişilebilir bir web sitesi oluşturmak istiyorsanız, her zaman iyi bir fikirdir. işlevselliği veya anlamı iletmek için tek başına renk kullanmaktan kaçının. Mevcut durumlarına göre renklerini değiştiren simgeler bunun için tipik örneklerdir.

Mümkünse her zaman Ek görsel ipuçları tasarlayın işlevleri anlamada renkleri farklı gören insanlara yardımcı olan.

Asla unutma düğmelerin, bağlantıların ve menülerin renk kontrastına dikkat edin, Sitenizdeki gezinme aracı oldukları için. Kullanıcılar sitenizde kolayca gezinemezlerse, onları hızla kaybedersiniz. Harekete geçirici arama düğmeleri için erişilebilir renkler ayrıca İyi dönüşüm oranları için çok önemli.

Renk kontrast oranını, tasarım sürecinde mümkün olan en kısa sürede test etmek, müşterinizi sitenin renk düzenini daha sonra tasarım sürecinde değiştirmeye ikna etmek zor olacağından iyi bir iş akışı uygulamasıdır..

Şimdi Okuyun: Web Sitesi Renk Şemasını Seçmek İçin Pratik Yaklaşım