WCAG 2.1 / 2.2 стандарттары бойынша контрастты бағалау
Веб-ресурстардың қолжетімділігін қамтамасыз етуде мәтін мен фон арасындағы түс контрасты ерекше рөл атқарады. Түстердің үйлесімділігі нашар көретін пайдаланушылардың ақпаратты кедергісіз оқуына тікелей әсер етеді. Қазіргі уақытта сандық өнімдердің сәйкестігін бағалау үшін WCAG 2.1 және WCAG 2.2 стандарттары қолданылады.
Бұл құрал енгізілген мәтін түсі мен фон түсінің арасындағы контраст қатынасын дәл есептеп, оның қолжетімділік деңгейлеріне сәйкестігін тексереді. Тексеру барысында қалыпты мәтін, ірі мәтін және интерфейс компоненттері үшін жеке-жеке нәтижелер көрсетіледі.
Түс форматтары және бастапқы параметрлер
Құрал дизайн мен өнімді әзірлеуде жиі қолданылатын бірнеше түс форматтарын қабылдайды:
- Hex мәндері: Мысалы,
#1a1a1a. - RGB мәндері: Мысалы,
rgb(26, 26, 26). - HSL мәндері: Түс реңкі, қанықтылығы мен жарықтылығы бойынша анықталатын мәндер.
Құралды алғаш ашқан кезде мәтін түсі үшін #4f46e5 мәні, ал фон түсі үшін #ffffff мәні автоматты түрде орнатылады. Бұл екі түстің арасындағы контраст қатынасы 6.29 құрайды. Пайдаланушылар ыңғайлылығы үшін интерфейсте мәтін мен фон түстерін алмастыру батырмасы қарастырылған, ол түстердің орындарын бірден ауыстыруға мүмкіндік береді.
Егер енгізілген мәтін түсінің форматы қате болса, жүйеде мынадай қате туралы хабарлама көрсетіледі: "Жарамды мәтін түсін енгізіңіз, мысалы: #1a1a1a or rgb(26, 26, 26).". Ал фон түсі қате енгізілген жағдайда: "Жарамды фон түсін енгізіңіз, мысалы: #ffffff немесе rgb(255, 255, 255)." деген ескерту шығады.
Контраст қатынасының шкаласы және есептеу ережелері
Контраст қатынасының мәні 1:1-ден 21:1-ге дейінгі аралықты қамтиды. 1:1 қатынасы контрастың мүлдем жоқтығын (мысалы, ақ фондағы ақ мәтін) білдірсе, 21:1 қатынасы ең жоғары контрастыны (ақ фондағы қара мәтін) көрсетеді.
Стандарт бойынша сәйкестік деңгейлері келесі шекті мәндерге негізделген:
| Санат | AA деңгейінің шегі | AAA деңгейінің шегі |
|---|---|---|
| Қалыпты мәтін | ≥ 4.5:1 | ≥ 7:1 |
| Ірі мәтін | ≥ 3:1 | ≥ 4.5:1 |
| Интерфейс және графика | ≥ 3:1 (ортақ) | Жеке деңгей жоқ |
Ірі мәтін санатына өлшемі кемінде 18pt (шамамен 24px) болатын мәтіндер немесе қалың қаріппен (bold) жазылған өлшемі кемінде 14pt (шамамен 18.5px) мәтіндер жатады. Олардың көлемі үлкен болғандықтан, оқылу деңгейін сақтау үшін төменірек контраст қатынасы жеткілікті болады.
Интерфейс және графика компоненттері үшін AA және AAA деңгейлеріне бөлінетін жеке талаптар қарастырылмаған. Бұл санат үшін тек 3:1 қатынасына негізделген бір ғана ортақ шекті мән қолданылады.
Тексеру қорытындысы және шешімдер
Енгізілген түстердің қатынасына байланысты құрал автоматты түрде келесі қорытынды үкімдердің бірін шығарады:
- "Қалыпты мәтін үшін AA және AAA деңгейлерінен өтеді." — контраст қатынасы 7:1 немесе одан жоғары болғанда көрсетіледі.
- "Қалыпты мәтін үшін AA деңгейінен өтеді." — контраст қатынасы 4.5:1 мен 7:1 аралығында болғанда шығады.
- "Тек ірі мәтін үшін ғана AA деңгейінен өтеді." — контраст қатынасы 3:1 мен 4.5:1 аралығында болғанда қолданылады.
- "AA деңгейінің минимумынан төмен — контрастын арттырыңыз." — контраст қатынасы 3:1 мәнінен төмен болған жағдайда көрсетіледі.
Құпиялылық және деректерді өңдеу
Бұл құралды пайдалану кезінде деректердің қауіпсіздігі толық сақталады. Әрбір тексеру тікелей пайдаланушының браузерінде орындалады. Енгізілген түс мәндері, параметрлер немесе басқа да ақпараттар BroBroGo серверіне жүктелмейді және сыртқы желіге жіберілмейді.
Жиі қойылатын сұрақтар (FAQ)
AA және AAA нәтижелері нені білдіреді?
AA — көптеген сайттар ұмтылатын деңгей: ол қалыпты мәтін үшін кемінде 4.5:1, ал ірі мәтін үшін 3:1 қатынасын талап етеді. AAA деңгейі қатаңырақ — қалыпты мәтін үшін 7:1, ал ірі мәтін үшін 4.5:1. Контраст қатынасы 1:1-ден (контраст жоқ) 21:1-ге дейін (ақ фондағы қара мәтін) ауытқиды.
Не ірі мәтін болып саналады?
18pt (шамамен 24px) немесе қалың қаріппен жазылған 14pt (шамамен 18.5px) мәтін ірі мәтін болып саналады. Үлкенірек мәтін төменірек контрастта да оқылатын болып қалатындықтан, ол қатаң шектеулердің орнына AA деңгейінен 3:1 қатынасымен, ал AAA деңгейінен 4.5:1 қатынасымен өтеді.
Қандай түс форматтарын енгізуге болады?
#1a1a1a сияқты hex мәнін, rgb(26, 26, 26) сияқты rgb() мәнін немесе hsl() мәнін енгізіңіз — немесе түс таңдау үшін палитраны басыңыз. Мәтін мен фон түстерін алмастыру үшін ауыстыру батырмасын қолданыңыз.
Бұл WCAG 2 ме әлде жаңа APCA әдісі ме?
Бұл құрал қазіргі уақытта қолжетімділік ережелері мен аудиттерінде қолданылатын WCAG 2.1 / 2.2 формуласын пайдаланады. APCA — WCAG 3 үшін әлі әзірленіп жатқан жаңа, қабылдауға негізделген әдіс. Ол болашағы зор болғанымен, әлі ресми сәйкестік стандарты болып табылмағандықтан, мұндағы тексеру нәтижелері оны пайдаланбайды.