Ako skontrolujem, či moje farby textu a pozadia spĺňajú WCAG?

Zadajte hex kódy do polí Farba textu a Farba pozadia alebo použite výber farieb. Kontrastný pomer sa zobrazí s hodnotením Prejsť alebo Zlyhať pre normálny a veľký text AA a AAA, plus pre UI komponenty.

Aký kontrastný pomer vyžaduje WCAG AA?

AA vyžaduje 4,5:1 pre normálny text a 3:1 pre veľký text. AAA vyžaduje 7:1 pre normálny text a 4,5:1 pre veľký text. UI komponenty a grafické objekty potrebujú 3:1.

Čo sa považuje za veľký text?

Nástroj považuje bežný text s veľkosťou 18pt (24px) alebo tučný text s veľkosťou 14pt (18,66px) za veľký. Menší text musí spĺňať vyššie prahové hodnoty pre normálny text.

Moje farby nespĺňajú AA. Ako ich opravím?

Použite návrhy na jedno kliknutie Opraviť farbu textu alebo Opraviť pozadie. Upravia svetlosť pri zachovaní rovnakého odtieňa, kým pár nedosiahne 4,5:1.

Aké formáty farieb akceptuje a môžem si vybrať farbu z obrazovky?

Akceptuje 3- a 6-miestne hex hodnoty, ako napríklad #abc alebo #1e293b. Tlačidlo Vybrať farbu z obrazovky sa zobrazí v prehliadačoch, ktoré podporujú rozhranie EyeDropper API, ako napríklad Chromium.

Je to naozaj zadarmo?

Áno. Každý nástroj je zadarmo, bez účtu a bez kreditnej karty. Práca prebieha vo vašom zariadení, nie na našich serveroch, vďaka čomu je jej prevádzka bezplatná.

Funguje to na mobile?

Áno. Funguje v aktuálnych mobilných prehliadačoch na iOS a Androide, bez inštalácie.

🌓

Kontrola kontrastu farieb WCAG zadarmo

Skontrolujte, či dve farby spĺňajú štandardy kontrastu WCAG AA a AAA pre prístupnosť. Živý náhľad vo viacerých veľkostiach textu s automatickými návrhmi pri nedostatočnom kontraste.

Beží vo vašom prehliadačiBez registrácie, bez vyskakovacích okienPrihlásenie nie je potrebnéZadarmo navždy

Po načítaní funguje offline

Farba textu

Farba pozadia

Veľký nadpisový text

Stredný text tela (18px) na čítanie obsahu.

Normálny text tela (16px) pre odseky.

Malý text tela (14px) pre popisky a metadáta.

14,63:1

Kontrastný pomer

✓WCAG AA — Normálny text

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

✓WCAG AA — Veľký text

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

✓WCAG AAA — Normálny text

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

✓WCAG AAA — Veľký text

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

✓UI komponenty / grafické objekty

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

Rýchle predvolby

Vychádza z pravidiel kontrastu WCAG 2.1. Veľký text = 18pt (24px) normálny alebo 14pt (18,66px) tučný. HEX kódy sa aktualizujú oboma smermi: zadajte hex alebo vyberte farbu, oba vstupy zostanú synchronizované.

Bežné použitia

Auditujte webové stránky pre súlad s WCAGOverte, že farby textu vašej lokality spĺňajú normy kontrastu WCAG AA alebo AAA na dostupnosť.
Overte kombinácie farieb značkyTestujte párovanie palety farieb značky, aby ste sa ubezpečili, že fungujú na prístupný UI dizajn.
Testovacie palety farieb v tmavom režimeSvetlý text na tmavom pozadí môže stále zlyhaní kontrast - skontrolujte kombinácie palety tmavého režima tu.
Farebné páry pre tlačené materiályPlagáty, znaky a tlačené materiály tiež potrebujú čitateľný kontrast - zvlášť pre starších čitateľov.
Navrhnite dostupné farby tlačidielZaistite, aby tlačidlá CTA, tlačidlá akcií a odkazy prešli WCAG proti ich pozadinám.

Ako to funguje

Kontrola kontrastu beží výhradne vo vašom prehliadači pomocou algoritmu relatívneho jasu WCAG 2.1 — bez knižnice, bez servera, len ručne napísaná matematika, ktorá presne dodržiava špecifikáciu. Každý výsledok sa aktualizuje v reálnom čase počas písania alebo výberu farby.

1
Vstup hex a normalizácia
Prijímajú sa aj 3-ciferné (#abc) aj 6-ciferné (#aabbcc) hex hodnoty, ktoré sa normalizujú na plné RGB trojice. Neplatný vstup sa okamžite odmietne namiesto tichého predvolenia na čiernu, takže sa zobrazí červený okraj namiesto zavádzajúceho výsledku vyhovuje.
2
Výpočet jasu podľa WCAG
Každá farba sa prevedie na relatívny jas pomocou vzorca WCAG 2.1: hodnoty kanálov sRGB sa linearizujú po častiach gama korekciou (delenie 12,92 pod 0,03928, umocnenie na 2,4 nad touto hodnotou) a potom sa vážia ako 0,2126R + 0,7152G + 0,0722B.
3
Kontrastný pomer a kontroly zhody
Kontrastný pomer sa počíta ako (svetlejší + 0,05) / (tmavší + 0,05) a porovnáva sa so všetkými piatimi prahmi WCAG: AA bežný text (4,5:1), AA veľký text (3:1), AAA bežný text (7:1), AAA veľký text (4,5:1) a prvky rozhrania (3:1). Výsledky sa aktualizujú pri každom stlačení klávesu.
4
Návrhy opravy so zachovaním odtieňa
Keď dvojica nevyhovuje WCAG AA, nástroj prehľadáva priestor svetlosti HSL — postupuje smerom von od pôvodnej svetlosti v oboch smeroch — aby našiel najbližší variant každej farby, ktorý vyhovie pomeru 4,5:1 pri zachovaní rovnakého odtieňa a sýtosti. K dispozícii je aj API EyeDropper (Chromium) na priame odobratie vzorky ľubovoľnej farby z obrazovky.

Súvisiace nástroje

👁️

Simulátor farbosleposti

Pozrite sa, ako váš dizajn vyzerá ľuďom s poruchami farebného videnia. Simuluje protanopiu, deuteranopiu, tritanopiu, achromatopsiu a miernejšie anomálie.

VyskúšajteSúbory zostávajú lokálne

📐

Aké je rozlíšenie mojej obrazovky

Pozrite si rozlíšenie obrazovky v CSS a skutočných pixeloch, veľkosť okna, pomer pixelov, farebnú hĺbku, HDR, podporu dotyku a obnovovaciu frekvenciu a všetko skopírujte.

Vyskúšajte

🖥️

Test mŕtvych pixelov

Skontrolujte, či váš displej nemá mŕtve alebo zaseknuté pixely, pomocou celoobrazovkovej čiernej, bielej, červenej, zelenej, modrej a sivej farby a voliteľného nástroja na opravu zaseknutých pixelov.