Jak zkontroluji, zda moje barvy textu a pozadí splňují WCAG?

Zadejte hex kódy do polí Barva textu a Barva pozadí nebo použijte výběr barev. Kontrastní poměr se zobrazí s označením Vyhovuje nebo Nedostatečný kontrast pro normální a velký text AA a AAA a pro UI komponenty.

Jaký kontrastní poměr vyžaduje WCAG AA?

AA vyžaduje 4,5:1 pro normální text a 3:1 pro velký text. AAA vyžaduje 7:1 pro normální text a 4,5:1 pro velký text. UI komponenty a grafické objekty vyžadují 3:1.

Co se považuje za velký text?

Nástroj považuje za velký text běžný text o velikosti 18pt (24px) nebo tučný text o velikosti 14pt (18,66px). Menší text musí splňovat vyšší prahové hodnoty pro normální text.

Moje barvy nevyhovují AA. Jak je mohu opravit?

Použijte jednoklikové návrhy Opravit barvu textu nebo Opravit pozadí. Upraví světlost při zachování stejného odstínu, dokud dvojice nedosáhne poměru 4,5:1.

Jaké barevné formáty nástroj přijímá a mohu vybrat barvu z obrazovky?

Přijímá 3místné a 6místné hex hodnoty, například #abc nebo #1e293b. Tlačítko Vybrat barvu z obrazovky se zobrazí v prohlížečích, které podporují EyeDropper API, jako je Chromium.

Je to opravdu zdarma?

Ano. Každý nástroj je zdarma, bez účtu a bez platební karty. Práce probíhá na vašem zařízení, nikoli na našich serverech, což umožňuje jeho bezplatné používání.

Funguje to na mobilu?

Ano. Funguje v aktuálních mobilních prohlížečích na iOS a Androidu a nic se neinstaluje.

🌓

Kontrola barevného kontrastu WCAG zdarma

Zkontrolujte, zda dvě barvy splňují standardy kontrastu WCAG AA a AAA pro přístupnost. Živý náhled ve více velikostech textu s automatickými návrhy při nedostatečném kontrastu.

Běží ve vašem prohlížečiBez registrace, bez vyskakovacích okenNení nutné přihlášeníZdarma navždy

Funguje offline po načtení

Barva textu

Barva pozadí

Velký nadpis

Střední text (18px) pro čtení a obsah.

Normální text (16px) pro odstavce.

Malý text (14px) pro popisky a metadata.

14,63:1

Kontrastní poměr

✓WCAG AA — normální text

Vyžaduje 4.5:1 · Máte 14,63:1

✓WCAG AA — velký text

Vyžaduje 3.0:1 · Máte 14,63:1

✓WCAG AAA — normální text

Vyžaduje 7.0:1 · Máte 14,63:1

✓WCAG AAA — velký text

Vyžaduje 4.5:1 · Máte 14,63:1

✓UI komponenty / grafické prvky

Vyžaduje 3.0:1 · Máte 14,63:1

Rychlé předvolby

Vychází z pravidel WCAG 2.1 pro kontrast. Velký text = 18pt (24px) normální nebo 14pt (18,66px) tučný. Hex kódy se aktualizují oběma směry: zadejte hex nebo vyberte barvu, oba vstupy zůstanou synchronizované.

Běžná použití

Auditujte webové stránky pro WCAG dodržováníOvěřte, že barvy textu vašeho webu splňují standard WCAG AA nebo AAA kontrastu pro usnadnění.
Ověřte kombinace barev značkyOtestujte kombinace barev značky, abyste zajistili jejich fungování pro přístupný design uživatelského rozhraní.
Testujte palety barev tmavého režimuSvětlý text na tmavém pozadí stále může selhat na kontrastu — kontrolujte zde kombinace barev tmavého režimu.
Barevné páry pro tiskované materiályPlakáty, značky a tisknuté materiály také potřebují čitelný kontrast — zvláště pro starší diváky.
Navrhněte přístupné barvy tlačítekUjistěte se, že CTA, tlačítka akcí a odkazy splňují WCAG na jejich pozadích.

Jak to funguje

Kontrola kontrastu běží zcela ve vašem prohlížeči pomocí algoritmu relativního jasu WCAG 2.1 — bez knihovny, bez serveru, jen ručně napsaná matematika přesně podle specifikace. Každý výsledek se aktualizuje v reálném čase, jak píšete nebo vybíráte barvu.

1
Vstup hexadecimální hodnoty a normalizace
Přijímají se a normalizují na plné trojice RGB jak 3místné (#abc), tak 6místné (#aabbcc) hex hodnoty. Neplatný vstup je okamžitě odmítnut, místo aby tiše přešel na černou, takže se místo zavádějícího výsledku „vyhovuje“ zobrazí červený rámeček.
2
Výpočet jasu podle WCAG
Každá barva se převede na relativní jas pomocí vzorce WCAG 2.1: hodnoty kanálů sRGB se linearizují po částech gama korekcí (dělení 12,92 pod 0,03928, umocnění na 2,4 nad ním) a poté se váží jako 0,2126R + 0,7152G + 0,0722B.
3
Poměr kontrastu a kontroly shody
Poměr kontrastu se počítá jako (světlejší + 0,05) / (tmavší + 0,05) a porovnává se se všemi pěti prahy WCAG: AA běžný text (4,5:1), AA velký text (3:1), AAA běžný text (7:1), AAA velký text (4,5:1) a prvky rozhraní (3:1). Výsledky se aktualizují při každém stisku klávesy.
4
Návrhy oprav se zachováním odstínu
Pokud dvojice nesplní WCAG AA, nástroj prohledává prostor jasu HSL — krok za krokem od původního jasu v obou směrech —, aby našel nejbližší variantu každé barvy, která splňuje 4,5:1 při zachování stejného odstínu a sytosti. K dispozici je také EyeDropper API (Chromium) pro odebrání vzorku libovolné barvy přímo z obrazovky.

Související nástroje

👁️

Simulátor barvosleposti

Podívejte se, jak váš design vypadá pro lidi s poruchou barvového vidění. Simuluje protanopii, deuteranopii, tritanopii, achromatopsii a mírnější anomálie.

VyzkoušetSoubory zůstávají lokální

📐

Jaké je rozlišení mé obrazovky

Podívejte se na rozlišení své obrazovky v CSS a skutečných pixelech, velikost okna, poměr pixelů, barevnou hloubku, HDR, podporu dotyku a obnovovací frekvenci a vše zkopírujte.

Vyzkoušet

🖥️

Test mrtvých pixelů

Zkontrolujte svou obrazovku na mrtvé nebo zamrzlé pixely pomocí celoobrazovkové černé, bílé, červené, zelené, modré a šedé, plus volitelný nástroj na opravu zamrzlých pixelů.