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

Палитра контрастын тексеру мүмкіндігі дизайн палитраңыздағы түс жұптарын темаңызға қолданбас бұрын 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-дің дизайн бағытын таңдауын пайдаланғанда, Палитра контрастын тексеру мүмкіндігі:

1. Таңдалған түс палитраңызды талдайды
2. Барлық мәтін-фон үйлесімдерін тексереді
3. Таңдалған WCAG деңгейіңізге сәйкестігін тексереді
4. Сәйкес келмейтін жұптар үшін ұсыныстар береді
5. Қолжетімсіз түс схемаларын қолдануға жол бермейді

Үздік тәжірибелер

• 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 жасау — тексерілген түс палитраңызбен логотиптер жасаңыз
• Мәзір жасау — қолжетімді түстері бар навигация құрыңыз