Kontrasztrács

Helyezze teljes palettáját egy N×N-es audit táblázatba — WCAG-arányok és APCA Lc minden előtér × háttér párhoz, egyetlen pillantással eldönthető.

Minden cella mutatja a WCAG arányt és az APCA Lc értéket


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

WCAG AA törzs átmegy Csak AA nagy szöveg Sikertelen

Sorok = szövegszín (előtér), oszlopok = háttér. Minden cella a valódi előtér-háttér párt jeleníti meg két hozzáférhetőségi mérőszámmal: WCAG arány (AA törzs ≥ 4,5, AA nagy ≥ 3,0) és APCA Lc (75+ törzsszöveghez, 60+ nagy szöveghez).

Hogyan auditáljunk egy teljes palettát – adj hozzá, olvass, dönts.

Minden jelölt szín egy N×N mátrixban – hozzáférhetőség minden előtér × háttér párhoz egyszerre.

01
Színek hozzáadása
Hozd be a márka színeit, szemantikai színeket és semlegeseket (legfeljebb 10). A sorok az előtér, az oszlopok a háttér.
02
A táblázat olvasása
Minden cella a WCAG arányt és az APCA Lc értéket mutatja. A pontok akkor világítanak: a törzsszöveghez Lc 75+, a nagyméretű szöveghez 60+ szükséges.
03
Döntés
Rögzítsd a gombpárokat és a törzspárokat a terved specifikációjába; a sikertelen kombinációkat szűrd ki a megjelenés előtt.

Kontrasztrács GYIK

Három gyakori kérdés a teljes mátrixos auditokhoz.

Miért nem ellenőrizzük a párokat egyesével a kontraszteszközben?: 5 szín 30 irányított párt eredményez – az egyesével történő ellenőrzés hibákhoz vezethet. A rács mindent egyszerre mutat, és felfedi a tükrözött kapcsolatokat.
WCAG vagy APCA – melyik számít?: A WCAG 2.1 az, amit a szabályozások ma hivatkoznak; az APCA a WCAG 3 jelöltje, és pontosabban olvassa a sötét módú és alacsony kontrasztú szöveget. Tartsd be a WCAG-ot, értékeld az APCA-val.
Miért vannak mindig ott a fekete és fehér oszlopok?: A fekete vagy fehér szöveg az univerzális tartalék – az, hogy egy szín hogyan teljesít mindkettővel szemben, az alap a szemantikai színek meghatározásához.

Az audit után

A sikeres párokat illeszd be a szemantikai palettádba és a specifikációdba.

Kontrasztellenőrző

WCAG 2.1 kontraszt validálás bármilyen előtér és háttér szín között.

Színvakság szimulátor

8 fajta színlátási zavar szimulálása az akadálymentesség ellenőrzéséhez.

Tudományosan megalapozott, színvakság-biztos paletták

A tudományos publikációk de facto szabványai — Okabe-Ito (a Nature Methods ajánlása), a Paul Tol sorozat, a Nature NPG folyóirat palettája és az észlelésileg egységes Viridis. Minden mintához tartozik egy APCA kontraszt besorolás, és egy 8-típusú színlátás szimulátor ellenőrzi minden palettát élőben.

Szemantikus UI Paletta

Adjon meg egy márkaszínt, kapjon elsődleges / másodlagos / siker / figyelmeztetés / veszély színeket — exportálva Tailwind konfigurációként és CSS változókként.

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

Hogyan auditáljunk egy teljes palettát – adj hozzá, olvass, dönts.

Minden jelölt szín egy N×N mátrixban – hozzáférhetőség minden előtér × háttér párhoz egyszerre.

Színek hozzáadása

Hozd be a márka színeit, szemantikai színeket és semlegeseket (legfeljebb 10). A sorok az előtér, az oszlopok a háttér.

A táblázat olvasása

Minden cella a WCAG arányt és az APCA Lc értéket mutatja. A pontok akkor világítanak: a törzsszöveghez Lc 75+, a nagyméretű szöveghez 60+ szükséges.

Döntés

Rögzítsd a gombpárokat és a törzspárokat a terved specifikációjába; a sikertelen kombinációkat szűrd ki a megjelenés előtt.

Kontrasztrács GYIK

Három gyakori kérdés a teljes mátrixos auditokhoz.

Miért nem ellenőrizzük a párokat egyesével a kontraszteszközben?

5 szín 30 irányított párt eredményez – az egyesével történő ellenőrzés hibákhoz vezethet. A rács mindent egyszerre mutat, és felfedi a tükrözött kapcsolatokat.

WCAG vagy APCA – melyik számít?

A WCAG 2.1 az, amit a szabályozások ma hivatkoznak; az APCA a WCAG 3 jelöltje, és pontosabban olvassa a sötét módú és alacsony kontrasztú szöveget. Tartsd be a WCAG-ot, értékeld az APCA-val.

Miért vannak mindig ott a fekete és fehér oszlopok?

A fekete vagy fehér szöveg az univerzális tartalék – az, hogy egy szín hogyan teljesít mindkettővel szemben, az alap a szemantikai színek meghatározásához.