Asosiy qismga oʻtish

Rang kontrastini tekshirish (WCAG)

Matn va fon rangining kontrast nisbatini WCAG 2.2 AA va AAA boʻyicha tekshiring va talabdan oʻtadigan eng yaqin rangni oling; hisob brauzeringizda bajariladi.

Yirik matn: 24 px oddiy yoki 18,66 px qalin

16 px lik oddiy matn WCAG AA dan oʻtishi uchun fonga nisbatan kamida 4,5:1, AAA uchun esa 7:1 kontrast kerak.

Tugma konturi
Kontrast nisbati17,16:1
  • AA Oddiy matn ≥ 4,5:1 · SC 1.4.3Oʻtdi
  • AA Yirik matn ≥ 3:1 · SC 1.4.3Oʻtdi
  • AAA Oddiy matn ≥ 7:1 · SC 1.4.6Oʻtdi
  • AAA Yirik matn ≥ 4,5:1 · SC 1.4.6Oʻtdi
  • AA Interfeys elementlari va grafika ≥ 3:1 · SC 1.4.11Oʻtdi

Palitrangizdagi barcha juftliklar

Qatorlar — fonlar, ustunlar — matn ranglari. Juftlikni yuqorida tekshirish uchun katakni tanlang.

Fon3366ff33ccff6633ff33ffcccc33ffffffff000000
3366ff
33ccff
6633ff
33ffcc
cc33ff
ffffff
000000
Brauzeringizda ishlaydi · yuklanmaydiQanday ishlaydi

Kontrast tekshirgichi: foydalanish tartibi

  1. 1

    Ikki rangni kiriting

    Matn rangi va fon rangini HEX, rgb(), hsl() yoki oklch() koʻrinishida yozing yoxud tanlash uchun dumaloq namunani oching.

  2. 2

    Xulosani oʻqing

    Nisbat va beshta “oʻtdi/oʻtmadi” qatori oddiy va yirik matn uchun AA va AAA ni hamda ikonka va chegaralar uchun 3:1 qoidasini koʻrsatadi.

  3. 3

    Tuzatishni qoʻllang

    Biror daraja oʻtmasa, talabdan oʻtadigan eng yaqin toʻqroq yoki ochroq matn yoxud fonni qoʻllang, soʻng yangi qiymatni nusxalang.

Cheklovlar va Pro

Bepul va cheklovsiz: istalgancha tekshiruv, har bir juftlik uchun WCAG 2.2 ning 5 ta mezoni, oʻtmagan har bir daraja uchun 2 ta tuzatish taklifi va 7 tagacha rangdan iborat jadval.

Kontrast tekshirgichi haqida

Bu kontrast tekshirgichi ikki rangning yorugʻlikdagi farqini WCAG 2.2 dagi nisbiy yorqinlik formulasi bilan oʻlchaydi — brauzerlarning qulaylik auditlari va dizayn plaginlari ham aynan shu hisobdan foydalanadi. Natija 1:1 (bir xil) dan 21:1 (oq fonda qora) gacha boʻlgan nisbat. 1.4.3 muvaffaqiyat mezoni AA darajasida asosiy matn uchun 4,5:1, yirik matn uchun 3:1 talab qiladi; 1.4.6 AAA uchun buni 7:1 va 4,5:1 gacha oshiradi; 1.4.11 esa fokus halqalari, kiritish maydoni konturlari va diagramma chiziqlari kabi maʼnoli matn boʻlmagan elementlar uchun 3:1 talab qiladi.

Jonli namuna sizning ranglaringizda ikki oʻlchamdagi matnni, konturli tugmani va ikonkani chizadi, shuning uchun faqat raqamni emas, oʻqilishini ham koʻz bilan baholaysiz. Nisbatlar yaxlitlanmaydi, ikki xonagacha qirqiladi, chunki 4,496:1 lik juftlik 4,5:1 talabiga javob bermaydi. Biror daraja oʻtmasa, tekshirgich bir rangning tusi va toʻyinganligini saqlab, uning OKLCH yorugʻligi boʻylab qidiradi va matn hamda fon uchun alohida, talabdan oʻtadigan eng yaqin qiymatni taklif qiladi. Bu, masalan, davlat xizmatlari saytlari yoki bank ilovalari uchun qulaylik talablarini tekshirishda qoʻl keladi.

Tekshirgich yaxlit ranglar uchun moʻljallangan. U fotosurat yoki gradiyent ustidagi matnni, shaffoflikni, shrift qalinligining muayyan ekranda qanday chizilishini yoki WCAG 3 uchun taklif qilingan yangi APCA usulini baholay olmaydi, shuning uchun oʻtgan natijani minimum deb biling va haqiqiy ekranlarda ham sinab koʻring.

Maxfiylik

Ikkala rang ham shu oynada qoladi: nisbat, “oʻtdi/oʻtmadi” tekshiruvlari va tavsiya etilgan tuzatishlarni brauzeringiz hisoblaydi, rang qiymatlari serverga yuborilmaydi va saqlanmaydi.

Kontrast tekshirgichi: koʻp beriladigan savollar

WCAG da qanday matn yirik hisoblanadi?
Yirik matn — oddiy qalinlikda kamida 18 punkt, yaʼni 24 CSS piksel, qalin boʻlsa, kamida 14 punkt, taxminan 18,66 CSS piksel. Bunday oʻlchamdagi matnga AA darajasida faqat 3:1, AAA da 4,5:1 kerak. Sarlavhalar koʻpincha shu talabga mos keladi, aksariyat tugmalar, yozuvlar va asosiy matn esa kichikroq, shuning uchun ularga qatʼiyroq 4,5:1 nisbati kerak.
Nega 4,48:1 yaxlitlanganda 4,5 boʻlsa ham oʻtmaydi?
WCAG chegaralarni minimum sifatida belgilaydi, tushuntiruvchi hujjatlarda esa qiymatlarni yuqoriga yaxlitlamaslik kerakligi aytilgan. 4,48:1 nisbati 4,5:1 dan past, shuning uchun oddiy matn uchun AA darajasidan oʻtmaydi. Shu sababli tekshirgich koʻrsatiladigan sonni ikki xonagacha qirqadi va bu uning xulosasini axe va Lighthouse kabi avtomatik auditlar bilan bir xil qiladi.
Ikonka va tugmalarga ham kontrast kerakmi?
Ha. 1.4.11 “Matn boʻlmagan kontrast” mezoni maʼnoli grafika va uning atrofi orasida 3:1 talab qiladi: maʼlumot beruvchi ikonkalar, matn maydonining konturi, foni boʻyalmagan tugmaning chegarasi, fokus belgilari va diagrammalardagi chiziqlar. Bezak grafikasi va faol boʻlmagan elementlar bundan mustasno. Tekshirgichdagi namuna matn rangingizda konturli tugma va ikonkani koʻrsatadi.
Tekshirgich tuzatilgan rangni qanday tanlaydi?
U oʻtmagan rangni OKLCH ga oʻgiradi, tus va toʻyinganlikni saqlaydi hamda juftlik maqsadga yetguncha yorugʻlikni kichik qadamlar bilan toʻqroq va ochroq tomonga suradi. Talabdan oʻtgan ikki qiymatdan yaqinrogʻi bir marta matn, bir marta fon uchun taklif qilinadi, shunda AA yoki AAA ga erishgan holda brend rangini taniladigan holda saqlab qolasiz.
WCAG kontrastidan oʻtish qulaylik uchun yetarlimi?
Bu kafolat emas, minimum. Koʻrishi zaif odamlar, telefondagi yaltirash, ingichka shriftlar va faqat rang bilan berilgan ishoralar oʻtgan nisbatda ham muammo tugʻdirishi mumkin. Yetarli kontrastni oʻqiladigan shrift oʻlchami, havolalar va holatlar uchun tagiga chizish yoki ikonkalar hamda haqiqiy foydalanuvchilar bilan sinov bilan birga qoʻllang. Kontrast WCAG ning koʻp mezonlaridan biri, toʻliq audit esa rangdan ancha koʻproq narsani qamraydi.

Bu vosita bilan boshqa ishlar