Czytelność tekstu
Testuj czytelność tekstu na dowolnym kolorze tła, sprawdzaj współczynnik kontrastu i wybieraj zestawienia, które pozostają wygodne, spokojne i dostępne dla oczu.
Podgląd na żywo
Przykładowy tytuł
Oto przykładowy tekst do sprawdzenia czytelności. The quick brown fox jumps over the lazy dog. 0123456789
Mniejszy tekst do porównania
Ocena czytelności
Zgodność z WCAG 2.1
Zwykły tekst (≥4,5:1)
Duży tekst (≥3:1)
Zwykły tekst (≥7:1)
Duży tekst (≥4,5:1)
Ustawienia
Testuj czytelność tekstu na dowolnym kolorze tła, sprawdzaj współczynnik kontrastu i wybieraj zestawienia, które pozostają wygodne, spokojne i dostępne dla oczu.
Czytelność tekstu pokazuje wyłącznie elementy sterujące i wyniki związane z jego funkcją. Dostępne opcje zależą od narzędzia i danych wejściowych.
Obsługiwane formaty
Jak to działa
Krok 1
Otwórz Czytelność tekstu i przygotuj dane wymagane przez interfejs
Krok 2
Dostosuj widoczne ustawienia do oczekiwanego wyniku
Krok 3
Sprawdź wynik przed skopiowaniem, eksportem lub ponownym użyciem
Częste błędy, których należy unikać
- Nie zakładaj obsługi formatu lub opcji, jeśli nie ma jej w interfejsie.
- Sprawdź wartości przed użyciem ich w identyfikacji, interfejsie lub pliku produkcyjnym.
- Dla tekstu i UI sprawdź również kontrast.
Wskazówki pro
- Zachowaj wartość źródłową razem z wynikiem, aby porównywać warianty.
- Korzystaj z formatów faktycznie pokazanych przez narzędzie zamiast zgadywać konwersję.
- Na telefonie i tablecie pozwól tekstom i kontrolkom przechodzić do kolejnych wierszy.
Przetwarzanie danych
Sposób przetwarzania zależy od użytej funkcji. Zgoda, analityka i funkcje konta serwisu są oddzielne od operacji na kolorze.
Co robi to narzędzie
Testuj czytelność tekstu na dowolnym kolorze tła, sprawdzaj współczynnik kontrastu i wybieraj zestawienia, które pozostają wygodne, spokojne i dostępne dla oczu. Czytelność tekstu skupia się na tym zadaniu i nie sugeruje funkcji, których nie ma w interfejsie. Użyj dostępnych elementów sterujących, aby uzyskać potrzebny wynik, a następnie sprawdź wyświetlane wartości przed przeniesieniem ich do innego narzędzia, arkusza stylów, pliku projektu lub dokumentu.
Przygotowanie danych wejściowych
Zacznij od danych wymaganych przez Czytelność tekstu: koloru, wartości, obrazu lub ustawienia zależnie od ekranu. Formaty podane na tej stronie to HEX, RGB, HSL, Texte. Jeśli format lub opcja nie pojawia się w interfejsie, nie traktuj jej jako obsługiwanej przez tę konkretną funkcję.
Odczyt i weryfikacja wyniku
Odczytuj wynik w kontekście wykonanej operacji. Porównaj go z wartością źródłową i sprawdź ustawienia wpływające na obliczenie. W ważnych pracach wizualnych warto również obejrzeć rezultat w docelowym interfejsie zamiast polegać wyłącznie na kodzie.
Użycie na telefonie i tablecie
Czytelność tekstu korzysta z responsywnego układu serwisu. Nagłówki, opisy, breadcrumbs i kontrolki mogą przechodzić do kolejnych wierszy na wąskich ekranach, dzięki czemu długie tłumaczenia nie są ucinane. Mimo to sprawdź wynik na urządzeniu i w kontekście, w którym będzie używany.
Ponowne użycie wyniku w projekcie
Po sprawdzeniu wyniku korzystaj tylko z działań rzeczywiście oferowanych przez Czytelność tekstu, takich jak kopiowanie lub eksport, jeśli są dostępne. Zachowaj wartość źródłową, jeśli ustawienie będzie trzeba odtworzyć, a przy kolorach UI dokumentuj także ich rolę i wymagany kontrast.
Powiązane narzędzia
Poradniki i tutoriale
Dowiedz się, jak korzystać z naszych narzędzi dzięki szczegółowym poradnikom.
text-readability: praktyczny przewodnik accessibility
Zlokalizowany przewodnik po text-readability, dobrych praktykach accessibility i typowych błędach.
text-readability: praktyczny przewodnik accessibility
Zlokalizowany przewodnik po text-readability, dobrych praktykach accessibility i typowych błędach.
text-readability: praktyczny przewodnik accessibility
Zlokalizowany przewodnik po text-readability, dobrych praktykach accessibility i typowych błędach.
Najczęściej zadawane pytania
Dowiedz się, jak korzystać z naszych narzędzi dzięki szczegółowym poradnikom.