Preverjanje kontrasta
Preizkusite barve ospredja in ozadja glede skladnosti z WCAG, si oglejte pravi tekst in primerjajte dostopne možnosti Pantone.
Barva ospredja
Barva ozadja
Kontrastno razmerje
Običajno besedilo
WCAG AA 4.5:1Veliko besedilo
WCAG AA 3:1UI komponente
WCAG AA 3:1Predogled v živo
Primer običajnega besedila za preverjanje berljivosti vsebine.
Primer velikega besedila
Dostopni Pantone predlogi
Ta barvni par že dosega izbrani cilj kontrasta.
Več orodij
Kako uporabljati preverjanje kontrasta
- Vnesite HEX barve ali izberite Pantone barve za ospredje in ozadje.
- Preglejte kontrastno razmerje in rezultate WCAG AA ali AAA za običajno besedilo, veliko besedilo in UI komponente.
- Uporabite predogled v živo, zamenjajte barvi, kopirajte CSS ali preizkusite dostopne Pantone predloge.
Primeri uporabe preverjanja kontrasta
- Potrdite pare barv blagovne znamke, preden jih uporabite v digitalnih postavitvah.
- Preverite gumbe, obrazce, navigacijo in druge UI komponente glede berljivega kontrasta.
- Primerjajte palete, navdihnjene s Pantone, preden tiskarske barve prilagodite zaslonom.
- Dokumentirajte rezultate WCAG za preglede dostopnosti in predajo oblikovanja.
Preverjanje barvnega kontrasta za WCAG, UI in Pantone poteke dela
Uporabite to preverjanje kontrasta, ko morate potrditi, da so barva besedila, ozadje, stanje gumba ali paleta blagovne znamke berljivi, preden jih vključite v spletno mesto, aplikacijo, predstavitev ali oblikovalski sistem.
Pravilno preberite rezultat WCAG
Orodje izračuna relativno svetilnost obeh barv in vrne kontrastno razmerje, ki ga uporablja WCAG. Običajno besedilo navadno potrebuje 4.5:1 za AA in 7:1 za AAA, medtem ko imajo veliko besedilo in bistvene UI komponente nižje pragove.
Povežite Pantone barve z digitalno dostopnostjo
Pantone barve se pogosto izberejo za blagovno znamko in tisk, vendar je treba njihove zaslonske ustreznice še vedno preveriti glede dostopnosti. Poiščite imena Pantone ali vrednosti HEX, predoglejte si par in primerjajte dostopne alternative pred predajo oblikovanju ali razvoju.
Praktičen potek za oblikovalce in razvijalce
Začnite z natančnimi vrednostmi HEX iz oblikovalske datoteke, preizkusite smeri ospredja in ozadja, kopirajte CSS ali poročilo in shranite uspešen barvni par skupaj z dokumentacijo Pantone palete.
Pogosta vprašanja o preverjanju kontrasta
Kaj meri to preverjanje kontrasta?
Meri kontrastno razmerje svetilnosti med barvo ospredja in barvo ozadja ter rezultat primerja s pragovi WCAG.
Kakšne so zahteve za kontrast WCAG AA in AAA?
WCAG AA zahteva vsaj 4.5:1 za običajno besedilo in 3:1 za veliko besedilo ali UI komponente. WCAG AAA zahteva 7:1 za običajno besedilo in 4.5:1 za veliko besedilo.
Ali je mogoče Pantone barve preveriti za spletno dostopnost?
Da. Pantone reference je mogoče pretvoriti v zaslonske barvne vrednosti in nato preveriti digitalni kontrast. Končne barve vedno preverite v mediju, kjer bodo prikazane.
Opomba o kontrastu
Rezultati so izračunani iz digitalnih barvnih vrednosti in so namenjeni načrtovanju dostopnosti. Fizični tisk, materiali, osvetlitev in kalibracija zaslona lahko spremenijo zaznani kontrast.