Prześwit Studio iFOX
Podgląd — przeciągnij nagłówek po zdjęciu
Wgraj zdjęcie z hero
Nic nie wychodzi poza tę przeglądarkę — plik czytany jest lokalnie.
Możesz też zacząć od przykładu.
Możesz też zacząć od przykładu.
tu litera jest nieczytelna
Diagnoza
Gotowy CSS
—
Jak to działa
Narzędzie nie mierzy średniej jasności zdjęcia, bo średnia niczego nie mówi — nagłówek psuje jedna jasna chmura
pod jedną literą. Renderuje Twój tekst, bierze maskę liter i sprawdza kontrast tylko pod glifami,
piksel po pikselu. Wynikiem jest najgorszy przypadek, a nie uśredniony.
Próg zależy od stopnia pisma. WCAG traktuje tekst od 24 px, albo od 18,7 px przy grubej odmianie, jako duży — wtedy wystarczy 3:1. Mniejszy wymaga 4,5:1. Dlatego stopień pisma i szerokość hero są w ustawieniach: od nich zależy, jak duże będą litery u odwiedzającego, a więc i który próg obowiązuje.
Przyciemnienie liczone jest przez rozwiązanie równania mieszania kolorów wstecz: szukamy najmniejszego krycia, przy którym najgorszy piksel pod literami przechodzi próg. Nie „na oko ciemniejsze”, tylko konkretna liczba.
Próg zależy od stopnia pisma. WCAG traktuje tekst od 24 px, albo od 18,7 px przy grubej odmianie, jako duży — wtedy wystarczy 3:1. Mniejszy wymaga 4,5:1. Dlatego stopień pisma i szerokość hero są w ustawieniach: od nich zależy, jak duże będą litery u odwiedzającego, a więc i który próg obowiązuje.
Przyciemnienie liczone jest przez rozwiązanie równania mieszania kolorów wstecz: szukamy najmniejszego krycia, przy którym najgorszy piksel pod literami przechodzi próg. Nie „na oko ciemniejsze”, tylko konkretna liczba.
