Clew

Басты бетҚұралдарТүс контрастын тексеру

Түс контрастын тексеру WCAG 2.2 және APCA бойынша

Мәтін мен фон түсін HEX, RGB немесе HSL форматында енгізіңіз. WCAG 2.2 контраст коэффициентін AA, AAA, ірі мәтін және интерфейс элементтері бойынша нәтижемен, WCAG 3 жобасындағы APCA ашықтық контрастын, мәтін, батырма және тултип превьюін аласыз, ал түсіңіз өтпесе — талапқа сай ең жақын түсті.

● Тегін, тіркелусізЖаңартылды:

HEX (#777, #767676), rgb(118 118 118), hsl(0 0% 46%) немесе oklch(56% 0 0). Жартылай мөлдір мәтін фонмен араласады.
Нені өзгерту

Талапқа сай ең жақын түс

—

 

WCAG контрасты— 
APCA Lc— 
Жарықтылық— 

Ірі тақырып, 24 px

Негізгі мәтін 16 px. Бұл абзацты көшеде телефоннан, қолды созып оқып көріңіз — сізге қиын болса, пайдаланушыларға да қиын.

Негізгі батырмаҚосалқыМәтіндік сілтеме
Өріс жиегі
Тултип: бастау үшін «Жаңа жоба» батырмасын басыңыз.

Ұсақ мәтін, 13 px: жазулар мен кеңестер контрасттан жиі өтпейді.

Нәтижелер

    Формула. Контраст = (Lашық + 0,05) / (Lкүңгірт + 0,05), мұнда L = 0,2126·R + 0,7152·G + 0,0722·B — сызықтық sRGB бойынша. Мән жоғары қарай дөңгелектенбейді: 4,48:1 шегі 4,5:1-ден өтпейді.

    Барлығы браузеріңізде есептеледі — енгізген деректеріңіз ешқайда жіберілмейді.

    Қалай пайдалану керек

    1. Екі түс енгізіңізМәтін мен фон түстерін кез келген CSS форматында жазыңыз немесе түс таңдағыштан алыңыз. Күңгірт фондағы ашық мәтінді тексеру үшін түстерді ауыстырыңыз.
    2. Нәтижелерді қараңызКонтраст WCAG 2.2-нің барлық шектерімен салыстырылады: AA және AAA үшін қалыпты және ірі мәтін, интерфейс элементтері үшін 3:1. Қасында екінші пікір ретінде APCA Lc көрсетіледі.
    3. Превьюді тексеріңізМәтін, батырма, сілтеме, өріс жиегі және тултип сіздің түстеріңізбен салынады — нақты интерфейстерде тексеруден жиі өтпейтін үйлесімдер.
    4. Ең жақын түсті алыңызМақсатты және нені — мәтінді ме, фонды ма — өзгертетініңізді таңдаңыз. Құрал реңкті сақтап, жұп шектен өткенше ашықтықты жылжытады; HEX-ті қолдануға немесе көшіруге болады.

    WCAG контраст коэффициенті қалай есептеледі

    WCAG 2.x екі түстің салыстырмалы жарықтылығын (relative luminance) салыстырады — әр түс көзге қаншалықты ашық көрінетінін, 0-ден (қара) 1-ге (ақ) дейінгі шкала бойынша. Әр sRGB арнасы алдымен 0–255 мәнінен сызықтық жарыққа айналады, содан кейін арналар көздің сезімталдығына қарай салмақпен қосылады: жасыл көбірек, көк азырақ әсер етеді.

    c = арна / 255 c_lin = c / 12,92 егер c ≤ 0,04045 c_lin = ((c + 0,055) / 1,055) ^ 2,4 әйтпесе L = 0,2126 · R_lin + 0,7152 · G_lin + 0,0722 · B_lin контраст = (L_ашық + 0,05) / (L_күңгірт + 0,05)

    Нәтиже 1:1-ден (бірдей түстер) 21:1-ге (ақтағы қара) дейін болады. 0,05 қосындысы экраннан шағылған сыртқы жарықты модельдейді, сондықтан өте күңгірт жұптардың контрасы шексіздікке кетпейді.

    Мысал. Ақ фондағы #777777 сұры: 119 / 255 = 0,4667, сызықтандырғаннан кейін 0,1845, демек L = 0,1845. Ақтың L = 1. Контраст = 1,05 / 0,2345 = 4,48:1. Қалыпты мәтін үшін AA-дан өтпейді: 4,48 саны 4,5-тен кіші, ал WCAG дөңгелектеуге рұқсат бермейді. Ақ фонда өтетін ең ашық сұр — 4,54:1 беретін #767676.

    WCAG 2.2 шектері

    • 1.4.3 «Контраст (минималды)», AA деңгейі: қалыпты мәтін үшін 4,5:1, ірі мәтін үшін 3:1.
    • 1.4.6 «Контраст (жоғары)», AAA деңгейі: қалыпты мәтін үшін 7:1, ірі мәтін үшін 4,5:1.
    • 1.4.11 «Мәтіндік емес контраст», AA деңгейі: интерфейс элементін және оның күйін тануға қажет визуалды бөліктер үшін 3:1 — өріс жиектері, фокус жиегі, чекбокс контуры, мағыналы иконкалар, график сызықтары.

    Ірі мәтін — қалыпты салмақта кемінде 18 пункт (24 CSS пиксель) немесе жуан қаріпте 14 пункт (шамамен 18,66 px). Логотиптер, тек безендіру мәтіні және белсенді емес элементтер талаптан босатылады. Шектер WCAG 2.0, 2.1 және 2.2 арасында өзгерген жоқ.

    APCA: WCAG 3-ке ұсынылған контраст әдісі

    WCAG 2 формуласы қарапайым, бірақ белгілі әлсіз тұстары бар. Мәтін қай түс болса да жұпты бірдей оқылады деп санайды, күңгірт үйлесімдердің контрастын асыра бағалайды және қаріптің өлшемі мен салмағын ескермейді. W3C жұмыс тобы үшін Эндрю Сомерс әзірлеген APCA (Accessible Perceptual Contrast Algorithm) ашықтықты қабылдауды дәлірек модельдейді және шамамен −108-ден +106-ға дейінгі ашықтық контрастының мәнін, Lc береді.

    Y = 0,2126729 · (R/255)^2,4 + 0,7151522 · (G/255)^2,4 + 0,0721750 · (B/255)^2,4 ашық фондағы күңгірт мәтін: Lc = ((Y_фон^0,56 − Y_мәтін^0,57) · 1,14 − 0,027) · 100 күңгірт фондағы ашық мәтін: Lc = ((Y_фон^0,65 − Y_мәтін^0,62) · 1,14 + 0,027) · 100 (0,022-ден төмен Y жұмсақ көтеріледі; |нәтиже| 0,1-ден кіші болса нөл саналады)

    Таңба полярлықты көрсетеді: оң — ашық фондағы күңгірт мәтін, теріс — күңгірт фондағы ашық мәтін. Сол #888 сұры ақ фондағы мәтін ретінде Lc 63,1, ал #888 фонындағы ақ жазу ретінде Lc −68,5 береді: APCA бойынша ақ жазу жақсырақ оқылады. WCAG 2 мұны көрсете алмайды — екі жағдайда да 3,54:1.

    Жеңілдетілген Bronze режиміндегі Lc деңгейлерінің бағдары: 90 — негізгі мәтінге ұсынылады, 75 — негізгі мәтін үшін минимум, 60 — басқа контент мәтіні, 45 — ірі тақырыптар, 30 — плейсхолдерлер мен мәтіндік емес элементтер, 15 — тек бөлгіштер.

    Маңызды: APCA — WCAG 3-тің жұмыс жобасының бөлігі, бекітілген стандарт емес, шектері өзгеруі мүмкін. Бүгінгі заңнамалық және сатып алу талаптары WCAG 2.x-ке сілтейді. «Өтеді ме, жоқ па» шешімін WCAG 2.2 коэффициенті бойынша қабылдаңыз, ал APCA-ны өтетін екі нұсқаның бірін таңдау немесе WCAG 2 өткізіп жіберетін қараңғы тақырып жұптарын табу үшін пайдаланыңыз.

    Фирмалық түсті сақтап, төмен контрастты қалай түзетуге болады

    Әдетте реңкті емес, ашықтықты өзгерту жеткілікті. Жоғарыдағы ұсыныстар OKLCH түс кеңістігінде жұмыс істейді: реңк пен хроманы сақтап, қабылданатын ашықтықты қадаммен жылжытады, түсті sRGB қамтуына қайтарады және дөңгелектенген HEX әлі де шектен өтетінін тексереді. Бастапқы ашықтыққа ең жақын нұсқа «ең жақын» деп белгіленеді.

    • Фирмалық түсті ірі аймақтар мен батырмаларға қалдырыңыз, ал мәтін мен сілтемелерге сол реңктің күңгірттеу тонын алыңыз. Ақ фонда 3,9:1 беретін фирмалық қызыл, егер жұп ірі мәтін шегінен өтсе, жуан ақ мәтіні бар батырманың фоны бола алады — бірақ тексеріңіз.
    • Барлық күйді тексеріңіз: hover, фокус, белсенді емес, ашылған сілтеме, қате. Формаларда плейсхолдерлер мен кеңес мәтіндері жиі өтпейді.
    • Екі тақырыпты да тексеріңіз. Ашық тақырыпта өткен палитра қараңғы тақырыпта жиі өтпейді — мұнда APCA әсіресе пайдалы.
    • Сурет пен градиент үстіндегі мәтін ең ашық нүктесінде де шектен өтуі керек. Көлеңкеден гөрі мәтін астына тұтас немесе жартылай мөлдір төсеніш қойған сенімдірек.
    • Тултиптер мен онбординг кеңестері жиі ашық фирмалық тонда сұр мәтінмен безендіріледі. Оларды жылдам әрі жол-жөнекей оқиды, сондықтан қысқа мәтінге де 4,5:1 және одан жоғары контраст алыңыз.

    Әр қадамның контрасы белгілі толық реңктер шкаласын құру үшін қолжетімді палитра генераторын пайдаланыңыз.

    Дереккөздер

    1. W3C. Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 2023 — 1.4.3, 1.4.6, 1.4.11 критерийлері; салыстырмалы жарықтылық пен контраст коэффициентінің анықтамалары.
    2. W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum) — 4,5:1 және 3:1 шектерінің негіздемесі, ірі мәтін анықтамасы.
    3. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g нұсқасы, Myndex Research — құралда қолданылған тұрақтылар мен эталон мәндер.
    4. W3C. W3C Accessibility Guidelines (WCAG) 3.0, Working Draft — визуалды контраст әдісінің мәртебесі.
    5. Ottosson B. A perceptual color space for image processing, 2020 — ашықтықты таңдауға арналған OKLab кеңістігі.

    Жиі қойылатын сұрақтар

    WCAG қандай контраст талап етеді?

    AA деңгейі үшін WCAG 2.2 қалыпты мәтін мен фон арасында кемінде 4,5:1, ірі мәтін (24 px немесе шамамен жуан 18,66 px) үшін 3:1 және интерфейс элементтері мен мағыналы графика үшін 3:1 талап етеді. AAA деңгейі мәтін талаптарын 7:1 және 4,5:1-ге көтереді.

    4,48:1 контрасы 4,5:1 шегіне жете ме?

    Жоқ. WCAG шектері нақты, коэффициентті жоғары дөңгелектеуге болмайды. Ақ фондағы #777777 — 4,48:1, қалыпты мәтін үшін AA-дан өтпейді; #767676 — 4,54:1, өтеді.

    APCA деген не және оны WCAG 2 орнына қолдану керек пе?

    APCA — WCAG 3 жұмыс жобасындағы қабылдауға негізделген контраст әдісі. Ол мәтін полярлығын ескереді және талабы қаріп өлшемі мен салмағына байланысты Lc мәнін береді. Әзірге стандарт емес, сондықтан сәйкестік әлі де WCAG 2.2 коэффициентімен бағаланады; APCA — әсіресе қараңғы тақырыптар үшін пайдалы екінші тексеру.

    Иконкалар, жиектер мен фокус индикаторларына контраст керек пе?

    Иә. 1.4.11 критерийі элементті немесе оның күйін тануға қажет бөліктер үшін көрші түстермен 3:1 талап етеді: өріс жиектері, чекбокс контурлары, мағыналы иконкалар және фокус жиегі. Безендіру элементтері мен белсенді емес басқару элементтері босатылады.

    Жартылай мөлдір мәтіннің контрасы қалай есептеледі?

    Алдымен мәтін түсі мөлдірлігіне қарай фонмен араластырылады, содан кейін шыққан тұтас түс салыстырылады. Бұл құрал мұны автоматты түрде жасап, нәтижеде араласқан HEX-ті көрсетеді.

    Белсенді емес батырмалар мен плейсхолдерлер контрасттан өтуі керек пе?

    WCAG 2.2 бойынша белсенді емес элементтер босатылады. Плейсхолдерлер — жоқ: егер ақпарат берсе, оларға 4,5:1 керек. Көп форма осы жерде өтпейді, сондықтан кеңесті көрінетін белгіге немесе өріс астындағы түсініктемеге шығарған сенімдірек.

    Фирмалық стильді өзгертпей өтетін түсті қалай табуға болады?

    Реңкті сақтап, тек ашықтықты өзгертіңіз. Бұл құралдағы ұсыныстар дәл осыны OKLCH кеңістігінде жасайды: мәтін немесе фон үшін ең жақын күңгірттеу және ашығырақ нұсқаны нәтижелі контрастымен көрсетеді.

    «Өнім дизайны» бөлімінде тағы

    Тақырып бойынша

    Қолжетімді палитра генераторыТипографиялық шкала генераторыКеңес мәтінін тексеруБарлық құралдар

    Әсері сандардан көрінетін турлар, тултиптер мен чек-парақтар.

    Clew-ды тегін байқап көруҚалай жұмыс істейдіМәңгі тегін тариф · банк картасы қажет емес

    Турлар, попаптар және ЖИ дәуіріндегі онбординг

    Қадам саны, мәтін ережелері мен метрикалары бар 7 паттерн, ЖИ нені өзгертеді және жариялау алдындағы чек-лист. PDF, 2 бет. Ішінде не бар →

    Нұсқаулық ағылшын тілінде.