Jakiś czas temu testerka, z którą pracuje przy jednym z projektów stwierdziła, że skoro strona ma spełniać kryteria WCAG to sprawdzi cały serwis przy użyciu narzędzia Wave. Po badaniu zwróciła parę błędów, w tym jeden powtarzający się na kilku stronach - “zbyt niski kontrast”. Pierwsze pytanie w mojej głowie, ale jak to?. Przecież dobór kolorów w Design Systemie nie pozwalał na to by gdzieś został użyte kolory nie spełniające kontrastu na poziomie 4,5:1.
Otworzyłem pierwszą ze stron z błędem i zacząłem ję przeglądać. Nigdzie nie znalazłem błędu. Uruchomiłem więc Wave. Problemem okazał się być biały tekst na banerze, którego tło było grafiką. Ktoś kto stylował ten komponent użył skróconej deklaracji background a w wartości podał tylko url(). Przeglądarka więc przyjęła wartość background-color jako domyślną, czyli transparent, a ponieważ kolorem tła jednego z rodziców był biały, narzędzie zinterpretowało to jako biały tekst na białym tle.
Pierwsza myśl to, że błąd można w sumie pominąć, bo przecież tak naprawdę mamy tło spełniające kontrast w postaci obrazu. Ale chwile później pojawiła się kolejna - zaraz, a co się stanie gdy z jakiegoś powodu grafika się nie załaduje? Wtedy nie tylko osoby niedowidzące będą mieć problem z odczytaniem tekstu. Ale może się zdarzyć tak, że nikt go nie odczyta.
Jeśli więc dodajemy komponent z grafiką w tle i tekstem, to dobrze jest sprawdzić czy kolor tekstu zachowa odpowiedni kontrast w stosunku do koloru tła. I jeśli będzie zbyt niski zmienić tło na takie przy którym poziom kontrastu będzie przynajmniej wystarczający. No i najlepiej nie pomijać wartość poszczególnych właściwości w skróconej notacji background.