WCAG krāsu kontrasta pārbaudītājs bez maksas
Pārbauda, vai divas krāsas atbilst WCAG AA un AAA kontrasta standartiem pieejamībai. Tiešraides priekšskatījums vairākos teksta izmēros ar automātiskiem ieteikumiem, kad kontrasts ir par zemu.
Liela virsraksta teksts
Vidēja teksta lielums (18px) lasīšanai un saturam.
Parasts teksta lielums (16px) rindkopām.
Mazs teksta lielums (14px) parakstiem un metadatiem.
Kontrasta attiecība
Nepieciešams 4.5:1 · Jūsu attiecība ir 14,63:1
Nepieciešams 3.0:1 · Jūsu attiecība ir 14,63:1
Nepieciešams 7.0:1 · Jūsu attiecība ir 14,63:1
Nepieciešams 4.5:1 · Jūsu attiecība ir 14,63:1
Nepieciešams 3.0:1 · Jūsu attiecība ir 14,63:1
Ātrās iepriekšnoteiktās vērtības
Balstīts uz WCAG 2.1 kontrasta vadlīnijām. Liels teksts = 18pt (24px) parasts vai 14pt (18,66px) treknraksts. HEX kodi atjauninās abos virzienos: ierakstiet HEX vai izvēlieties krāsu, abi lauki paliek sinhronizēti.
Biežākie lietojumi
- Auditējiet vietnes tīmekļa lapas WCAG saderībaiPārbaudiet, vai jūsu vietas teksta krāsas atbilst WCAG AA vai AAA kontrasta standartiem pieejamībai.
- Pārbaudiet zīmola krāsu kombinācijasTestējiet zīmola krāsu paletēm pārus, lai pārliecinātos, ka tie darbojas pieejamam UI dizainam.
- Testējiet tumšā režīma krāsu paletesGaismā teksts uz tumšas fona joprojām var neizdevties kontrasts - pārbaudiet tumšā režīma paletēm pārus šeit.
- Krāsu pāri drukātiem materiāliemPlakāti, zīmes un drukātie materiali arī ir nepieciešams nolasāms kontrasts - it īpaši vecākiem lasītājiem.
- Dizainējiet pieejamas pogu krāsasPārliecinieties, ka CTA, darbības pogas un saites nokārto WCAG pret to foniem.
Kā tas darbojas
Kontrasta pārbaude notiek pilnībā jūsu pārlūkprogrammā, izmantojot WCAG 2.1 relatīvās gaišuma algoritmu — bez bibliotēkas, bez servera, tikai pašrakstīta matemātika, kas precīzi atbilst specifikācijai. Katrs rezultāts atjaunojas reālajā laikā, kamēr rakstāt vai izvēlaties krāsu.
- 1Heksadecimālā ievade un normalizācijaTiek pieņemtas gan 3 ciparu (#abc), gan 6 ciparu (#aabbcc) heksadecimālās vērtības un normalizētas pilnos RGB trīskāršos. Nederīga ievade tiek noraidīta uzreiz, nevis klusi noklusēta uz melnu, tāpēc parādās sarkans rāmis, nevis maldinošs izpildīts rezultāts.
- 2WCAG gaišuma aprēķinsKatra krāsa tiek konvertēta uz relatīvo gaišumu, izmantojot WCAG 2.1 formulu: sRGB kanālu vērtības tiek linearizētas ar pa daļām gamma korekciju (dalot ar 12.92 zem 0.03928, kāpinot 2.4 pakāpē virs tā), tad svērtas kā 0.2126R + 0.7152G + 0.0722B.
- 3Kontrasta attiecība un atbilstības pārbaudesKontrasta attiecība tiek aprēķināta kā (gaišāka + 0.05) / (tumšāka + 0.05) un pārbaudīta pret visiem pieciem WCAG sliekšņiem: AA parasts teksts (4.5:1), AA liels teksts (3:1), AAA parasts teksts (7:1), AAA liels teksts (4.5:1) un UI komponentes (3:1). Rezultāti atjaunojas ar katru taustiņsitienu.
- 4Toni saglabājoši labojumu ieteikumiKad pāris neiztur WCAG AA, rīks meklē HSL gaišuma telpā — soļojot uz āru no sākotnējā gaišuma abos virzienos —, lai atrastu katras krāsas tuvāko variantu, kas iztur 4.5:1, saglabājot to pašu toni un piesātinājumu. EyeDropper API (Chromium) ir arī pieejams, lai paraudzītos jebkuru krāsu tieši no jūsu ekrāna.
Saistītie rīki
Krāsu akluma simulators
Redzi, kā dizains izskatās cilvēkiem ar krāsu redzes traucējumiem. Simulē protanopiju, deuteranopiju, tritanopiju, ahromatopsiju un vieglākas anomālijas.
Kāda ir mana ekrāna izšķirtspēja
Redziet sava ekrāna izšķirtspēju CSS un reālajos pikseļos, loga izmēru, pikseļu attiecību, krāsu dziļumu, HDR, skārienjutības atbalstu un atsvaidzes intensitāti, un kopējiet to visu.
Mirušo pikseļu tests
Pārbaudiet, vai ekrānā nav mirušu vai iestrēgušu pikseļu, izmantojot pilnekrāna melnu, baltu, sarkanu, zaļu, zilu un pelēku krāsu, kā arī papildu iestrēgušu pikseļu labotāju.