Siatka kontrastu

Umieść całą swoją paletę w tabeli audytu N×N — współczynniki WCAG i wartości APCA Lc dla każdej pary pierwszy plan × tło, sprawdzone na pierwszy rzut oka.

Każda komórka pokazuje współczynnik WCAG oraz APCA Lc


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

Zgodność WCAG AA dla tekstu zwykłego Zgodność AA tylko dla tekstu dużego Niepowodzenie

Wiersze = kolor tekstu (pierwszy plan), kolumny = tło. Każda komórka wyświetla rzeczywistą parę pierwszy plan-na-tle z dwoma metrykami dostępności: współczynnik WCAG (tekst zwykły AA ≥ 4,5, tekst duży AA ≥ 3,0) oraz APCA Lc (75+ dla tekstu zwykłego, 60+ dla tekstu dużego).

Jak audytować całą paletę – dodawaj, czytaj, decyduj.

Wszystkie kandydackie kolory w jednej macierzy N×N – dostępność dla każdej pani pierwszy plan × tło naraz.

01
Dodaj kolory
Wprowadź kolory marki, kolory semantyczne i neutralne (do 10). Wiersze to pierwszoplanowe, kolumny to tła.
02
Czytaj tabelę
Każda komórka pokazuje współczynnik WCAG oraz APCA Lc. Kropki się zapalają: tekst główny wymaga Lc 75+, tekst duży 60+.
03
Zdecyduj
Zapisz pary przycisków i pary tekstu głównego w specyfikacji projektu; wyeliminuj nieprawidłowe kombinacje przed ich wdrożeniem.

FAQ siatki kontrastu

Trzy najczęstsze pytania dotyczące audytów pełnej macierzy.

Dlaczego nie sprawdzać par pojedynczo w narzędziu do kontrastu?: 5 kolorów tworzy 30 par skierowanych – sprawdzanie pojedyncze prowadzi do pominięć. Siatka pokazuje wszystko naraz i ujawnia relacje lustrzane.
WCAG czy APCA – który liczy się?: WCAG 2.1 jest obecnie referencją regulacyjną; APCA jest kandydatem na WCAG 3 i dokładniej odczytuje tekst w trybie ciemnym oraz o niskim kontraście. Zgodność z WCAG, ocena według APCA.
Dlaczego kolumny czarny i biały są zawsze obecne?: Tekst czarny lub biały jest uniwersalnym rozwiązaniem awaryjnym – sposób działania koloru w porównaniu do obu jest podstawą definiowania kolorów semantycznych.

Po audycie

Wprowadź poprawne pary do palety semantycznej i specyfikacji.

Kontroler kontrastu

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

Symulator daltonizmu

Symuluj 8 typów niedoboru widzenia kolorów, aby audytować dostępność.

Naukowe palety bezpieczne dla osób z daltonizmem

De facto standardy publikacji naukowych — Okabe-Ito (zalecane przez Nature Methods), seria Paula Tola, paleta czasopisma Nature NPG oraz postrzegowo jednolity Viridis. Każda próbka ma ocenę kontrastu APCA, a symulator widzenia kolorów w 8 typach weryfikuje każdą paletę na żywo.

Paleta semantycznego interfejsu użytkownika

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

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

Jak audytować całą paletę – dodawaj, czytaj, decyduj.

Wszystkie kandydackie kolory w jednej macierzy N×N – dostępność dla każdej pani pierwszy plan × tło naraz.

Dodaj kolory

Wprowadź kolory marki, kolory semantyczne i neutralne (do 10). Wiersze to pierwszoplanowe, kolumny to tła.

Czytaj tabelę

Każda komórka pokazuje współczynnik WCAG oraz APCA Lc. Kropki się zapalają: tekst główny wymaga Lc 75+, tekst duży 60+.

Zdecyduj

Zapisz pary przycisków i pary tekstu głównego w specyfikacji projektu; wyeliminuj nieprawidłowe kombinacje przed ich wdrożeniem.

FAQ siatki kontrastu

Trzy najczęstsze pytania dotyczące audytów pełnej macierzy.

Dlaczego nie sprawdzać par pojedynczo w narzędziu do kontrastu?

5 kolorów tworzy 30 par skierowanych – sprawdzanie pojedyncze prowadzi do pominięć. Siatka pokazuje wszystko naraz i ujawnia relacje lustrzane.

WCAG czy APCA – który liczy się?

WCAG 2.1 jest obecnie referencją regulacyjną; APCA jest kandydatem na WCAG 3 i dokładniej odczytuje tekst w trybie ciemnym oraz o niskim kontraście. Zgodność z WCAG, ocena według APCA.

Dlaczego kolumny czarny i biały są zawsze obecne?

Tekst czarny lub biały jest uniwersalnym rozwiązaniem awaryjnym – sposób działania koloru w porównaniu do obu jest podstawą definiowania kolorów semantycznych.