Web sayfasındaki metinleri daha okunabilir hale getirmek aslında çok basit!

Bir arayüz tasarımına başlarken belki de en zor veya karar verme aşaması en uzun süren kısım renk seçimi ve seçilen renklerin kullanımına karar vermektir.

Selman Ay
Selman Ay
Jul 28, 2017 · 4 min read

Bu yazıda “WCAG nedir?”, “WCAG’de AA ve AAA seviyesi ne anlama gelir?” ve “arayüz tasarımlarında kontrast kullanımı nasıl olmalı?” sorularının yanıtlarını hep beraber bulmaya çalışacağız.

WCAG nedir?

Web Content Accessibility Guidelines isminin kısaltması olan WCAG Türkçe’de Web Sayfası İçeriklerinin Erişilebilirlik Kılavuzu anlamına gelir. WCAG, World Wide Web Consortium (W3C) tarafından belirlenmiş ve uygulanması belirli şart ve koşullara bağlı olan web standartlarıdır.

WCAG kılavuzu, bize dizüstü bilgisayar, tablet, akıllı telefon, sanal gerçeklik gözlüğü gibi farklı cihazlarda bir web sayfasını tüm kullanıcılara aynı performansta sunabilmemiz için pek çok evrensel standart belirlemiştir.

WCAG’de AA ve AAA seviyesi ne anlama gelir?

AA ve AAA seviyeleri aslında pek çok WCAG standardından yalnızca birisi ve en önemlilerinden olan asgari “Kontrast” kullanımını tanımlayan derecelendirme sistemidir.

Belki daha önce duymuşsunuzdur veya ilk kez karşılaşıyor da olabilirsiniz -ki bu ihtimal daha yüksek- zira Türkiye’de AA veya AAA seviyesinde bir web sitesi ben henüz göremedim; web sayfalarında okunabilirliği arttırmak adına W3C tarafından WCAG’de belirlenmiş bir AA ve AAA şeklinde kontrast kullanım derecelendirmesi bulunmaktadır.

AA seviyesinde bir kontrast kullanımı en basit açıklamasıyla kabul edilebilir derecenin üzerinde bir kullanımı tanımlar. Kötü veya yanlış bir kullanım değildir. Çoğu zaman AA seviyesi kontrast oranı kullanılmalıdır.

AAA seviyesi ise genellikle resmî kurumlar, çevrimiçi dergiler veya ağırlıklı olarak okunabilir içerik sunan tüm web siteleri tarafından kullanılması gereken bir kontrast seviyesidir. Örneğin Amazon firması, Kindle cihazlarında sunduğu e-kitap içeriklerinde AAA seviyesinde kontrast kullanmaktadır. Bu sayede kullanıcılarına daha okunabilir bir deneyim sunmaktadır.

Karıştırılmaması gereken nokta ise bu iki derecelendirmenin yalnızca dijital ortamlar için geçerli olduğudur. Yani basılı bir işte WCAG stadartlarını kullanamazsınız; CMYK veya Pantone renkleri için farklı kontrast kullanım algoritmaları bulunmaktadır.

Arayüz tasarımlarında kontrast kullanımı nasıl olmalı?

Kontrast kullanımının amacı web sayfasındaki metinleri daha okunaklı hale getirmektir. Metinler dışındaki kullanıcı arayüzü bileşenlerinin bu kontrast kullanım standardına uyma zorunluluğu yoktur. Örneğin beyaz bir zemin üzerinde hangi renkle yazı yazarsak daha kolay okunur sorusunun cevabını WCAG bize “Kontrast” başlığı altında verir ama kırmızı bir zemin üzerinde hangi renk buton kullanmalıyız sorusunun cevabını vermez.

Aşağıdakiler dışında web sayfasındaki metinler en azından AA Seviyesi bir kontrast oranına sahip olmalıdır:

  • Büyük Metinler: Büyük ölçekli metinler (önerilen; 36 puntodan küçük olmayan) ve büyük ölçekli metin görselleri en az 3:1 oranında bir kontrast oranına sahip olmalıdır. Ama olmasa da olur.

“Web sayfasında kullanacağım rengin AA veya AAA seviyesine uyan kontrastlarını nasıl bulacağım” diye düşünmeye başlamış olabilirsiniz. Bunun için karmaşık matematik formülleri var fakat ben bu formülleri size vermek yerine, daha hızlı bir şekilde kullanabileceğiniz çevrimiçi ve ücretsiz bir hizmetin bağlantısını paylaşacağım.

İşte o muhteşem site: http://colorsafe.co/

ColorSafe.co web sitesinin açılış sayfası (Temmuz, 2017)

Siteye girdiğinizde yukarıda görünen sayfa karşınıza çıkacaktır. Sol baştaki renk seçme kutusuna tıkladığınızda bir renk paleti açılıyor; buradan bir renk de seçebilirsiniz veya zaten belirli olan renginizin HEX kodunu yapıştırarak da devam edebilirsiniz.

Burada seçtiğiniz renk yazacağınız yazının artalan (background) rengidir ve bu seçtiğiniz renk üzerinde yazıyı hangi renklerle yazmanız gerektiği sorusunun cevabını bulacaksınız.

Renk seçme kutusunun devamındaki diğer kutular ise renkli zemin üzerinde kullanacağınız metnin fonetik özelliklerini ayarlamamıza yarıyor. Yazı tipi, boyutu ve kalınlığını isteğe bağlı olarak seçebilirsiniz.

En sondaki WCAG Standard seçeneği ise AA seviyesi mi yoksa AAA seviyesi bir kontrast oranı mı bulmak istediğimizi bize soruyor. Eğer bir devlet kurumunun web sayfasını yapmıyorsanız veya işini yaptığınız özel firma tarafından AAA kullanım zorunluluğu belirtilmemişse AA seviyesini seçmeniz yeterlidir. AAA seviyesini seçtiğinizde, belirlediğiniz zemin rengi için çok daha az kontrast renk karşınıza çıkacaktır.

Tüm seçimleri yaptıktan sonra GENERATE COLOR PALETTE düğmesine tıklamanız yeterli.

Ben yukarıdaki örnekte Alizarin Kırmızısı (#e74c3c) için AA seviyesinde kontrast renkleri bulmayı hedeflemiştim ve ColorSafe.co bana Alizarin Kırmızısı zeminler üzerindeki metinlerde kullanabileceğim pek çok AA seviyesi kontrast renk buldu.

Peki ben Alizarin Kırmızısı rengi için AAA seviyesi kontrast renkleri bulmayı hedefleseydim karşıma hangi renkler çıkacaktı? Hemen onun ekran görüntüsünü de aşağıda veriyorum:

Gördüğünüz gibi aynı renk için bu sefer daha az kontrast renk karşımıza çıktı. Bunun sebebi ise AAA seviyesinin daha katı kurallara sahip olmasından kaynaklı diyebiliriz. AAA seviyesi derecelendirme estetik kaygıdan uzaktır, yalnızca daha iyi bir okuma deneyimi sunmak istenildiğinde kullanılmalıdır.

Çoğu zaman AAA seviyesi kullanmamız gerekmez. Ama AAA seviyesindeki kontrast oranı AA seviyesindekine göre web arayüzünde çok daha okunaklı metinler sunmamızı sağlar.

Çok daha okunaklı metinler sunacağım derken tasarımlarınızı mahvetmeyin. Her yerde AAA seviyesi kullanmak sizi iyi bir tasarımcı yapmaz. AA güzeldir. AAA’yı da bilmeniz gerekir.

Renkli günler!

Kullansınlar

Bu yayında Kullanıcı Deneyimi temelinde kullanılabilirlik, kullanıcı testleri, prototipleme veya arayüz tasarımıyla ilgili yazılar bulabilirsiniz.

Selman Ay

Written by

Selman Ay

Digital Product Designer at Vodafone Turkey

Kullansınlar

Bu yayında Kullanıcı Deneyimi temelinde kullanılabilirlik, kullanıcı testleri, prototipleme veya arayüz tasarımıyla ilgili yazılar bulabilirsiniz.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade