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é)

Jedná se o předběžný přehled o velkém titulním 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.
Fotografie Color Picker
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 přední a pozadí barvy a zobrazit výsledky běžné velikosti textu.

Vstup
2 platné barvy CSS a volitelný předpověď textu.
Výstup
Kontrastní poměr s WCAG AA a AAA procházejícími nebo selhávajícími ukazateli.
Reálné omezení
Výpočet pokrývá pouze kontrast světla; neprokázal rozhraní nebo účet pro fontování, pohyb, zaměření nebo nekolorové kousky.
Soukromí a zpracování údajů
2 platné barvy CSS a volitelný předpověď textu se zpracovává v této tabulce prohlížeče. konvertor ho nepřijímá ani neukládá; zavírání nebo přenosu stránky vyčistí stav práce, pokud nástroj výslovně neposkytuje místní stahování.

Jak tento nástroj používat

  1. Zajišťujte dvě platné barvy CSS a volitelný předpověď textu v ovládacích prvcích nástrojů.
  2. Vyberte nastavení, které ovlivňují poměr kontrastu s WCAG AA a AAA procházejí nebo ukazatele selhávají, pak spustit nástroj.
  3. Zkontrolujte kontrastní poměr s WCAG AA a AAA procházející nebo selhávající indikátory před kopírováním nebo stažením.

Společné způsoby selhání

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

Užitečný příklad

Porovnejte text #f2107 na #fffff a zkontrolujte jeho poměr pro normální a velký text.