WCAG գույնի կոնտրաստի ստուգիչ անվճար
Ստուգեք, թե արդյոք երկու գույն բավարարում են WCAG AA ու AAA կոնտրաստի չափանիշներն մատչելիության: Ուղիղ նախադիտում բազմաթիվ տեքստի չափերով՝ ավտոմատ առաջարկություններով, երբ կոնտրաստն ցածր է:
Մեծ վերնագրի տեքստ
Միջին մարմնի տեքստ (18px) ընթերցման և բովանդակության համար:
Սովորական մարմնի տեքստ (16px) պարբերությունների համար:
Փոքր մարմնի տեքստ (14px) ենթագրերի և մետատվյալների համար:
Կոնտրաստի հարաբերակցություն
Պահանջում է 4.5:1 · Դուք ունեք 14,63:1
Պահանջում է 3.0:1 · Դուք ունեք 14,63:1
Պահանջում է 7.0:1 · Դուք ունեք 14,63:1
Պահանջում է 4.5:1 · Դուք ունեք 14,63:1
Պահանջում է 3.0:1 · Դուք ունեք 14,63:1
Արագ նախաձևեր
Հիմնված է WCAG 2.1 կոնտրաստի ուղեցույցների վրա: Մեծ տեքստ = 18pt (24px) սովորական կամ 14pt (18.66px) թավ: Hex կոդերը թարմանում են երկու ուղղությամբ. մուտքագրեք hex կամ ընտրեք գույն, երկու դաշտերը մնում են համաժամանակ:
Տարածված կիրառություններ
- Աուդիտ վեբ էջեր `WCAG համապատասխան`Ստուգել ձեր սայտ տեքստ գույներ համապատասխան WCAG AA կամ AAA հակասական ստանդարտներ մատչելիության համար:
- Հաստատել բրենդ գույն համակցումՓորձ ձեր բրենդ գույն կտրում զույգ `անջատ մատչելի վեբ ձեվ`:
- Թեստ մութ ռեժիմ գույն կտրումԹեթեւ տեքստ մութ ֆոն ստուգել հակասական - ստուգել ձեր մութ ռեժիմ կտրում զույգ այստեղ:
- Գույն զույգ `տեղադրում նյութերի համար`Պաստերներ, նշաններ և տեղադրում նյութերի միևնույն պետք կարդալ հակասական - հատկապես ավելի վեր դիտողների համար:
- Նախագծեք մատչելի կոճակ գույներՀամոզվեք, որ CTA-ներ, գործողության կոճակներ և հղումներ անցնում են WCAG-ի դեմ նրանց ֆոնային թեմայական համեմատ:
Ինչպես է այն աշխատում
Հակադրության ստուգումը լիովին աշխատում է ձեր դիտարկիչում՝ օգտագործելով WCAG 2.1 հարաբերական պայծառության ալգորիթմը — ոչ մի գրադարան, ոչ մի սերվեր, միայն ձեռագիր մաթեմատիկա, որը ճշգրիտ հետևում է բնութագրին։ Ամեն արդյունք թարմացվում է իրական ժամանակում, երբ մուտքագրում եք կամ ընտրում գույն։
- 1Տասնվեցական մուտքագրում և նորմալացումԸնդունվում և նորմալացվում են ամբողջական RGB եռյակների ինչպես 3-նիշանոց (#abc), այնպես էլ 6-նիշանոց (#aabbcc) տասնվեցական արժեքները։ Անվավեր մուտքագրումն անմիջապես մերժվում է, փոխարենը լուռ սևի կանխադրելու, ուստի կարմիր եզրագիծ է հայտնվում՝ մոլորեցնող հաջողության արդյունքի փոխարեն։
- 2WCAG պայծառության հաշվարկՅուրաքանչյուր գույն փոխարկվում է հարաբերական պայծառության՝ WCAG 2.1 բանաձևով. sRGB ալիքի արժեքները գծայնացվում են հատվածական գամմա ուղղմամբ (բաժանելով 12.92-ի 0.03928-ից ցածր, բարձրացնելով 2.4 աստիճանի՝ դրանից բարձր), ապա կշռվում որպես 0.2126R + 0.7152G + 0.0722B։
- 3Հակադրության գործակից և համապատասխանության ստուգումներՀակադրության գործակիցը հաշվարկվում է որպես (ավելի բաց + 0.05) / (ավելի մուգ + 0.05) և ստուգվում է բոլոր հինգ WCAG շեմերի դեմ. AA սովորական տեքստ (4.5:1), AA մեծ տեքստ (3:1), AAA սովորական տեքստ (7:1), AAA մեծ տեքստ (4.5:1) և UI բաղադրիչներ (3:1)։ Արդյունքները թարմացվում են ամեն ստեղնազարկի ժամանակ։
- 4Երանգ-պահպանող ուղղման առաջարկներԵրբ զույգը ձախողում է WCAG AA-ն, գործիքը որոնում է HSL պայծառության տարածքում — սկզբնական պայծառությունից երկու ուղղություններով դուրս քայլելով — յուրաքանչյուր գույնի ամենամոտ տարբերակը գտնելու համար, որն անցնում է 4.5:1-ը՝ պահպանելով նույն երանգն ու հագեցվածությունը։ EyeDropper API-ն (Chromium) նույնպես հասանելի է՝ ձեր էկրանից ուղղակիորեն ցանկացած գույն նմուշառելու համար։
Առնչվող գործիքներ
Գունակուրության սիմուլյատոր
Տեսեք, թե ձեր նախագծն ինչ տեսք ունի գույնի ընկալման անբավարարություն ունեցող մարդկանց: Սիմուլյացնում է protanopia, deuteranopia, tritanopia, achromatopsia ու թեթև անոմալիաներ:
Որքա՞ն է իմ էկրանի թույլտվությունը
Տեսեք ձեր էկրանի թույլտվությունը CSS և իրական փիքսելներով, պատուհանի չափը, փիքսելների հարաբերակցությունը, գույնի խորությունը, HDR-ը, հպման աջակցությունը և թարմացման հաճախականությունը, և պատճենեք այդ ամենը:
Մեռած փիքսելների ստուգում
Ստուգեք ձեր էկրանը մեռած կամ խրված փիքսելների համար լիաէկրան սև, սպիտակ, կարմիր, կանաչ, կապույտ և մոխրագույն գույներով, գումարած ընտրովի խրված փիքսելի ուղղիչ: