APCA a kontrast WCAG 2: wzór, status i tryb wysokiego kontrastu

Projektanci sprawdzający kolory prędzej czy później spotykają dwie liczby: współczynnik kontrastu WCAG (4,5:1, 3:1) i wartość APCA, np. Lc 75. Nie zawsze się zgadzają. Ta strona wyjaśnia, jak działa wzór WCAG 2, czym jest APCA i jaki naprawdę ma status oraz jak tryb wysokiego kontrastu Windows odnosi się do obu.

Krótka odpowiedź dla każdego, kto musi spełnić wymóg: przepisy i normy używają współczynnika kontrastu WCAG 2. To ogólna informacja, a nie porada prawna.

Wzór WCAG 2 krok po kroku

WCAG 2.2 definiuje kontrast w dwóch krokach, oba w swoim słowniku.

1. Luminancja względna – jak jasny jest kolor, od 0 dla najciemniejszej czerni do 1 dla najjaśniejszej bieli. Dla każdego kanału sRGB:

C_srgb = C_8bit / 255
C = C_srgb / 12.92                         if C_srgb <= 0.04045
C = ((C_srgb + 0.055) / 1.055) ^ 2.4       otherwise

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Wagi pokazują, że oko jest znacznie bardziej wrażliwe na zieleń niż na błękit. (Przed majem 2021 r. tekst WCAG używał progu 0,03928; W3C zaznacza, że nie ma to praktycznego znaczenia).

2. Współczynnik kontrastu – gdzie L1 to luminancja jaśniejszego koloru, a L2 ciemniejszego:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Wynik mieści się od 1:1 (ten sam kolor) do 21:1 (czerń na bieli). Przykład: szarość #767676 ma luminancję około 0,181, więc na bieli osiąga (1 + 0,05) / (0,181 + 0,05) ≈ 4,54:1 i spełnia minimum 4,5:1. O stopień jaśniejsza #777777 daje około 4,48:1 i nie spełnia – W3C mówi, że wartości nie wolno zaokrąglać, więc 4,499:1 nie spełnia 4,5:1.

Progi

Duży tekst to co najmniej 18 punktów (24 piksele CSS) lub 14 punktów pogrubiony (około 18,66 piksela CSS). W3C tłumaczy wartość 4,5:1 jako kompensację utraty wrażliwości na kontrast, która towarzyszy wzrokowi na poziomie około 20/40. Każdą parę można sprawdzić naszym narzędziem do kontroli kontrastu.

Znane ograniczenia wzoru WCAG 2

Wzór jest prosty i testowalny, dlatego sprawdza się w regulacjach. Ma też ograniczenia, o których wspomina sam dokument Understanding W3C: nie uwzględnia grubości czcionki, a cienkie lub nietypowe czcionki mogą przez antyaliasing wyglądać znacznie słabiej, niż wynika z nominalnego koloru – „współczynnik kontrastu, który nominalnie spełnia wymaganie … ale w praktyce ma znacznie niższy kontrast”. Zalecenie brzmi: użyć grubszych czcionek albo pary kolorów przekraczającej minimum. Wzór zakłada też kolory sRGB.

Wzór jest również symetryczny: zamiana tekstu i tła daje ten sam współczynnik. Projekt APCA idzie dalej i twierdzi, że matematyka kontrastu WCAG 2 „nie modeluje dokładnie ludzkiej percepcji wzrokowej ani zaburzeń widzenia” – to punkt wyjścia APCA.

Czym jest APCA

Accessible Perceptual Contrast Algorithm jest opisany w swoim oficjalnym repozytorium jako metoda oceny przewidująca postrzegany kontrast między kolorami sRGB na monitorze, opracowana na potrzeby prac W3 „Silver” / WCAG 3. Różnice względem WCAG 2 w praktyce:

• Kolejność ma znaczenie. Pierwszy kolor to tekst, drugi to tło; wynik ma znak, który pokazuje polaryzację (ciemny na jasnym lub jasny na ciemnym).
• Inna skala. Wynikiem jest wartość Lc, mniej więcej od −108 do 106, a nie współczynnik.
• Rozmiar i grubość są częścią odpowiedzi. Funkcja wyszukiwania zwraca dla wartości Lc wymagane rozmiary czcionki przy grubościach od 100 do 900. README podaje zasady takie jak maksimum Lc 90 dla czcionek większych niż 24 px przy grubości co najmniej 300.
• Beta. Biblioteka (apca-w3 w npm) jest w publicznej walidacji beta, a README nazywa powiązane kryterium robocze pracą w toku.

Czy APCA jest częścią WCAG 3?

Nie jako ostateczna decyzja. Dwa fakty, oba sprawdzone w oficjalnych źródłach:

1. Repozytorium APCA mówi, że APCA jest oceniany jako zastępstwo matematyki kontrastu WCAG 2 dla przyszłych standardów.
2. Obecny Working Draft WCAG 3 z 10 września 2026 r. mówi: „Algorytm kontrastu używany w WCAG 3 pozostaje do ustalenia.” Jego wymagania kontrastu tekstu mają status developing, a miara jest otwarta. Szkic mówi też, że nie należy go cytować inaczej niż jako pracy w toku.

Zatem APCA jest kandydatem, WCAG 3 jest szkicem i żadne z nich nie jest normatywne. WCAG 2.2 to obecna Rekomendacja W3C, a EN 301 549, europejska norma stojąca za europejskim aktem o dostępności, odwołuje się do kryteriów sukcesu WCAG 2. Para kolorów, która spełnia APCA, ale nie spełnia 4,5:1, nadal nie spełnia wymogu.

WCAG czy APCA: praktyczna zasada

1. Spełnić współczynnik WCAG 2 dla każdego tekstu i każdego elementu interfejsu. To jest wymóg.
2. Użyć APCA, jeśli ktoś chce, jako pomocy projektowej ponad tym: na przykład aby wybrać grubszą czcionkę dla cienkiego tekstu albo zauważyć, że para ledwo spełniająca 4,5:1 nadal trudno się czyta w jasnym tekście na ciemnym tle.
3. Nie przedstawiać wyników APCA jako zgodności. Raporty, deklaracje i przetargi odwołują się do WCAG 2.

Tryb wysokiego kontrastu Windows i wymuszone kolory

„WCAG high contrast mode” to częste wyszukiwanie, ale miesza dwie rzeczy.

Czym to jest. Windows oferuje motywy kontrastu (Windows 11; w Windows 10 nazywano to trybem wysokiego kontrastu). Microsoft opisuje je w Ustawieniach → Dostępność → Motywy kontrastu, ze skrótem lewy Alt + lewy Shift + Print Screen. Przeglądarki stosują wtedy ograniczoną paletę użytkownika do stron internetowych. CSS wykrywa to cechą mediów forced-colors: active oznacza, że agent użytkownika wymusza wybraną przez użytkownika ograniczoną paletę kolorów, a autorowi dostępne są tylko kolory systemowe.

Co mówi WCAG. Żadne kryterium sukcesu WCAG 2.2 nie wymaga trybu wysokiego kontrastu ani obsługi wymuszonych kolorów z nazwy, a serwis nie musi oferować własnego przełącznika wysokiego kontrastu, by spełnić AA. Ale kod może zepsuć stronę osobom korzystającym z takiego trybu, i wtedy zawodzą inne kryteria:

• Fokus. Technika W3C C40 ostrzega, że agenci użytkownika zwykle pomijają box-shadow w trybach wymuszonych kolorów, więc wskaźnik fokusu zrobiony wyłącznie cieniem znika. C40 sugeruje połączenie go z outline: 2px transparent solid dla zgodności z trybami wymuszonych kolorów – dotyczy to 2.4.7 Widoczny fokus.
• Ikony i obramowania. Ikony rysowane obrazami tła oraz kontrolki odróżniane wyłącznie kolorem tła mogą zniknąć. Dotyczy to 1.4.11 Kontrast elementów nietekstowych i 1.4.1 Użycie koloru.
• Nie zakładać większego kontrastu. Specyfikacja Media Queries zauważa, że wymuszone kolory niekoniecznie oznaczają preferencję większego kontrastu; do tego służy prefers-contrast.

Przetestowanie kilku kluczowych stron z włączonym motywem kontrastu to dobra praktyka, mimo że żadne kryterium jej nie wymienia.

Co robią nasze kontrole

Nasze kontrole używają współczynnika kontrastu WCAG 2, tak jak wymagania: niski kontrast tekstu na poziomie AA (1.4.3) i kontrast rozszerzony na poziomie AAA (1.4.6), który nasze raporty pokazują osobno od wyników AA. Nie podajemy wartości APCA. Można uruchomić darmowy WCAG checker na stronie albo sprawdzić jedną parę narzędziem do kontroli kontrastu. Nasze kontrole to automatyczna kontrola, a nie pełny audyt, i nie są poradą prawną.

Najczęstsze pytania

Czego użyć do kontrastu: WCAG czy APCA?

Do spełnienia wymagań należy użyć współczynnika kontrastu WCAG 2: to do niego odwołują się WCAG 2.2, EN 301 549 i oparte na nich przepisy. APCA może być przydatną drugą opinią w projektowaniu, ale dziś nie jest częścią żadnej normatywnej normy.

Czy APCA jest częścią WCAG 3?

Nie jako decyzja. APCA opracowano jako kandydata na metodę dla WCAG 3 i jest w publicznej wersji beta. Obecny Working Draft WCAG 3 z września 2026 r. mówi, że algorytm kontrastu pozostaje do ustalenia, a sam WCAG 3 jest szkicem, a nie standardem.

Jak oblicza się współczynnik kontrastu WCAG?

Należy zamienić oba kolory na luminancję względną: zlinearyzować każdy kanał sRGB, a następnie L = 0,2126 R + 0,7152 G + 0,0722 B. Współczynnik to (L1 + 0,05) / (L2 + 0,05), gdzie L1 to jaśniejszy kolor. Mieści się w zakresie od 1:1 do 21:1 i nie jest zaokrąglany.

Czy WCAG wymaga obsługi trybu wysokiego kontrastu Windows?

Żadne kryterium WCAG nie wymienia trybu wysokiego kontrastu ani wymuszonych kolorów. Własny CSS może jednak zepsuć stronę w tym trybie, np. wskaźnik fokusu zrobiony wyłącznie przez box-shadow, który przeglądarki zwykle tam usuwają. Testowanie w trybie wymuszonych kolorów to dobra praktyka.

Czy para kolorów może spełniać WCAG i nadal być trudna do przeczytania?

Tak. Wzór WCAG nie uwzględnia grubości czcionki, a cienkie czcionki z antyaliasingiem mogą wyglądać słabiej, niż wynika z koloru. W takim przypadku W3C zaleca grubsze czcionki lub większy kontrast niż minimum.

Źródła

• W3C, WCAG 2.2 (definitions of relative luminance and contrast ratio): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C, WCAG 3.0 Working Draft: https://www.w3.org/TR/wcag-3.0/
• APCA, apca-w3 repository: https://github.com/Myndex/apca-w3
• W3C, Technique C40, two-colour focus indicator: https://www.w3.org/WAI/WCAG22/Techniques/css/C40
• W3C, Media Queries Level 5 (forced-colors): https://www.w3.org/TR/mediaqueries-5/
• Microsoft, Change color contrast in Windows: https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696