Walidacja kontrastu WCAG 2.1 między dowolnym kolorem pierwszoplanowym a tła.
Próbka dużego nagłówka
Próbka tekstu głównego. Szybki brązowy lis przeskakuje nad leniwym psem.
APCA modeluje percepcję ludzką: uwzględnia polarność, rozmiar i grubość tekstu, dlatego lepiej przewiduje czytelność w rzeczywistych warunkach niż współczynnik WCAG 2.1. Lc 75+ dla tekstu głównego, 60+ dla tekstu dużego.
APCA uwzględnia polarność: wyniki dla jasnego na ciemnym i ciemnego na jasnym są różne, dlatego zamiana pierwszego planu/tła daje inny Lc – jest to celowe, a nie błąd.
APCA wykracza poza zaliczenie/niezaliczenie — ta tabela pokazuje minimalny czytelny rozmiar czcionki na wagę przy danym kontraście, bezpośrednio z oficjalnego wyszukiwania czcionek APCA.
Większe rozmiary czytają się lepiej; 777 oznacza, że dana waga nie jest dozwolona przy tym kontraście. Bardzo ciężkie wagi (900) mogą wymagać większych rozmiarów przy małych wymiarach.
Kontrast WCAG 2.1 między dwoma kolorami, z aktualnymi ocenami AA/AAA na czterech poziomach.
Wklej wartość HEX dla koloru pierwszego planu i tła; przykładowy tekst odświeża się natychmiast.
Tekst główny (4,5:1) i tekst duży (3:1) są oceniane oddzielnie, a współczynnik aktualizuje się na żywo.
Nie spełniasz wymagań? Dostosuj jasność, aż przejdzie; przyciski i nagłówki potrzebują tylko AA.
Często pojawiające się pytania dotyczące praktycznego wdrażania dostępności.
Kontynuuj stąd i wykorzystaj kolory w praktyce.
Dowolny kolor na skalę systemu projektowego z 11 krokami, perceptualnie równomierną w OKLCH, kontrast WCAG na każdym kroku, eksport do Tailwind/CSS/SCSS/JSON.
Wpisz kod RAL, Pantone lub NCS — lub dowolny HEX — i dopasuj go we wszystkich 10 systemach standardowych z CIEDE2000 ΔE.
Symuluj 8 typów niedoboru widzenia kolorów, aby audytować dostępność.
Spacja do losowania, blokowanie, przeciąganie do zmiany kolejności, udostępnianie przez URL — wszystko, co powinna robić tablica palet.