Nástroj pro kontrast APCA

apcach = APCA + OKLCH. Na základě cílového kontrastu, chromy a odstínu vypočtěte přesnou barvu, která tyto podmínky splňuje – nejprve nastavte „míru kontrastu“, poté získejte barvu.

Role složené barvy

Referenční plocha

Cílový kontrast |Lc|75

Sytost C0.140

Odstín H145°

sRGB

oklch(52.2% 0.140 145.0)

Cíl |Lc|

Naměřeno |Lc|

75.2±0.1

Světlost je určena binárním vyhledáváním: při tomto chromatu a odstínu se jedná o přesnou barvu, která dosahuje cílového kontrastu. · Barva je v gamutu sRGB.

Sestavte ve třech krocích: vyberte roli, nastavte kontrast, získejte barvu.

Převeďte kontrast z validační metriky na výchozí bod — nejprve deklarujte, kolik čitelnosti potřebujete, a engine vypočítá barvu.

01
Vyberte roli a referenci
Bude složená barva textem nebo plochou? Odkaz na čistou bílou, čistou černou nebo zadejte vlastní pozadí.
02
Nastavte cílový kontrast
Přetáhněte |Lc| na cíl (text ≥75, velký text ≥60), poté nastavte sytost a odstín; povolte „Maximální sytost“ pro získání nejnasycenější realizovatelné hodnoty pro daný odstín.
03
Kopírování a použití
Naměřená |Lc| sleduje cíl v reálném čase (v rámci ±0,1); zkopírujte oklch()/hex/rgb() přímo do CSS.

Často kladené otázky k kontrastní kompozici

Tři často kladené otázky o apcach.

Proč APCA místo poměru WCAG?: APCA (Lc 0–108) hodnotí čitelnost podle velikosti a tloušťky písma a je mnohem přesnější pro tmavý režim a kontrast střední úrovně; je kandidátem na WCAG 3. Přímé skládání proti |Lc| činí výsledky nativně správné podle APCA.
Jaký cílový kontrast mám použít?: Pravidla: text ≥75, nadpisy ≥60, prvky UI/ikony ≥45, dekorativní prvky ≥30. Nad 90 je extrémní kontrast, většinou pro malý nebo speciální zobrazovaný text.
Co dělá „Maximální sytost“?: Při stejném odstínu a kontrastu je vyšší sytost živější, ale mimo gamut sRGB ji nelze zobrazit. Při povolení engine provádí binární vyhledávání na okraji gamutu a vrací nejnasycenější realizovatelnou barvu.

Po skládání

Znovu zkontrolujte složenou barvu podle poměru WCAG v nástroji pro kontrast, nebo ji rozšiřte na 11stupňovou škálu.

Kontrola kontrastu

Ověření kontrastu podle WCAG 2.1 mezi libovolnou barvou popředí a pozadí.

Editor OKLCH

Upravte L / C / H v percepčně uniformním prostoru OKLCH s živým náhledem a výstupem oklch() / HEX / RGB.

Sémantická paleta pro UI

Zadejte jednu značkovou barvu a získejte primární / sekundární / úspěch / varování / nebezpečí – export jako konfigurace Tailwind a CSS proměnné.

Sestavte ve třech krocích: vyberte roli, nastavte kontrast, získejte barvu.

Převeďte kontrast z validační metriky na výchozí bod — nejprve deklarujte, kolik čitelnosti potřebujete, a engine vypočítá barvu.

Vyberte roli a referenci

Bude složená barva textem nebo plochou? Odkaz na čistou bílou, čistou černou nebo zadejte vlastní pozadí.

Nastavte cílový kontrast

Přetáhněte |Lc| na cíl (text ≥75, velký text ≥60), poté nastavte sytost a odstín; povolte „Maximální sytost“ pro získání nejnasycenější realizovatelné hodnoty pro daný odstín.

Kopírování a použití

Naměřená |Lc| sleduje cíl v reálném čase (v rámci ±0,1); zkopírujte oklch()/hex/rgb() přímo do CSS.

Často kladené otázky k kontrastní kompozici

Tři často kladené otázky o apcach.

Proč APCA místo poměru WCAG?

APCA (Lc 0–108) hodnotí čitelnost podle velikosti a tloušťky písma a je mnohem přesnější pro tmavý režim a kontrast střední úrovně; je kandidátem na WCAG 3. Přímé skládání proti |Lc| činí výsledky nativně správné podle APCA.

Jaký cílový kontrast mám použít?

Pravidla: text ≥75, nadpisy ≥60, prvky UI/ikony ≥45, dekorativní prvky ≥30. Nad 90 je extrémní kontrast, většinou pro malý nebo speciální zobrazovaný text.

Co dělá „Maximální sytost“?

Při stejném odstínu a kontrastu je vyšší sytost živější, ale mimo gamut sRGB ji nelze zobrazit. Při povolení engine provádí binární vyhledávání na okraji gamutu a vrací nejnasycenější realizovatelnou barvu.