Палитрын контрастыг баталгаажуулах

Validate Palette Contrast чадвар нь таны theme-д хэрэглэхээс өмнө дизайны палитр дахь өнгөний хослолууд WCAG (Web Content Accessibility Guidelines)-ийн шаардлагад нийцэж байгаа эсэхийг шалгана.

Ерөнхий тойм

Энэ чадвар нь текст болон дэвсгэр өнгөний хоорондын контрастын харьцааг баталгаажуулснаар таны сайтын өнгөний схем хүртээмжийн стандартыг хангаж байгаа эсэхийг баталгаажуулна. Энэ нь харааны бэрхшээлтэй хэрэглэгчдэд уншихад хүндрэлтэй байж болзошгүй өнгөний хослолуудаас сэргийлэхэд тусална.

Оролтын формат

Энэ чадвар нь өнгөний палитрыг оролт болгон хүлээн авна:

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

Параметрүүд

Parameter	Type	Required	Description
colors	array	Yes	name болон hex шинж чанартай өнгөний объектуудын массив
wcag_level	string	No	WCAG нийцлийн түвшин: "A", "AA" (өгөгдмөл), эсвэл "AAA"
pairs_to_check	array	No	Баталгаажуулах тодорхой өнгөний хослолууд (жишээ нь, ["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": []
  }
}

Гаралтын талбарууд

Field	Type	Description
compliant	boolean	Бүх палитр заасан WCAG түвшнийг хангаж байгаа эсэх
wcag_level	string	Шалгасан WCAG түвшин
pairs	array	Өнгөний хос бүрийн дэлгэрэнгүй үр дүн
contrast_ratio	number	Тооцоолсон контрастын харьцаа (1:1-ээс 21:1 хүртэл)
status	string	Хос бүрийн хувьд "pass" эсвэл "fail"
recommendations	array	Амжилтгүй хослолуудыг сайжруулах санал зөвлөмжүүд

Ашиглалтын жишээ

Prompt:

Миний өнгөний палитр WCAG AA стандартыг хангаж байгаа эсэхийг шалгана уу. Надад үндсэн өнгө #678233, текстийн өнгө #ffffff, мөн дэвсгэр #f5f5f5 байна.

Үр дүн: Энэ чадвар нь бүх өнгөний хослолыг баталгаажуулж дараахыг буцаана:

• ✅ Үндсэн + Текст: 5.2:1 харьцаа (WCAG AA-г давна)
• ✅ Дэвсгэр + Текст: 12.1:1 харьцаа (WCAG AAA-г давна)
• Нийт дүн: WCAG AA-д нийцсэн

Theme Builder-тэй нэгтгэх

Theme Builder-ийн дизайны чиглэл сонгох хэсгийг ашиглах үед Validate Palette Contrast чадвар нь:

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 үүсгэх — баталгаажуулсан өнгөний палитраараа лого үүсгэнэ
• Цэс үүсгэх — хүртээмжтэй өнгөөр навигац бүтээнэ