Czytelność w grafice webowej

Anna Sorbian | anna.sorbian@unity.pl

Czytelność w grafice webowej

CZARNY NA BIAŁYM

Nagłówki 1 i 3

mają największy

kontrast i

najłatwiej je

przeczytać.

Dla oka

przyjemniejsze są

jednak niższe

kontrasty (2,4).

SZARY NA SZARYM

Stąd też część grafików sięga po szarości.

#SEXYNagłówki 1 i 3

mają największy

kontrast i

najłatwiej je

przeczytać.

Dla oka

przyjemniejsze są

jednak niższe

kontrasty (2,4).

SZARY NA SZARYM

Stąd też część grafików sięga po szarości.

?Nagłówki 1 i 3

mają największy

kontrast i

najłatwiej je

przeczytać.

Dla oka

przyjemniejsze są

jednak niższe

kontrasty (2,4).

Stąd też część grafików sięga po szarości.

SEXY?

SPIS TREŚCI

A.KONTRASTY

1. WCAG 2.0

2. BENEFICJENCI

3. DODATKI DO PRZEGLĄDAREK

4. NARZĘDZIA ON-LINE

5. NARZĘDZIE DESKTOPOWE

B. ROZMIAR FONTU

NORMA DOSTĘPNOŚCI ISO/IEC 40500:2012

Normy tworzenia

treści cyfrowych

z uwzględnieniem

potrzeb osób

niepełnosprawnych.

WCAG 2.0

A RÓŻNICĘ WIDZI KAŻDY

KTO SKORZYSTA?

użytkownicy czytający w pośpiechu

słabowidzący

daltoniści

seniorzy

użytkownicy drukujący treści internetowe

użytkownicy małych i monochromatycznych wyświetlaczy

KTO SKORZYSTA?

użytkownicy czytający w pośpiechu

Użytkownik szybciej podejmie decyzję o zakupie,

jeżeli będzie miał swobodny dostęp do treści

oferty!

Dotyczy to zwłaszcza

Słabych wyświetlaczy

Ekranów w miejscach bardzo jasnych

OZNACZENIE KONTRASTU

biały na białym

czarny na białym

1 : 1

21 : 1

WCAG 2.0 – KONTRAST MINIMALNY

Teksty duże

(ponad 18 punktów lub 14 punktów

boldem) oraz duże grafiki tekstowe.

4,5 : 1

3 : 1

Tekst lub grafiki tekstowe standardowe

WCAG 2.0 – TEKSTY ZWOLNIONE Z OGRANICZEŃ

Nie posiadają wymagań minimalnych:

komponenty nieaktywnego interfejsu,

dekoracje

grafiki lub zdjęcia, których znaczenie jest wizualne

logotypy lub znaki handlowe

WCAG 2.0 – KONTROLKI KONTRASTU

A A AA

Jeżeli grafika nie spełnia wymogów

WCAG 2.0 należy zapewnić kontrolki, które

przełączą serwis w wysoki kontrast.

Kontrolki muszą być w kontraście min. 4,5:1

Wersja w wysokim kontraście musi :

posiadać taką samą funkcjonalność,

posiadać taką samą zawartość,

spełniać wymagania kontrastu 4,5:1

WCAG 2.0 – KONTROLKI KONTRASTU

Jeżeli grafika nie spełnia wymogów

WCAG 2.0 należy zapewnić kontrolki, które

przełączą serwis w wysoki kontrast.

Kontrolki muszą być w kontraście min. 4,5:1

Wersja w wysokim kontraście musi :

posiadać taką samą funkcjonalność,

posiadać taką samą zawartość,

spełniać wymagania kontrastu 4,5:1

A A AA

Klient może nie

być zachwycony

obecnością

takiego elementu

w centralnym

miejscu na każdej

stronie serwisu.

WCAG 2.0 – KONTROLKI KONTRASTU

Jeżeli grafika nie spełnia wymogów

WCAG 2.0 należy zapewnić kontrolki, które

przełączą serwis w wysoki kontrast.

Kontrolki muszą być w kontraście min. 4,5:1

Wersja w wysokim kontraście musi :

posiadać taką samą funkcjonalność,

posiadać taką samą zawartość,

spełniać wymagania kontrastu 4,5:1

A A AA

Klient może nie

być zachwycony

obecnością

takiego elementu

w centralnym

miejscu na każdej

stronie serwisu.

Warto więc postawić

na dobry design o

właściwym

kontraście.

DODATKI DO PRZEGLĄDAREK

DODATKI DO PRZEGLĄDAREK

https://addons.mozilla.org/en-us/firefox/addon/wcag-contrast-

checker/developers

https://chrome.google.com/webstore/detail/accessibility-

developer-t/fpkknkljclfencbdbgkenhalefipecmb/reviews?hl=en

ALT + C

ALT + SHIFT + I

DODATKI DO PRZEGLĄDAREK

1

2

3

4

ALT + SHIFT + I

DODATKI DO PRZEGLĄDAREK

DODATKI DO PRZEGLĄDAREK

ALT + C Uwzględnienie

wymogów różnych

wad wzroku

Kontrola

stosowanych

kontrastów

poszczególnych

elementów z

uwzględnieniem

wymogów WCAG

2.0

DODATKI DO PRZEGLĄDAREK

DODATKI DO PRZEGLĄDAREK

DODATKI DO PRZEGLĄDAREK

DODATKI DO PRZEGLĄDAREK

INNE NARZĘDZIA ON-LINE

INNE NARZĘDZIA ON-LINE

http://webaim.org/resources/

contrastchecker/

1. WEB AIM CONTRAST CHECKER

INNE NARZĘDZIA ON-LINE

http://www.checkmycolours.com/

2. CHECK MY COLOURS

INNE NARZĘDZIA ON-LINE

http://www.snook.ca/technical

/colour_contrast/colour.html

3. SNOOK SLIDER

INNE NARZĘDZIA ON-LINE

http://gmazzocato.altervista.or

g/colorwheel/wheel.php

4. ACCESSIBILITY COLOR WHEEL

INNE NARZĘDZIA ON-LINE

http://juicystudio.com/services

/luminositycontrastratio.php

5. JUICY STUDIO

NARZĘDZIA DESKTOPOWE

PODCZAS TWORZENIA GRAFIKI

Choose View > Proof Setup >

Color Blindness

ADOBE PHOTOSHOP – COLOR UNIVERSAL DESIGN Funkcja umożliwiająca

sprawdzenie jak

tworzoną grafikę widzą

osoby z protanopią i

deuteranopią.

PODCZAS TWORZENIA GRAFIKI

Deuteranopia (daltonizm)

Nierozpoznawanie zieleni

(lub mylenie z czerwienią).

Nierozróżnianie koloru czerwonego, pomarańczowego,

żółtego i zielonego.

Percepcja jaskrawości nie zmienia się.

Odbiór fioletu i cyjanu jako ten sam kolor.

Protanopia

Nierozpoznawanie czerwieni

(lub mylenie z zielenią).

Niska percepcja jaskrawości barwy czerwonej,

pomarańczowej i żółtej - czerwony może stać się

ciemnoszarym, wręcz czarnym kolorem.

Odbiór różu i fioletu jako kolor niebieski.

NARZĘDZIA DESKTOPOWE

http://www.paciellogroup.com

/resources/contrastAnalyserdio.

com/services/luminositycontras

tratio.php

THE PACIELLO GROUP

NARZĘDZIA DESKTOPOWE

http://www.stainlessvision.com/

blog/projects/colour-contrast-

visualiser

STAINLESS VISION

NARZĘDZIA DESKTOPOWE

http://www.vischeck.com/vischeck/

COLOR ORACLE

NARZĘDZIA DESKTOPOWE

http://www.vischeck.com/vischeck/

VISCHECK

ROZMIARFONTU

MA ZNACZENIE

Dorośli font czytają 14 pkt szybciej, niż 12 pkt

(szeryfowy oraz bezszeryfowy). Bernard, Liao, and Mills, 2001

Mniejszy font obniża tempo czytania tekstu.Bernard, 2002

Uczestnicy badań niezależnie od wieku

woleli font 12 pkt od 10 pkt. Bernard and Mills, 2003

Większe fonty poprawiają

czytelność tekstu

oraz tempo czytania

TEGO NIE ROBIMY

http://graybit.com/

Grey Bit

http://www.pogodynka.pl/polska/wroclaw_wroclaw

Pogodynka

http://www.shopify.com/

Shopify

http://www.eccoholiday.com/

Ecco Holiday

http://www.traveliada.pl/

Traveliada

http://contrastrebellion.com/

CZYTELNOŚĆ POZWALA SPRZEDAWAĆ

Tytuł prezentacji

Imię Nazwisko

Unity S.A.

ul.Przedmiejska 6-10,

54-201 Wrocław

www.unity.pl

Znajdź nas na FB:

www.unity.pl/facebook