WCAG Kontrola farebného kontrastu

Vyhodnoťte pomer kontrastu textu a farieb pozadia podľa pokynov WCAG 2.1. Okamžite generujte prístupné úpravy farieb.

HEX/RGB/HSL
HEX/RGB/HSL
Všetko beží lokálne vo vašom prehliadači.

Živý náhľad textu

Veľký nadpis (18pt tučné / 24pt obyčajné)

Toto je prehľad veľkého textového štýlu.

Normálny text (pod 18pt)

Lorem ipsum dolor sit amet, konzektetur adipiscing elita.

Kontrastný pomer

18.6:1

Stav súladu s WCAG 2.1

Požiadavky WCAG AA
Normálny text (4.5:1) PASS
Veľký text (3.0:1) PASS
Požiadavky WCAG AAA
Normálny text (7.0:1) PASS
Veľký text (4.5:1) PASS

Pokyny WCAG 2.1

Jednoducho overte štandardy kontrastu na vytváranie prístupných rozhraní, ktoré sú v súlade s oddielom 508, ADA a pokynmi WCAG AA alebo AAA.

Nástroj na návrhy

Automaticky prispôsobte farby navyše pozdĺž koordinátov HSL, aby ste našli najbližšie alternatívy, ktoré spĺňajú kritériá pomeru kontrastu.

Plne na strane klienta

Výpočty sa vykonávajú lokálne vo vašom prehliadači. Na naše servery sa neprenášajú žiadne farby, súbory ani telemetrické súradnice.

Súvisiace nástroje pre farby

HEX RGB HSL farebný konvertor
Preveďte farby a upravte súradnice svetlosti.
Obrázok Color Picker
Extrahujte farebné palety z návrhových makiet.
CSS konvertor farieb
Konvertovať medzi formátmi CMYK, HSV, RGB, HSL a HEX.

Kontrola farebného kontrastu

Vypočítajte kontrastné pomery WCAG pre farby predného a pozadia a zobrazte výsledky bežnej veľkosti textu.

Vstup
2 platné farby CSS a voliteľný prehľad text.
Výstup
Kontrastný pomer s indikátormi WCAG AA a AAA prechádza alebo chýba.
Skutočné obmedzenia
Výpočet pokrýva len kontrast luminácie; neukazuje rozhranie alebo účet pre písomné renderovanie, pohyb, zameranie alebo nekolorové zväzky.
Súkromie a spracovanie údajov
dve platné CSS farby a voliteľný prehľad text sa spracúva v tejto tabuľke prehliadača. Converter neprijíma ani ukladá; zatváranie alebo nahrávanie stránky vyčistí pracovný stav, pokiaľ nástroj výslovne ponúka lokálne stiahnutie.

Ako používať tento nástroj

  1. Poskytnite dve platné farby CSS a voliteľný prehľad textu v ovládacích prvkoch nástrojov.
  2. Vyberte nastavenia, ktoré ovplyvňujú pomer kontrastu s WCAG AA a AAA prechádza alebo ukazovatele neúspechu, potom spustite nástroj.
  3. Preskúmajte pomer kontrastu s WCAG AA a AAA prechádza alebo neúspešné ukazovatele pred kopírovaním alebo stiahnutím.

Spoločný spôsob zlyhania

Nevhodné farby sa nemôžu merať a transparentnosť bez vyriešeného pozadia môže urobiť pomer bezvýznamný.

Užitočný príklad

Porovnajte text #f2937 na #ffffff pre preskúmanie jeho pomeru pre normálny a veľký text.