Värvikontrasti kontrollija

Kontrolli oma värve

Testi värvikombinatsioone, et tagada nende vastavus WCAG juurdepääsetavuse standarditele teksti loetavuse osas.

1.00:1

Kontrastsus

Ebaõnnestus

Väga halb

Tavaline tekst

AA (4.5:1)

AAA (7:1)

Suur tekst

AA (3:1)

AAA (4.5:1)

Teksti värv

Taustavärv

Kiired parandused

Eelvaate pealkiri

Pruun rebane hüppab üle laisa koera

Väikese teksti näide (12px)

Tekst

#ffffff

Taust

#018786

WCAG standardid

Tase AA

Minimaalne kontrastsuhe 4.5:1 tavalise teksti ja 3:1 suure teksti jaoks. Kohustuslik enamikul veebisaitidel.

Tase AAA

Tõhustatud kontrastsuhe 7:1 tavalise teksti ja 4.5:1 suure teksti jaoks. Soovitatav parima juurdepääsetavuse tagamiseks.

Ebapiisav kontrastsus kõigi tekstisuuruste jaoks - ei vasta WCAG standarditele.

Arvuta teksti ja taustavärvide kontrastsuse suhe.

Vali värv kasutades värvivalijat teksti ja tausta jaoks või sisesta värv RGB heksadecimaal formaadis (nt #259 või #2596BE). Saad libistiga kohandada värvi valikut. Veebisisu juurdepääsetavuse juhised (WCAG) pakuvad spetsiaalse juhise, et määrata kindlaks, kas tekst on nägemispuudega kasutajatele loetav. See kriteerium kasutab spetsiaalset algoritmi, et kaardistada värvikombinatsioonid võrreldavateks suheteks. Selle valemi abil väidab WCAG, et minimaalne kontrastsuhe 4.5:1 tekstile ja taustale on piisav tavateksti jaoks ja suure teksti (18+ pt tavaline või 14+ pt valge) jaoks peaks olema vähemalt 3:1.

Põhifunktsioonid

Reaalajas kontrastsuse suhte arvutamine
WCAG AA & AAA vastavuse kontrollimine
HSL liugurid peenhäälestuseks
Mitme eelvaate formaadid

Täpsemad tööriistad

Automaatne värvide parandamine
Teksti ja tausta näidised
Värvinime tuvastamine
Tulemuste eksportimine

Korduma kippuvad küsimused

WCAG AA vastavuseks vajab tavaline tekst vähemalt 4,5:1 kontrastsuse suhet, suur tekst (18pt või 14pt paksus kirjas) aga 3:1.

WCAG AAA nõuab kõrgemaid kontrastsuse suhteid: 7:1 tavalisele tekstile ja 4,5:1 suurele tekstile, AA puhul on need vastavalt 4,5:1 ja 3:1.

Kasuta meie automaatparanduse funktsiooni, et kohandada kas teksti- või taustavärvi, säilitades kujunduse eesmärgi, või reguleeri värve käsitsi HSL liugurite abil, mille visuaalsed näidikud näitavad AA/AAA vastavuseks sobivaid vahemikke.

Rohelised tsoonid ja AA/AAA märgised näitavad WCAG-vastavuseks optimaalseid vahemikke. Suunavihjed (Heledamaks/Tumedamaks) aitavad sul praeguse värvikombinatsiooni põhjal kontrasti parandada.

Jah, võid sisestada mis tahes heksakoode või kasutada värvivalijat kohandatud värvide valimiseks. URL uueneb automaatselt, nii et saad jagada kindlaid värvikombinatsioone.