czytelność w grafice webowej
Post on 25-Jun-2015
161 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related