Czytelność w grafice webowej

Anna Sorbian | [email protected]

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


?Nagłówki 1 i 3

mają największy

kontrast i

najłatwiej je

przeczytać.

Dla oka

przyjemniejsze są

jednak niższe

kontrasty (2,4).


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










A A AA

Klient może nie

być zachwycony

obecnością

takiego elementu

w centralnym

miejscu na każdej

stronie serwisu.










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


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


1

2

3

4

ALT + SHIFT + I



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





INNE NARZĘDZIA ON-LINE


http://webaim.org/resources/

contrastchecker/

1. WEB AIM CONTRAST CHECKER


http://www.checkmycolours.com/

2. CHECK MY COLOURS


http://www.snook.ca/technical

/colour_contrast/colour.html

3. SNOOK SLIDER


http://gmazzocato.altervista.or

g/colorwheel/wheel.php

4. ACCESSIBILITY COLOR WHEEL


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.


http://www.paciellogroup.com

/resources/contrastAnalyserdio.

com/services/luminositycontras

tratio.php

THE PACIELLO GROUP


http://www.stainlessvision.com/

blog/projects/colour-contrast-

visualiser

STAINLESS VISION


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

COLOR ORACLE


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

Marketing

Czytelność w grafice webowej