Accessibility: Zbyt niski kontrast

0:00W tej lekcji powiem coś więcej o kontraście wspominałem już o nim

0:04wcześniej gdy robiłem wprowadzenie do różnych narzędzi na przykład do whocanuse

0:08którego w tym przykładzie będziemy akurat też używać no i chciałem opowiedzieć

0:12generalnie o mniej oczywistych przykładach kiedy kontrast po prostu

0:16jest zbyt mały i nie działa jednym z takich przykładów jest po prostu tekst

0:21jeżeli weźmiemy jakąś sekcję z jakiegoś artykułu ten artykuł jest

0:25akurat o składalnych smartfonach możemy zobaczyć że jest tendencja

0:29w typografii żeby nagłówki robić kolorem jaśniejszym nagłówki

0:33niższego poziomu troszkę ciemniejszym kolorem no i samą

0:38treść taką szarawą troszkę ma to oczywiście swoje uzasadnienie i jest bardzo estetyczne

0:42i jest czytelne w większości przypadków natomiast jeżeli będzie

0:46to użyte w złych proporcjach bądź w złym po prostu momencie niestety kontrast

0:51wtedy cierpi jeżeli byśmy tutaj wzięli sobie colour picker i

0:56wybrali sobie kolor tego tekstu ja robię to celowo przez

1:00systemowy colour picker w tym momencie i weźmiemy to sobie do whocanuse

1:04wstawimy to jako tekst no i pobierzemy

1:09sobie również kolor tła skopiujemy

1:13no to widzimy

1:17że kontrast jest 2.7 do 1 i to jest zupełnie za mało tak

1:22naprawdę ten tekst jest niewidoczny praktycznie dla każdego nawet dla osoby która

1:26nie ma problemów ze wzrokiem może być to problem jeżeli zwiększymy

1:30trochę ten text-size no to oczywiście to będzie czytelniejsze natomiast kontrast

1:34się nie zmieni i będzie tak samo nieczytelny dlaczego to w ten sposób przedstawiłem

1:38no bo tutaj nie jest ustawione tak naprawdę kolor tego tekstu jeżeli

1:42byśmy sprawdzili to w chromowych devtoolsach no to

1:46tutaj nie jest napisane jaki jest kontrast tego dlaczego no bo chrome

1:51nie jest w stanie tego sobie obliczyć ponieważ na tym elemencie jest ustawione

1:55opacity na połowę czyli mamy przeźroczystość tego konkretnego

1:59elementu każdego p ustawione na 50% i możemy to faktycznie

2:03zobaczyć tutaj w devtoolsach mamy taką właśnie

2:07właściwość w tym miejscu tak czyli każde p ma opacity 0.3 nawet

2:12a nie 0.5 generalnie ten tekst to nie jest czytelny no i przez to że jakby

2:17narzędzia deweloperskie działają w sposób jaki działają no to nie

2:21widzimy tutaj tego kontrastu więc warto zwracać na to uwagę

2:25w ogóle w jaki sposób zajmujemy się kolorami i naszą typografią bo

2:30narzędzia automatyczne takie jak devtoolsy czy axe

2:34o którym wcześniej już wspomniałem nie będzie w stanie wykryć tego czyli jeśli będziemy

2:38w zły sposób stylowali nasze strony tak naprawdę nie będziemy

2:42w stanie wyłapać w sposób automatyczny większości błędów na przykład związanych z kontrastem

2:46to jest 1 przykład jest on dosyć prosty do naprawienia bo możemy albo

2:52nadpisać tą regułę stylu czyli po prostu podbijając specyficzność

2:56tego selektora no można to zrobić na wiele sposobów oczywiście mozna użyć niesławnego

3:00importanta tylko na cele prezentacyjne

3:05może tego użyje important no i oczywiście to zadziała

3:10natomiast jest to bardzo zła praktyka nie polecam nigdy przenigdy używać importanta lepszym

3:15rozwiązaniem będzie po prostu wejście w plik źródłowy znalezienie takiej reguły

3:19no i dostosowanie jej możemy albo w ogóle pozbyć się tego opacity

3:23albo możemy ustawić ten kolor na bezpośrednio

3:27taki jak tutaj sobie pobraliśmy jeżeli naprawdę takie musi być natomiast tak

3:32jak wspomniałem no nie jest to kolor który będzie wystarczający dla

3:36kontrastu ale teraz devtoolsy będą w stanie nam ten contrast ratio

3:40wyświetlić więc jakby to i tak jest lepsze niż trzymanie tego w opacity

3:44no a najlepszym sposobem jest po prostu użycie innego

3:49koloru który będzie bardziej czytelny w tym momencie no i ddd już tutaj

3:53jak widać jest o wiele lepszy kontrast jest 12.55 więc

3:57jest naprawdę ok no i zmieniamy to w źródłach a nie nadpisujemy styli gdzieś

4:02dalej jeżeli mam taką możliwość kolejny problem to jest tutaj ten link

4:06jest tutaj link widzimy see more możemy tak

4:10naprawdę próbować to zobaczyć bo konrast jest bardzo zły no z czego to wynika z tego że

4:14domyślne stylowanie linków jest takie niebieskie i często po prostu

4:18jest to niewystarczające jeżeli zmienimy kolor tła na jakikolwiek inny więc co

4:22można zrobić no oczywiście ostylować taki link ostylować go można na różne sposoby możemy

4:27mu dać na a na a visited czyli na odwiedzonego

4:32linka na a active ustawić ten sam kolor tylko dla celów prezentacyjnych

4:37kolor ustawimy na aqua czyli tutaj

4:41w tym momencie jest to blue z tej palety kolorów którą sobie zadeklarowałem w base

4:46css tutaj widzimy deklarację dla blue więc to jest aqua zapisujemy

4:51no i to już spełnia zdecydowanie wymogi to jest naprawdę fajny

4:55kontrast jest to mocny jaskrawy kolor na ciemnym tle no

4:59i kontrast jest 13.6 to jest nawet więcej niż ten nasz

5:03paragraf z tekstem bardzo fajny kolor generalnie aqua na ciemnym jest

5:07dobrym połączeniem warto jeszcze też o tym pomyśleć żeby każde

5:11z pseudo stanów na przykład link który jest odwiedzany miały

5:15troszkę inne te style a nie takie same ponieważ jeżeli ktoś faktycznie wejdzie w ten link i

5:20cofnie się no to już nie będzie miał tej informacji że ten link konkretny odwiedził te rzeczy są tutaj nie

5:24bez powodu powstały bardzo dawno temu gdy sieć dopiero się rozwijała

5:28i nie powinniśmy o tym zapominać więc tak naprawdę możemy tutaj zostawić

5:32to a jako generyczny styl no i tutaj powiedzmy

5:36że na a visited a active możemy już ustawić taki sam kolor jakiś

5:41bardziej fioletowy niech będzie rebeccapurple oczywiście wtedy nam troszkę

5:46spadnie kontrast jeżeli go odwiedzimy ja go nie chcę odwiedzać żeby nie zepsuć podglądu

5:50możecie go oczywiście odwiedzić samodzielnie ale też warto pamiętać o tym

5:54żeby tych pseudo stanów używać więc to co bym chciał żebyście wynieśli

5:59z tej lekcji jest to że narzędzia automatyczne które sprawdzają kontrast

6:03jak narzędzia przeglądarki axe czy inne generalnie zautomatyzowane audyty

6:08nie będą w stanie wyłapać wszystkiego jeżeli będziecie tworzyć leyouty w sposób

6:12niestandardowy na przykład ociemniając cały paragraf z tekstem poprzez

6:16oppacity no i zawsze warto porównać sobie faktyczny kolor wyświetlany

6:20z faktycznie wyświetlanym tłem na przykład w takim narzędziu jak whocanuse