Kompozytor kontrastu APCA

apcach = APCA + OKLCH. Na podstawie docelowego kontrastu, chromatyczności i odcienia oblicz dokładny kolor, który go spełnia — najpierw ustaw „jak dużo kontrastu”, a następnie uzyskaj kolor.

Rola skomponowanego koloru

Powierzchnia referencyjna

Docelowy kontrast |Lc|75

Chromatyczność C0.140

Odcień H145°

sRGB

oklch(52.2% 0.140 145.0)

Cel |Lc|

Zmierzony |Lc|

75.2±0.1

Jasność jest obliczana za pomocą wyszukiwania binarnego: przy danej chromie i odcieniu jest to dokładny kolor, który osiąga docelowy kontrast. · Koloru znajduje się w gamucie sRGB.

Komponuj w trzech krokach: wybierz rolę, ustaw kontrast, uzyskaj kolor.

Przekształć kontrast z metryki walidacyjnej w punkt wyjścia — najpierw określ, jak bardzo potrzebujesz czytelności, a silnik obliczy odpowiedni kolor.

01
Wybierz rolę i odniesienie
Czy skomponowany kolor będzie tekstem czy powierzchnią? Odnieś się do czystej bieli, czystej czerni lub wprowadź niestandardowe tło.
02
Ustaw docelowy kontrast
Przeciągnij |Lc| do wartości docelowej (tekst główny ≥75, duży tekst ≥60), następnie dostrajaj chromę i odcień; włącz "Max chroma", aby uzyskać najbardziej nasyconą możliwą wartość dla danego odcienia.
03
Kopiuj i użyj
Zmierzona wartość |Lc| na bieżąco śledzi cel (w granicach ±0,1); skopiuj oklch()/hex/rgb() bezpośrednio do CSS.

FAQ dotyczące kompozycji kontrastu

Trzy najczęściej zadawane pytania dotyczące apcach.

Dlaczego APCA zamiast współczynnika WCAG?: APCA (Lc 0–108) ocenia czytelność według rozmiaru i grubości czcionki, oraz jest znacznie dokładniejszy dla trybu ciemnego i kontrastu średniego zakresu; jest kandydatem do WCAG 3. Kompozycja bezpośrednio względem |Lc| sprawia, że wyniki są natywnie poprawne pod kątem APCA.
Jaki docelowy kontrast powinienem użyć?: Zasady ogólne: tekst główny ≥75, nagłówki ≥60, elementy UI/ikony ≥45, elementy dekoracyjne ≥30. Powyżej 90 to ekstremalny kontrast, głównie dla małych lub specjalnych typów wyświetlania.
Co robi funkcja "Max chroma"?: Przy tym samym odcieniu i kontraście wyższa chroma jest bardziej żywa, ale poza gamutem sRGB nie może być wyświetlana. Po włączeniu silnik wykonuje wyszukiwanie binarne na krawędzi gamutu i zwraca najbardziej nasycony możliwy kolor.

Po kompozycji

Sprawdź ponownie złożony kolor pod kątem współczynnika WCAG w narzędziu do kontrastu lub rozwiń go na skalę 11-stopniową.

Kontroler kontrastu

Walidacja kontrastu WCAG 2.1 między dowolnym kolorem pierwszoplanowym a tła.

Edytor OKLCH

Dostrajaj L / C / H w postrzegowo jednolitej przestrzeni OKLCH z podglądem na żywo i wynikami w formacie oklch() / HEX / RGB.

Paleta semantycznego interfejsu użytkownika

Podaj jeden kolor marki, a otrzymasz primary / secondary / success / warning / danger — eksportowane jako konfiguracja Tailwind i zmienne CSS.

Komponuj w trzech krokach: wybierz rolę, ustaw kontrast, uzyskaj kolor.

Przekształć kontrast z metryki walidacyjnej w punkt wyjścia — najpierw określ, jak bardzo potrzebujesz czytelności, a silnik obliczy odpowiedni kolor.

Wybierz rolę i odniesienie

Czy skomponowany kolor będzie tekstem czy powierzchnią? Odnieś się do czystej bieli, czystej czerni lub wprowadź niestandardowe tło.

Ustaw docelowy kontrast

Przeciągnij |Lc| do wartości docelowej (tekst główny ≥75, duży tekst ≥60), następnie dostrajaj chromę i odcień; włącz "Max chroma", aby uzyskać najbardziej nasyconą możliwą wartość dla danego odcienia.

Kopiuj i użyj

Zmierzona wartość |Lc| na bieżąco śledzi cel (w granicach ±0,1); skopiuj oklch()/hex/rgb() bezpośrednio do CSS.

FAQ dotyczące kompozycji kontrastu

Trzy najczęściej zadawane pytania dotyczące apcach.

Dlaczego APCA zamiast współczynnika WCAG?

APCA (Lc 0–108) ocenia czytelność według rozmiaru i grubości czcionki, oraz jest znacznie dokładniejszy dla trybu ciemnego i kontrastu średniego zakresu; jest kandydatem do WCAG 3. Kompozycja bezpośrednio względem |Lc| sprawia, że wyniki są natywnie poprawne pod kątem APCA.

Jaki docelowy kontrast powinienem użyć?

Zasady ogólne: tekst główny ≥75, nagłówki ≥60, elementy UI/ikony ≥45, elementy dekoracyjne ≥30. Powyżej 90 to ekstremalny kontrast, głównie dla małych lub specjalnych typów wyświetlania.

Co robi funkcja "Max chroma"?

Przy tym samym odcieniu i kontraście wyższa chroma jest bardziej żywa, ale poza gamutem sRGB nie może być wyświetlana. Po włączeniu silnik wykonuje wyszukiwanie binarne na krawędzi gamutu i zwraca najbardziej nasycony możliwy kolor.