Վավերացնել գունապնակի հակադրությունը

Validate Palette Contrast հնարավորությունը ստուգում է ձեր դիզայնի գունապնակի գունային զույգերը՝ WCAG (Web Content Accessibility Guidelines)-ին համապատասխանությունը գնահատելու համար, նախքան դրանք ձեր theme-ում կիրառելը։

Ընդհանուր ակնարկ

Այս հնարավորությունը ապահովում է, որ ձեր կայքի գունային սխեման համապատասխանի մատչելիության չափանիշներին՝ վավերացնելով տեքստի և ֆոնի գույների միջև հակադրության հարաբերակցությունները։ Այն օգնում է կանխել գունային համադրությունները, որոնք տեսողության խանգարումներ ունեցող օգտատերերի համար կարող են դժվար ընթեռնելի լինել։

Մուտքագրման ձևաչափ

Հնարավորությունը որպես մուտք ընդունում է գունապնակ.

{
  "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-ի դիզայնի ուղղության ընտրությունը օգտագործելիս Validate Palette Contrast հնարավորությունը.

Վերլուծում է ձեր ընտրած գունապնակը
Ստուգում է բոլոր տեքստ-ֆոն համադրությունները
Վավերացնում է ձեր ընտրած 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)"
  ]
}

Գեներացնել լոգոյի SVG — ստեղծեք լոգոներ ձեր վավերացված գունապնակով
Ստեղծել մենյու — կառուցեք նավիգացիա մատչելի գույներով

Ընդհանուր ակնարկ​

Մուտքագրման ձևաչափ​

Պարամետրեր​

Ստուգվող WCAG մակարդակներ​

Ելքային սխեմա​

Ելքային դաշտեր​

Օգտագործման օրինակ​

Ինտեգրում Theme Builder-ի հետ​

Լավագույն գործելակերպեր​

Չանցնող զույգեր և առաջարկություններ​

Առնչվող հնարավորություններ​