Kontrasta pārbaude
Bezmaksas WCAG kontrasta pārbaude. Ievadiet teksta un fona krāsu, lai iegūtu kontrasta attiecību, AA/AAA rezultātus un tuvāko derīgo krāsu.
WCAG 2.2 rezultāti
| AA | AAA | |
|---|---|---|
| Parasts teksts | ||
| Liels teksts | ||
| Saskarnes elementi un grafika | – |
Priekšskatījums
Parasts teksts (16 px). Ātrā brūnā lapsa lec pāri slinkajam sunim.
Liels teksts (24 px)
Liels treknraksta teksts (18,66 px treknrakstā)
Ieteikumi
Kā lietot kontrasta pārbaudi
- Ievadiet Teksta krāsa un Fona krāsa. Izmantojiet krāsu paraugus vai ierakstiet laukos jebkuru CSS vērtību: HEX kodu, piemēram,
#595959,rgb(89 89 89),hsl(0 0% 35%)vai nosaukumu, piemēram,navy. - Kontrasta attiecība atjaunojas, jums rakstot – no 1:1 (nav kontrasta) līdz 21:1 (melns uz balta).
- Tabula WCAG 2.2 rezultāti rāda Iztur vai Neiztur priekš Parasts teksts, Liels teksts un Saskarnes elementi un grafika līmeņos AA un AAA.
- Apskatiet Priekšskatījums: tajā redzams parasts teksts, liels teksts, liels treknraksta teksts, pogas kontūra un ikona jūsu abās krāsās.
- Ja kāds līmenis neiztur, sadaļā Ieteikumi izvēlieties Mērķis. Rīks piedāvā Tuvākā derīgā teksta krāsa un Tuvākā derīgā fona krāsa. Noklikšķiniet uz Lietot, lai kādu piemērotu. Apmainīt krāsas apmaina teksta un fona krāsu.
Viss tiek aprēķināts jūsu pārlūkprogrammā; nekas netiek sūtīts uz serveri.
Kā tiek aprēķināta kontrasta attiecība
WCAG 2.x definē attiecību kā (L1 + 0,05) / (L2 + 0,05), kur L1 ir gaišākās krāsas relatīvais spilgtums, bet L2 – tumšākās. Relatīvo spilgtumu aprēķina no linearizētiem sRGB kanāliem: katru kanālu atšifrē ar sRGB pārneses līkni, pēc tam L = 0,2126 R + 0,7152 G + 0,0722 B. Zaļajam ir vislielākais svars, jo mūsu acis pret to ir visjutīgākās, tāpēc tīri zaļš šķiet daudz spilgtāks par tīri zilu ar tādu pašu „stiprumu“.
Attiecība nekad netiek noapaļota uz augšu. #777777 uz balta dod aptuveni 4,48:1 un neiztur AA parastam tekstam, kaut arī izskatās kā „4,5“. Šis rīks parādīto vērtību nogriež līdz diviem cipariem aiz komata, lai redzamais atbilstu tam, ko pārbauda WCAG.
Ja teksta krāsa ir daļēji caurspīdīga (piemēram, rgb(0 0 0 / 60%)), tā vispirms tiek sajaukta ar fonu, kā to uzzīmētu pārlūkprogramma. Fona krāsas caurspīdīgums tiek ignorēts, jo nav zināms, kas atrodas aiz lapas.
WCAG līmeņi īsumā
| Saturs | AA | AAA |
|---|---|---|
| Parasts teksts | 4,5:1 | 7:1 |
| Liels teksts (24 px vai 18,66 px treknrakstā) | 3:1 | 4,5:1 |
| Saskarnes elementi un nozīmīga grafika | 3:1 | – |
„Liels teksts“ nozīmē vismaz 18 pt (24 CSS pikseļi) vai 14 pt treknrakstā (aptuveni 18,66 px). Logotipiem un tikai dekoratīvam tekstam prasību nav. Noteikums 3:1 saskarnes elementiem (panākuma kritērijs 1.4.11) attiecas uz ievades lauku un pogu apmalēm, fokusa indikatoriem, ikonām un diagrammu līnijām, kas lietotājiem jāredz.
Kā darbojas ieteikumi
Ieteiktās krāsas OKLCH telpā saglabā jūsu krāsas nokrāsu un hromu un maina tikai gaišumu – tumšāku vai gaišāku –, līdz tiek sasniegta mērķa attiecība. Pēc tam rīks izvēlas to no abiem virzieniem, kas vizuāli ir tuvāk jūsu oriģinālajai krāsai, mērot OKLab telpā. Rezultāts tiek pārbaudīts vēlreiz pēc noapaļošanas līdz HEX kodam, tāpēc tas tiešām iztur. Ja neviens gaišums nesasniedz mērķi (piemēram, 7:1 pret vidēji pelēku), rīks to paziņo.
Par APCA
APCA (Accessible Perceptual Contrast Algorithm) ir jaunāks kontrasta modelis, ko izskata iespējamam nākotnes WCAG 3. Tas ņem vērā fonta biezumu, izmēru un polaritāti (tumšs uz gaiša pret gaišu uz tumša). Tas joprojām ir melnraksts un nav juridiska vai normatīva prasība, tāpēc šis rīks ziņo WCAG 2.x rezultātus, kas joprojām ir atsauce Eiropas pieejamības standartam EN 301 549, Section 508 un lielākajai daļai tiesību aktu.
Biežāk uzdotie jautājumi
Kāda kontrasta attiecība vajadzīga pamattekstam?
Vismaz 4,5:1 AA līmenim, ko prasa lielākā daļa likumu un politiku. Garai lasīšanai vai auditorijai ar vāju redzi tiecieties uz 7:1 (AAA).
Vai balts teksts uz manas zīmola krāsas iztur?
Kā teksta krāsu ievadiet baltu, bet zīmola krāsu kā fonu. Daudzi vidēji tonēti zili, oranži un zaļi sasniedz tikai 3:1: tas ir piemēroti lieliem virsrakstiem un pogām ar lieliem uzrakstiem, bet ne mazam tekstam. Ja parastam tekstam vajadzīgs AA, izmantojiet ieteikto fona krāsu.
Kāpēc krāsu secība nemaina attiecību?
Formula vienmēr dala gaišāko spilgtumu ar tumšāko, tāpēc tumšs uz gaiša un gaišs uz tumša dod vienādu attiecību. Uztvertais kontrasts tomēr var nedaudz atšķirties, un tas ir viens no jautājumiem, ko mēģina risināt APCA.
Vai 4,49:1 ir pietiekami tuvu, lai izturētu?
Nē. WCAG sliekšņi ir stingri minimumi: 4,49:1 neiztur AA parastam tekstam. Izmantojiet ieteikumu, lai iegūtu krāsu, kas tiešām iztur.
Vai kontrasta pārbaude der vietturim vai atspējotam tekstam?
Vietturim jāatbilst tam pašam minimumam 4,5:1, ja tas sniedz informāciju. Atspējotām vadīklām kontrasta prasības nav, taču salasāmi atspējotie stāvokļi lietotājiem tomēr palīdz.
Saistītie rīki
- Krāsu atlasītājs Bezmaksas tiešsaistes krāsu atlasītājs. Izvēlieties jebkuru krāsu un uzreiz nokopējiet tās HEX, RGB, HSL, HSV un CMYK kodus ar kontrastu pret balto un melno.
- Krāsu akluma simulators Krāsu akluma simulators: skatiet attēlu ar protanopiju, deuteranopiju, tritanopiju, to vieglākajām formām vai ahromatopsiju – blakus vai ar slīdni.
- Gaišāku un tumšāku toņu ģenerators Ģenerējiet krāsas gaišākus un tumšākus toņus ar soli 5, 10, 20 vai 25 %, sajauktus OKLCH vai sRGB, un eksportējiet kā CSS mainīgos vai Tailwind.