Kontrola kontrastu WCAG AA a AAA

Ověřte kontrast barev pro WCAG 2.2 AA a AAA, zobrazte náhled velikostí textu a najděte přístupné barevné alternativy.

Najeďte na pole nebo ho vyberte pro zobrazení nápovědy. Zavřete klávesou Escape.

PopředíPozadíNeprůhledné podkladové plátno

Použijte HEX, RGB, RGBA nebo HSL. Průhledné barvy se skládají přes neprůhledné podkladové plátno.

5.84:1

Prahové hodnoty používají poměr s plnou přesností, nikdy zaokrouhlenou zobrazenou hodnotu.

WCAG 2.2
Úroveň	Použít	SC	Minimum	Výsledek
AA	Běžný text	1.4.3	4.5:1	Vyhovuje
AA	Velký text	1.4.3	3:1	Vyhovuje
AAA	Běžný text	1.4.6	7:1	Nevyhovuje
AAA	Velký text	1.4.6	4.5:1	Vyhovuje
AA	Prvky rozhraní a grafika	1.4.11	3:1	Vyhovuje

Text náhleduVelikost písma (CSS px)Tučné

Aa — fiokit.

Běžný text: AA ✓ · AAA ✗

Velký text: alespoň 24 CSS px nebo 18,67 CSS px tučně (14 pt).

Cílová úroveň pro navrženou barvu popředíZpráva

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Běžný text (SC 1.4.3): PASS — 4.5:1
AA Velký text (SC 1.4.3): PASS — 3:1
AAA Běžný text (SC 1.4.6): FAIL — 7:1
AAA Velký text (SC 1.4.6): PASS — 4.5:1
AA Prvky rozhraní a grafika (SC 1.4.11): PASS — 3:1

Tato kontrola ověřuje dvojice barev, nikoli úplnou shodu s WCAG. Sousední barvy, stavy interakce a skutečný obsah posuzujte samostatně.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Jak to funguje

Nastavte popředí, pozadí a neprůhledné podkladové plátno. Výsledky AA a AAA se aktualizují okamžitě. Vyzkoušejte velikost a tloušťku písma, použijte navrženou barvu nebo stáhněte zprávu.

Praktický příklad

Barvy

#155bdf

Časté dotazy

Odesílá se můj text na server?

Ne. Obsah se zpracovává v tomto prohlížeči. Neodesílá se na server ani se neukládá.

Co je dobré vědět o nástroji Kontrola kontrastu WCAG AA a AAA?

Uvádí samostatně prahové hodnoty pro text a netextové prvky. Tato kontrola barev nepotvrzuje úplnou shodu s WCAG.