WCAG Kontrola barevného kontrastu

Vyhodnoťte poměr kontrastu textu a barev pozadí podle pokynů WCAG 2.1. Okamžitě generujte přístupné úpravy barev.

HEX/RGB/HSL
HEX/RGB/HSL
Vše běží lokálně ve vašem prohlížeči.

Živý náhled textu

Velký nadpis (18pt tučné / 24pt běžné)

Toto je náhled stylu velkého nadpisového textu.

Normální text (pod 18pt)

Lorem ipsum dolor sit amet, konzectetur adipiscing elita.

Poměr kontrastu

18.6:1

Stav shody s WCAG 2.1

Požadavky WCAG AA
Normální text (4.5:1) PASS
Velký text (3.0:1) PASS
Požadavky WCAG AAA
Normální text (7.0:1) PASS
Velký text (4.5:1) PASS

Pokyny WCAG 2.1

Snadno ověřte standardy kontrastu pro vytváření přístupných rozhraní, která splňují pokyny Section 508, ADA a WCAG AA nebo AAA.

Nástroj pro návrhy

Automaticky upravte barvy postupně po koordinátách HSL, abyste našli nejbližší alternativy, které splňují kritéria poměru kontrastu.

Plně na straně klienta

Výpočty jsou prováděny lokálně v kontextu vašeho prohlížeče. Žádné barvy, soubory ani telemetrické souřadnice nejsou přenášeny na naše servery.

Související nástroje pro barvy

Převodník barev HEX RGB HSL
Převádějte barvy a upravujte souřadnice světlosti.
Výběr barvy z obrázku
Extrahujte barevné palety z návrhových maket.
Převodník barev CSS
Konverze mezi formáty CMYK, HSV, RGB, HSL a HEX.

Kontrola barevného kontrastu

Vypočítat kontrastní poměry WCAG pro barvy popředí a pozadí a zobrazit výsledky běžné velikosti textu.

Vstup
Dvě platné barvy CSS a volitelný text náhledu.
Výstup
Kontrastní poměr s WCAG AA a AAA procházejícími nebo selhávajícími ukazateli.
Skutečná omezení
Výpočet pokrývá pouze kontrast jasu; necertifikuje rozhraní ani nezohledňuje vykreslování písma, pohyb, zaměření nebo nebarevné podněty.
Soukromí a nakládání s daty
Dvě platné barvy CSS a volitelný text náhledu jsou zpracovávány v této kartě prohlížeče. Convertr je nepřijímá ani neukládá; zavření nebo obnovení stránky vymaže pracovní stav, pokud nástroj výslovně nenabízí místní stažení.

Jak tento nástroj používat

  1. Poskytněte dvě platné barvy CSS a volitelný náhledový text v ovládacích prvcích nástroje.
  2. Vyberte nastavení, která ovlivňují kontrastní poměr s indikátory úspěchu nebo neúspěchu WCAG AA a AAA, a pak spusťte nástroj.
  3. Zkontrolujte kontrastní poměr s indikátory splnění nebo nesplnění WCAG AA a AAA před kopírováním nebo stažením.

Běžné způsoby selhání

Neplatné barvy nelze měřit a průhlednost bez vyřešeného pozadí může učinit poměr bezvýznamným.

Užitečný příklad

Porovnejte text #1f2937 na #ffffff a zkontrolujte jeho poměr pro normální a velký text.