← Nazaj na funkcije
Free

Preverjevalnik kontrasta

Preverjevalnik kontrasta izračuna razmerje kontrasta WCAG 2.1 med dvema barvama in ju oceni glede na pragove AA/AAA za navadno in veliko besedilo. Predogled v živo prikaže besedilo, izrisano v izbranih barvah, gumb "izberi ozadje strani" pa vzorči trenutno stran.

Dostopnost je vse pogosteje zahtevana — skladnost s standardom WCAG je v mnogih pravnih ureditvah zakonska zahteva, tudi kjer ni, pa slab kontrast odriva uporabnike. Preverjevalnik kontrasta vam takoj pove, ali poljubni dve barvi ustrezata standardom WCAG. Izberite ospredje in ozadje z izbirnikom barv ali prilepite vrednosti hex; orodje izračuna razmerje kontrasta po uradni formuli za svetlost WCAG in ga oceni glede na štiri pragove: AA navadno (≥4,5:1), AA veliko (≥3:1), AAA navadno (≥7:1) in AAA veliko (≥4,5:1). Vsak prag prikaže jasno oznako Uspešno/Neuspešno. Predogled v živo izriše veliko in navadno besedilo v izbranih barvah, tako da vidite dejanski vizualni učinek. Priročen gumb vzorči barvo ozadja telesa trenutne strani — uporabno pri preverjanju, ali kombinacija barv na resnični strani ustreza zahtevam. Vse teče lokalno v vašem brskalniku, brez nalaganja podatkov.

Predogled v živo
example.com
Primerjalnik kontrasta WCAG 2.1
Ospredje
#1A1A1A
Ozadje
#FFFFFF
Veliko besedilo izgleda tako
Normalno 14px besedilo izgleda tako
18.10:1
Razmerje kontrasta
Odličan
AA · Normal
✓ Pass
≥ 4.5:1
AA · Large
✓ Pass
≥ 3:1
AAA · Normal
✓ Pass
≥ 7:1
AAA · Large
✓ Pass
≥ 4.5:1
Ključne lastnosti

Takojšen izračun WCAG 2.1

Uporablja uradno formulo za svetlost WCAG za izračun razmerja kontrasta. Rezultat je natančen in se ujema z vsakim skladnim preverjevalnikom dostopnosti.

Štiri ocene naenkrat

Uspešno/neuspešno za AA navadno (≥4,5:1), AA veliko (≥3:1), AAA navadno (≥7:1), AAA veliko (≥4,5:1) — vse prikazano v mreži.

Predogled barv v živo

Izriše dejansko veliko in navadno besedilo v izbranih barvah, tako da poleg številčnega razmerja vidite tudi vizualni učinek.

Izberite ozadje strani

En klik vzorči izračunano barvo ozadja telesa trenutne strani — uporabno za testiranje kombinacij v resničnem svetu.

Vnos s hex ali izbirnikom barv

Vnesite vrednost hex ali uporabite domači izbirnik barv. Vrednosti se dvosmerno usklajujejo, ko urejate katero koli od njiju.

Zamenjava barv

En klik zamenja ospredje in ozadje — uporabno pri preverjanju obrnjenih tem ali stanj ob prehodu miške.

Pogosti primeri uporabe

Oblikovanje dostopnega uporabniškega vmesnika

Pred dokončanjem barvne palete preverite vsako barvo besedila glede na njeno ozadje, da zagotovite skladnost z WCAG AA — s tem se izognete kasnejšemu popravljanju.

Presoja obstoječih strani

Uporabite "izberi ozadje strani" na resnični strani, nato prilepite dejansko barvo besedila — kršitve dostopnosti odkrijete v nekaj minutah brez odpiranja orodja Lighthouse.

Skladnost blagovnih barv

Kadar blagovna znamka izbere barvo, ki morda ne bi ustrezala zahtevam dostopnosti, uporabite preverjevalnik, da najdete najbližjo skladno različico (temnejši/svetlejši odtenek).

Preverjanje stanj ob prehodu miške in aktivnosti

Preverite, ali barve stanj ob prehodu miške, aktivnosti in onemogočenosti še vedno izpolnjujejo zahteve glede kontrasta, ne le privzeto stanje.

Preverjanje temnega načina

Temne teme pogosto ne dosežejo zadostnega kontrasta pri sivem besedilu na sivem ozadju. Preverite svoje najtemnejše sive odtenke glede na najtemnejša ozadja, da to odkrijete.

Kako uporabljati
1

Odprite Preverjevalnik kontrasta

Kliknite ikono Kontrast v vrstici DevSuite Pro. Odpre se plošča s poljema za barvo ospredja in ozadja.

2

Nastavite ospredje in ozadje

Za vsako uporabite izbirnik barv ali prilepite vrednost hex. Predogled v živo se posodobi ob vsaki spremembi barve.

3

Preberite razmerje

Velika številka (npr. 4,8:1) je razmerje kontrasta. Višje je bolje. 3 je absolutni minimum, 4,5 pa je cilj za navadno besedilo.

4

Preverite oznake ocen

Oznake uspešno/neuspešno za AA in AAA, za navadno in veliko besedilo, na hiter pogled pokažejo, za kaj vaša kombinacija ustreza.

5

Prilagajajte, dokler ne uspe

Če ne uspe, prilagodite barve. Potemnite ospredje ali posvetlite ozadje (ali obratno), dokler ciljna raven ne pokaže Uspešno.

Pripravljeni na poskus?

Namestite DevSuite Pro brezplačno in odklenite več kot 64 orodij za razvijalce za svoj brskalnik.

Dodaj v Chrome Dodaj v Edge Dodaj v FireFox