Prezentacja Anny Sorbian, Projektanta User Experience Design w Grupie Unity.

1. Anna Sorbian | anna.sorbian@unity.pl
Czytelność w grafice webowej

2. 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).

3. 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).

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).

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

6. SEXY?

7. 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

8. NORMA DOSTĘPNOŚCI ISO/IEC 40500:2012
Normy tworzenia
treści cyfrowych
z uwzględnieniem
potrzeb osób
niepełnosprawnych.
WCAG 2.0

9. A RÓŻNICĘ WIDZI KAŻDY

10. 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

11. 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

12. OZNACZENIE KONTRASTU
biały na białym
czarny na białym
1 : 1
21 : 1

13. 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

14. 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

15. 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

16. 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.

17. 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.

18. DODATKI DO PRZEGLĄDAREK

19. 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

20. DODATKI DO PRZEGLĄDAREK
1
2
3
4
ALT + SHIFT + I

21. DODATKI DO PRZEGLĄDAREK

22. 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

23. DODATKI DO PRZEGLĄDAREK

24. DODATKI DO PRZEGLĄDAREK

25. DODATKI DO PRZEGLĄDAREK

26. DODATKI DO PRZEGLĄDAREK

27. INNE NARZĘDZIA ON-LINE

28. INNE NARZĘDZIA ON-LINE
http://webaim.org/resources/
contrastchecker/
1. WEB AIM CONTRAST CHECKER

29. INNE NARZĘDZIA ON-LINE
http://www.checkmycolours.com/
2. CHECK MY COLOURS

30. INNE NARZĘDZIA ON-LINE
http://www.snook.ca/technical
/colour_contrast/colour.html
3. SNOOK SLIDER

31. INNE NARZĘDZIA ON-LINE
http://gmazzocato.altervista.or
g/colorwheel/wheel.php
4. ACCESSIBILITY COLOR WHEEL

32. INNE NARZĘDZIA ON-LINE
http://juicystudio.com/services
/luminositycontrastratio.php
5. JUICY STUDIO

33. NARZĘDZIA DESKTOPOWE

34. 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ą.

35. 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.

36. NARZĘDZIA DESKTOPOWE
http://www.paciellogroup.com
/resources/contrastAnalyserdio.
com/services/luminositycontras
tratio.php
THE PACIELLO GROUP

37. NARZĘDZIA DESKTOPOWE
http://www.stainlessvision.com/
blog/projects/colour-contrast-
visualiser
STAINLESS VISION

38. NARZĘDZIA DESKTOPOWE
http://www.vischeck.com/vischeck/
COLOR ORACLE

39. NARZĘDZIA DESKTOPOWE
http://www.vischeck.com/vischeck/
VISCHECK

40. ROZMIAR
FONTU
MA ZNACZENIE

41. 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

42. Większe fonty poprawiają
czytelność tekstu
oraz tempo czytania

43. TEGO NIE ROBIMY

44. http://graybit.com/
Grey Bit

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

46. http://www.shopify.com/
Shopify

47. http://www.eccoholiday.com/
Ecco Holiday

48. http://www.traveliada.pl/
Traveliada

49. http://contrastrebellion.com/

50. CZYTELNOŚĆ POZWALA SPRZEDAWAĆ

51. 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