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 ukážka veľkého štýlu nadpisového textu.

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.
Výber farieb z obrázka
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
Dve platné CSS farby a voliteľný text náhľadu.
Výstup
Kontrastný pomer s indikátormi prechodu alebo zlyhania WCAG AA a AAA.
Skutočné obmedzenia
Výpočet pokrýva len kontrast luminancie; necertifikuje rozhranie ani nezohľadňuje vykresľovanie písma, pohyb, zaostrenie alebo nefarebné signály.
Súkromie a spracovanie údajov
dve platné CSS farby a voliteľný text ukážky sa spracúvajú v tejto karte prehliadača. Convertr ho neprijíma ani neukladá; zatvorenie alebo obnovenie stránky vymaže pracovný stav, pokiaľ nástroj výslovne neponú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ú kontrastný pomer s indikátormi prechodu alebo neúspechu WCAG AA a AAA, potom spustite nástroj.
  3. Preskúmajte kontrastný pomer s indikátormi úspešnosti alebo neúspešnosti WCAG AA a AAA pred kopírovaním alebo stiahnutím.

Bežné režimy zlyhania

Neplatné farby sa nedajú merať a transparentnosť bez vyriešeného pozadia môže spôsobiť, že pomer je bezvýznamný.

Užitočný príklad

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