Палитра контрастын текшерүү

Палитра контрастын текшерүү мүмкүнчүлүгү дизайн палитраңыздагы түс жуптарын темаңызга колдонуудан мурун WCAG (Веб-контенттин жеткиликтүүлүк боюнча көрсөтмөлөрү) талаптарына шайкештигин текшерет.

Жалпы сереп

Бул мүмкүнчүлүк текст жана фон түстөрүнүн ортосундагы контраст катыштарын текшерүү аркылуу сайтыңыздын түс схемасы жеткиликтүүлүк стандарттарына жооп беришин камсыздайт. Ал көрүүсү начар колдонуучуларга окууга кыйын болушу мүмкүн болгон түс айкалыштарын алдын алууга жардам берет.

Киргизүү форматы

Бул мүмкүнчүлүк киргизүү катары түс палитрасын кабыл алат:

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

Параметрлер

Параметр	Түрү	Милдеттүү	Сүрөттөмө
`colors`	array	Ооба	`name` жана `hex` касиеттери бар түс объекттеринин массиви
`wcag_level`	string	Жок	WCAG шайкештик деңгээли: "A", "AA" (демейки), же "AAA"
`pairs_to_check`	array	Жок	Текшериле турган белгилүү түс жуптары (мисалы, `["primary-text", "background-text"]`)

Текшерилген WCAG деңгээлдери

Бул мүмкүнчүлүк контраст катыштарын WCAG стандарттарына ылайык текшерет:

Деңгээл	Кадимки текст	Ири текст	Минималдуу катыш
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

Кадимки текст — 18ptтен кичине текст (же 14pt калың)
Ири текст — 18pt же андан чоң текст (же 14pt калың же андан чоң)

Чыгуу схемасы

Бул мүмкүнчүлүк толук текшерүү отчетун кайтарат:

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

Чыгуу талаалары

Талаа	Түрү	Сүрөттөмө
`compliant`	boolean	Бүт палитра көрсөтүлгөн WCAG деңгээлине жооп береби
`wcag_level`	string	Текшерилген WCAG деңгээли
`pairs`	array	Ар бир түс жубу үчүн толук жыйынтыктар
`contrast_ratio`	number	Эсептелген контраст катышы (1:1ден 21:1ге чейин)
`status`	string	Ар бир жуп үчүн "pass" же "fail"
`recommendations`	array	Талапка жооп бербеген жуптарды жакшыртуу боюнча сунуштар

Колдонуу мисалы

Сурам:

Менин түс палитрам WCAG AA стандарттарына жооп берерин текшериңиз. Менде негизги түс #678233, текст түсү #ffffff жана фон #f5f5f5 бар.

Жыйынтык: Бул мүмкүнчүлүк бардык түс айкалыштарын текшерип, төмөнкүлөрдү кайтарат:

✅ Негизги + Текст: 5.2:1 катышы (WCAG AAдан өтөт)
✅ Фон + Текст: 12.1:1 катышы (WCAG AAAдан өтөт)
Жалпы: WCAG AAга шайкеш

Theme Builder менен интеграция

Theme Builderдин дизайн багытын тандоосун колдонгондо, Палитра контрастын текшерүү мүмкүнчүлүгү:

Тандалган түс палитраңызды талдайт
Бардык текст-фон айкалыштарын текшерет
Тандалган WCAG деңгээлиңизге салыштырып текшерет
Талапка жооп бербеген жуптар үчүн сунуштарды берет
Жеткиликсиз түс схемаларын колдонууга жол бербейт

Мыкты тажрыйбалар

AA деңгээлинен баштаңыз — WCAG AA көпчүлүк вебсайттар үчүн стандарт болуп саналат
Колдонуудан мурун текшериңиз — дизайнга бекитүүдөн мурун палитраңызды текшериңиз
Бардык айкалыштарды текшериңиз — текст, шилтемелер жана UI элементтеринин баары стандарттарга жооп берерин камсыздаңыз
Колдонуучулардын артыкчылыктарын эске алыңыз — айрым колдонуучуларда түскө кошумча сезимталдык болушу мүмкүн
Контраст текшергичтерин колдонуңуз — текшерүү үчүн бул мүмкүнчүлүктү браузер куралдары менен айкалыштырыңыз

Өтпөй калган жуптар жана сунуштар

Эгер түс жубу текшерүүдөн өтпөсө, бул мүмкүнчүлүк сунуштарды берет:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "Lighten the text color to #ffffff (ratio would be 5.2:1)",
    "Darken the background color to #556b2f (ratio would be 4.8:1)",
    "Use a different primary color like #4a6b1f (ratio would be 6.1:1)"
  ]
}

Logo SVG түзүү — текшерилген түс палитраңыз менен логотиптерди түзүү
Меню түзүү — жеткиликтүү түстөр менен навигация куруу

Жалпы сереп​

Киргизүү форматы​

Параметрлер​

Текшерилген WCAG деңгээлдери​

Чыгуу схемасы​

Чыгуу талаалары​

Колдонуу мисалы​

Theme Builder менен интеграция​

Мыкты тажрыйбалар​

Өтпөй калган жуптар жана сунуштар​

Байланыштуу мүмкүнчүлүктөр​