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 пәттің стандарттарын орындайтындығын тексеңіз.
- Бренд түс қосындысын растаңызБренд түс палетраңыздың пәттігіне қол жеткіліктілік UI дизайны үшін іс жасайды деп синдікаттарын сынап
- Қараңғы режим түс палитрасын сынапАқ мәтін қараңғы фон түстері қалса пәттеуін ыдырау - қараңғы режим палетраңыздың пәттігіндіктерін осында тексеңіз.
- Басылған материяла үшін түс пәттікАфиша, белгілер және басылған материяла оқырмандарға пәттік қажет - ерекше ішінде байлар үшін.
- Қол сұра түймелердің түстерін дизайндаCTA, әрекет түймелері және сілтемелер өз фоны қарсы WCAG өтіп тұрғанын тексеріңіз.
Қалай жұмыс істейді
Контрастты тексеру толығымен браузеріңізде WCAG 2.1 салыстырмалы жарықтылық алгоритмі арқылы жұмыс істейді — кітапхана жоқ, сервер жоқ, тек спецификацияға дәл сай келетін қолмен жазылған математика. Әр нәтиже теру немесе түс таңдау кезінде нақты уақытта жаңарады.
- 1Он алтылық кіріс және қалыпқа келтіру3-таңбалы (#abc) және 6-таңбалы (#aabbcc) он алтылық мәндердің екеуі де қабылданады және толық RGB үштіктеріне қалыпқа келтіріледі. Жарамсыз кіріс үнсіз қара түске бекінбей, дереу қабылданбайды, сондықтан адастыратын өту нәтижесінің орнына қызыл жиек пайда болады.
- 2WCAG жарықтылығын есептеуӘр түс WCAG 2.1 формуласы арқылы салыстырмалы жарықтылыққа түрлендіріледі: sRGB арна мәндері бөліктік гамма түзетуімен сызықтандырылады (0.03928-ден төмен 12.92-ге бөлу, оның үстінде 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) сондай-ақ кез келген түсті экраныңыздан тікелей алу үшін қолжетімді.
Байланысты құралдар
Түс соқырлығы симуляторы
Дизайнынызды түс көру кемістігі бар адамдар қалай көретінін қараңыз. Протанопия, дейтеранопия, тританопия, акроматопсия және жеңілірек аномалияларды имитациялайды.
Менің экран ажыратымдылығым қандай
Экран ажыратымдылығыңызды CSS және нақты пикселдермен, терезе өлшемін, пикселдер қатынасын, түс тереңдігін, HDR, сенсорлық қолдауды және жаңарту жиілігін көріңіз және барлығын көшіріп алыңыз.
Өлі пикселдерді тексеру
Экраныңызды өлі немесе тұрып қалған пикселдерге толық экранды қара, ақ, қызыл, жасыл, көк және сұр түстермен тексеріңіз, сонымен қатар қосымша тұрып қалған пикселді түзеткішпен.