Opis
To narzedzie jest dla projektantow, programistow i osob sprawdzajacych UI, ktore musza ocenic pare kolorow bez zgadywania. Pokazuje wspolczynnik kontrastu dla dwoch kolorow i pomaga zrozumiec, jak taka kombinacja zachowa sie w prawdziwych elementach interfejsu, takich jak tekst, etykiety, przyciski czy panele. Przydaje sie przy dopracowywaniu motywow, kontroli kolorow marki i przegladzie komponentu przed wdrozeniem. Jest szczegolnie uzyteczne tam, gdzie kolor wyglada dobrze wizualnie, ale traci czytelnosc w mniejszych napisach, stanach nieaktywnych lub na barwionych tlach.
Zastosowania
- Tekst akapitowy na jasnym tleSprawdz, czy kolor dluzszego tekstu pozostaje czytelny na bieli, kremie lub bardzo jasnych kartach.
- Etykieta przycisku na kolorze markiPrzetestuj, czy bialy, ciemny albo przygaszony napis dobrze wypada na pelnym tle przycisku.
- Szary tekst pomocniczy w panelu danychZweryfikuj, czy metadane, znaczniki czasu i opisy nadal odcinaja sie od gestych widokow tabel.
- Przeglad motywu dark modeOceń tekst na grafitowych panelach, kartach i warstwach nakladanych przed publikacja ciemnego interfejsu.
Jak to dziala
- 1
Wybierz kolor tekstu i kolor tla.
- 2
Narzedzie obliczy wspolczynnik kontrastu miedzy obiema barwami.
- 3
Oceń wynik dla zwyklego tekstu, wiekszych naglowkow i powierzchni interfejsu, gdzie liczy sie czytelnosc.
Przyklady
Tekst artykulu na bieli
Wejscie: Tekst #1F2937 / Tlo #FFFFFF
Wynik: Wysoki kontrast; odpowiedni dla tekstu podstawowego.
Typowe zestawienie dla artykulow, formularzy i dokumentacji.
Biala etykieta na niebieskim przycisku
Wejscie: Tekst #FFFFFF / Tlo #2563EB
Wynik: Czytelne dla przycisku akcji; sprawdz jeszcze rozmiar napisu.
Pomaga ocenic, czy glowny przycisk moze zostac z bialym tekstem.
Jasnoszary podpis na karcie
Wejscie: Tekst #6B7280 / Tlo #F3F4F6
Wynik: Nizszy kontrast; moze pasowac tylko do tekstu pobocznego i wiekszego.
Pokazuje, ze subtelne szarosci moga byc za slabe na bardzo jasnym tle.
FAQ
Co dokladnie oznacza wspolczynnik kontrastu?
Pokazuje, jak bardzo dwa kolory roznia sie w postrzeganej jasnosci. Im wyzsza wartosc, tym zwykle lepsze oddzielenie tekstu od tla.
Dlaczego para kolorow moze wygladac dobrze, a wynik i tak jest slaby?
Nasycone kolory moga wydawac sie mocne, ale miec zbyt zblizona jasnosc. Wspolczynnik opiera sie na roznicy luminancji, a nie na intensywnosci barwy.
Czy rozmiar tekstu ma znaczenie przy odczycie wyniku?
Tak. Male litery potrzebuja mocniejszego zestawienia niz duze naglowki. To, co wystarcza dla tytulu, moze byc za slabe dla tresci lub etykiet formularza.
Jaki blad najczesciej pojawia sie przy sprawdzaniu przyciskow i plakietek?
Czesto testuje sie tylko stan podstawowy, a pomija hover, disabled albo outline. Te wersje moga obnizyc kontrast i pogorszyc czytelnosc.