Interfejsy kontrastowe i czytelność

1) Dlaczego kontrast

• zmniejsza obciążenie poznawcze i zmęczenie,
• poprawia prędkość skanowania interfejsu,
• zwiększa dostępność dla osób z zaburzeniami widzenia i kolorów,
• zmniejsza błędy w powiązanych ze sobą scenariuszach (płatności, formularze, potwierdzenia).

2) Podstawowe pojęcia i wzory

2. 1 Kontrast WCAG

• Kontrast = (L1 + 0. 05 )/( L2 + 0. 05), gdzie „L1 ≥ L2”, „L” oznacza względną jasność (0.. 1).

2. 2 Względna jasność (sRGB)

1. Przynieś elementy R, G, B w zakresie 0.. 1.

• jeżeli 'c ≤ 0. 04045 ', następnie' c _ lin = c/12. 92`
• "c _ lin = (c + 0. 055) / 1. 055) ^ 2. 4`

3. Jasność: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin'

2. 3 Reprezentacje kolorów

HSL/HSV - wygodne do ręcznej regulacji, ale nie jednolite percepcyjnie.
Lab/LCH/OKLCH - bliżej ludzkiej percepcji; OKLCH jest wygodny do systematycznej zmiany lekkości/nasycenia przy zachowaniu czytelności.

3) Normy i cele (WCAG 2. 2)

Tekst ≥ 14 pkt pogrubione lub ≥ 18 pkt (normalne): kontrast co najmniej 3:1 (AA).
Reszta tekstu: kontrast co najmniej 4. 5:1 (AA).
AAA (zwiększona czytelność): 7:1 dla zwykłego tekstu; 4. 5-1 dla dużego.
Ikonografia i ważne elementy niefotograficzne (granice pól wejściowych, skrzynki kontrolne, przełączniki, wskaźniki błędów): 3:1 punkt orientacyjny z tłem.
Stany (hover/focus/pressed/disabled) muszą być co najmniej 3:1 rozróżnialne między stanami lub z tłem, plus wyraźne wskaźniki niefotograficzne (podkreślenie łącza, cienie/ramki, zmiana grubości).

4) System projektowania: żetony kontrastowe

Zalecamy kontrast systemu projektowego jako własność żetonów.

• „fg/primary” α „bg/base” ≥ 7:1 (AAA dla tekstu krytycznego)
• „fg/drugorzędne”, α „bg/base” ≥ 4. 5:1
• „fg/wyciszony” α „bg/subtelny” ≥ 3:1 (tekst usługi)
• „border/default” α „bg/base” ≥ 3:1 (granice pól, kart)
• „interaktywny/domyślny” α „bg/base” ≥ 4. 5:1 (linki/przyciski)
• „aktywne/niepełnosprawne” nie powinny naśladować stanów aktywnych; stosować atrybuty redukcji kontrastu i kursora/ARIA.

• podstawowa lekkość tematu (L), a następnie odchylenia "Z L' dla warstw/powierzchni (" bg/subtelny "," bg/podwyższony "),
• ustalić minimalne pary kontrastowe w badaniach.

5) Jasne i ciemne motywy

Temat światła: tekst jest prawie czarny (nie czysty # 000, ale ciepły/zimny odcień), tło jest białe do lekko przyciemnione, aby zmniejszyć „błyszczący”.
Ciemny motyw: unikaj czystego # 000 tła - głęboki grafit/węgiel drzewny z L-0. 12–0. 16 zmniejsza odblaski; zmiękczyć biały tekst do L-0. 9.
Zachować te same kontrastowe cele w obu tematach; nie pozwalają na utratę czytelności akcentów kolorystycznych na ciemnym tle (często potrzebna jest zmiana 'L' i zmniejszenie nasycenia).

6) Tekst w obrazach i filmach

Użyj nakładek (gradient/przezroczysta warstwa 40-60%) lub umiera pod tekstem.
Napraw co najmniej 4. 5:1 między tekstem a miejscowym tłem śmierci.
Dla dynamicznego wideo - adaptacyjne tło/nakładka poprzez analizę jasności ramki (próbkowanie obszaru centralnego/tła).

7) Państwa i interaktywność

Odniesienia muszą być wyróżniane nie tylko przez kolor: domyślne podkreślenie lub podkreślenie na hover/focus + contrast ≥ 3:1 z zwykłym tekstem.
Przyciski: tekst i ikona ≥ 4. 5:1 do wypełnienia; 3:1 ≥ wypełnić do środowiska.
Błędy/sukces/ostrzeżenia: nie polegaj na kolorze; dodać ikony/wiersze tekstowe; dostarczyć co najmniej 4 kontrast tekstowy. 5:1.

8) Osoby z zaburzeniami koloru

• Deuteranopia/Protanopia (strefa czerwono-zielona): Unikać kombinacji „czerwony vs zielony” bez dodatkowych objawów.
• Tritanopia: niebiesko-żółte pary, aby sprawdzić oddzielnie.
• Zrób kształty i wykresy jasne: etykiety tekstowe, różne rodzaje pociągnięć/markerów, wzory wypełniania, zapisy segmentów.

9) Typografia i tło

Rozmiar ciała: 14-16 px minimum (web), 16-18 px dla stref treści.
Rozstaw linii 1. 4–1. 6 poprawia czytelność na wysokim tle kontrastu.
Unikaj subtelnych stylów na niewystarczającym kontraście.
Tekst na kolorowych tle: Zmniejszyć nasycenie tła i/lub zwiększyć lekkość, aby osiągnąć wskaźnik docelowy.

10) Wykresy, tabele, wykresy

Linie/kolumny ≥ 3:1 do siatki/tła.
Etykiety osi i legendy ≥ 4. 5:1.
Użyj wyróżniających się kształtów/wzorów poza kolorem.

11) Dynamiczny/adaptacyjny kontrast

Automatyczny kontrast: obliczyć kolor kontrastu tekstu do wybranego wypełnienia (np. przez OKLCH: mecz 'L', aby osiągnąć 4. 5:1).
Ustawienia systemu: szacunek „preferuje kontrast”, „wymuszone kolory”, tryby systemu operacyjnego o wysokim kontraście.
Personalizacja: ustawienie „Wysoki kontrast” w aplikacji (wzmocnienie 'WL', zastąpienie akcentów marki bardziej neutralnymi, przy zachowaniu tożsamości marki poprzez formularz/ikony).

12) Procesy sterowania i automatyzacja

12. 1 Dla projektantów

Sprawdź kontrast na układach (zarówno w tematach, jak i na kluczowych tle).
Wpisz „gniazda kontrastowe” w komponentach (tytuł/podstawowy/wtórny/podpowiedź).
Dokument ważny kontekst tła dla każdego komponentu.

12. 2 Dla deweloperów

Pomocnicy jednostki: funkcja obliczania kontrastu i twierdzenia w testach dla par żetonów.
Migawki wizualne z miernikami kontrastu (render ekranu + obliczenia L1/L2 próbki).
Styl linters: zakaz „surowego” koloru, tylko przez żetony.

12. 3 V CI/CD

Sprawdza wszystkie pary 'fg/bg' w tematach i stanach.
Raport o naruszeniu składnika, wariantu, tematu i wartości rzeczywistej (np. 3. 9:1 z wymaganymi 4. 5:1).

13) iGaming specyfiki (opcjonalnie)

Jasne banery promocyjne i karty turniejowe często zjadają tekst. Wymagane ograniczenie nasycenia płyty/nakładki i tła.
Elementy systemowe powiadomień krytycznych (18 +, limity, ryzyko) - AAA dla kontrastu.
W tablicach liderów/współczynnikach: liczby i znaki „+/-” ≥ 4. 5:1, podkreślając wygraną - nie tylko w kolorze (ikony/tagi).

14) Antypattery

Polegaj tylko na kolorze, aby odróżnić stan.
Cienkie szare czcionki na kolorowym tle bez obliczania kontrastu.
„Ciemno na ciemno” w ciemnym trybie, „jasne na jasne” w obszarach promo.
Tekst na tle z szczegółami/hałasem bez śmierci.

15) Lista kontrolna

Tekst podstawowy

• ≥ 4. 5:1 (normalne), ≥ 3:1 (duże/tłuste).

Linki/przyciski

• Tekst przycisku ≥ 4. 5:1 do wypełnienia.
• Odróżnialne 3:1 ≥ stany lub wyraźne wskaźniki.

Ikony/granice

• ≥ 3:1 w tle.

Ciemne/jasne tematy

• Te same cele kontrastowe są osiągane.

Tła medialne

• Nakładka/płyta, współczynnik jest utrzymywany.

Dostępność

• Istnieją funkcje niefotograficzne oprócz koloru.

Automatyzacja

• Testy kontrastu w CI/CD na żetonach i komponentach.

16) Wtrysk tokenu (przykład zapisu)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Uwaga: przybliżone wartości; ostateczne są wybierane przez obliczanie kontrastu w konkretnym temacie.

17) Dokumentacja zespołu

W wytycznych należy określić: cele kontrastowe, przykłady prawdziwych/fałszywych par, macierz 'fg × bg' dla kluczowych komponentów, zasady dotyczące tła multimedialnego oraz sposób włączania trybu High Contrast.
Zachowaj przy życiu stronę Wyjątki i Przyczyny (na przykład, dozwolone 3. 8:1 w wąskim przypadku dużego nagłówka wyświetlacza).

Krótkie podsumowanie

Kontrast to mierzony parametr, a nie parametr smakowy. Ustaw cele (AA/AAA), zarządzaj nimi za pomocą żetonów (najlepiej w OKLCH), sprawdzaj automatycznie w CI i wizualnie w układach, uwzględniaj tematy ciemne/jasne i osoby z zaburzeniami widzenia kolorów. Gwarantuje to czytelność, zmniejsza błędy i zwiększa konwersję.