Litasamsetningarskoðari

Prófaðu litasamsetningarhlutfall milli forgrunns og bakgrunnslita til að tryggja aðgengi.

Athugaðu litina þína

Prófaðu litasamsetningar til að tryggja að þær uppfylli WCAG aðgengisstaðla fyrir læsileika texta.

18.88 til 1
Andstæða
AAA
Niðurstaða fyrir texta
Frábært

Borði saman: #000000 yfir #F5F2F4

Texti

16px, Regular (400)

Telst sem venjulegur texti.

  • AA (WCAG 1.4.3): að minnsta kosti 4.5:1

    Stenst
  • AAA (WCAG 1.4.6): að minnsta kosti 7:1

    Stenst

UI þættir og myndir

Tákn, rammi í inntaki, fókusvísar og aðrir hlutir sem þú þarft að sjá til að nota viðmótið.

  • AA (WCAG 1.4.11): að minnsta kosti 3:1

    Stenst
18.88 á móti 1. Texti: standast AA, standast AAA. Notendaviðmót: standast.
Hvernig þetta er athugað
Litir bornir saman (eftir blöndun)
Texti #000000 á bakgrunni #F5F2F4
Hlutfallsleg ljósmagn
Texti 0.0000, bakgrunnur 0.8944
Formúla
(L1 + 0.05) / (L2 + 0.05) þar sem L1 er ljósmagn ljósari litarins og L2 ljósmagn dekkri litarins.
Nákvæmur hlutfall
18.8896 á móti 1, sýnt sem 18.88 á móti 1. Sýnda gildið er skorið af, ekki námundað, svo það lítur aldrei betur út en það er. Nákvæma gildið er það sem er borið saman við kröfuna.

Textastærð: 16px, Regular (400)

Telst sem venjulegur texti. Stór texti er að minnsta kosti 24px (18pt), eða að minnsta kosti 18.67px (14pt) þegar hann er feitletraður (þyngd 700 eða meira). Stærðir eru sýndar skornar af, ekki námundaðar.

Telst sem venjulegur texti. Stór texti er að minnsta kosti 24px (18pt), eða að minnsta kosti 18.67px (14pt) þegar hann er feitletraður (þyngd 700 eða meira). Stærðir eru sýndar skornar af, ekki námundaðar.

Aa
Forskoðunartitill

Fljótur brúnn refur hoppar yfir lötan hund

Dæmi um lítinn texta (12px)

Texti
#000000
Bakgrunnur
#f5f2f4

WCAG staðlar

Stig AA

Lágmarks litasamsetningarhlutfall 4.5:1 fyrir venjulegan texta og 3:1 fyrir stóran texta. Nauðsynlegt fyrir flestar vefsíður.

Stig AAA

Bætt litasamsetningarhlutfall 7:1 fyrir venjulegan texta og 4.5:1 fyrir stóran texta. Mælt með fyrir besta aðgengi.

Litasamsetningarprófari

Reiknaðu út litasamsetningarhlutfall texta og bakgrunnslita.

Veldu lit með litavalinu fyrir texta og bakgrunnslit eða sláðu inn lit í RGB sextándakerfi (t.d., #259 eða #2596BE). Þú getur stillt sleðann til að velja lit. Vefefnisaðgengisleiðbeiningar (WCAG) hafa sérstakar leiðbeiningar til að hjálpa við að ákvarða hvort texti sé læsilegur fyrir sjónræna notendur. Þessi viðmið nota sérstaka reikniformúlu til að kortleggja litasamsetningar í samanburðarhlutföll. Samkvæmt þessari formúlu segir WCAG að 4.5:1 litasamsetningarhlutfall með texta og bakgrunni sé nægjanlegt fyrir venjulegan (megin) texta, og stór texti (18+ pt venjulegur, eða 14+ pt feitletraður) ætti að hafa að minnsta kosti 3:1 litasamsetningarhlutfall.

Helstu eiginleikar

  • Rauntíma útreikningur á andstæðu
  • WCAG AA & AAA samræmi athugun
  • HSL sleðar fyrir fínstillingu
  • Fjölbreytt forskoðunarsnið

Ítarleg verkfæri

  • Sjálfvirk litaleiðrétting
  • Texta- og bakgrunnssýni
  • Litanöfn greining
  • Flytja út niðurstöður

Algengar spurningar

Fyrir WCAG AA samræmi þarf venjulegur texti lágmarksbirtuskilahlutfall 4,5:1, en stór texti (18pt eða 14pt feitletraður) þarf 3:1.

WCAG AAA krefst hærri birtuskilahlutfalla: 7:1 fyrir venjulegan texta og 4,5:1 fyrir stóran texta, samanborið við 4,5:1 og 3:1 hjá AA.

Notaðu sjálfvirku lagfæringuna okkar til að stilla annaðhvort texta- eða bakgrunnsliti þannig að hönnunin haldist, eða stilltu liti handvirkt með HSL sleðunum sem sýna sjónrænt bestu svæðin fyrir AA/AAA samræmi.

Grænu svæðin og AA/AAA merkin sýna bestu bilin til að ná WCAG samræmi. Stefnuvísarnir (Ljósara/Dekkra) segja þér í hvora átt á að fara til að ná betri birtuskilum miðað við núverandi litasamsetningu.

Já, þú getur slegið inn hvaða hex-liti sem er eða notað litavalið til að velja sérsniðna liti. Slóðin uppfærist sjálfkrafa svo þú getir deilt ákveðnum litasamsetningum.