პალიტრის კონტრასტის ვალიდაცია

Validate Palette Contrast შესაძლებლობა ამოწმებს ფერების წყვილებს თქვენს დიზაინის პალიტრაში WCAG (Web Content Accessibility Guidelines)-თან შესაბამისობაზე, სანამ მათ თქვენს თემაზე გამოიყენებთ.

მიმოხილვა

ეს შესაძლებლობა უზრუნველყოფს, რომ თქვენი საიტის ფერთა სქემა აკმაყოფილებდეს ხელმისაწვდომობის სტანდარტებს ტექსტისა და ფონის ფერებს შორის კონტრასტის კოეფიციენტების ვალიდაციით. ის ეხმარება თავიდან აიცილოს ფერთა ისეთი კომბინაციები, რომელთა წაკითხვაც მხედველობის დარღვევის მქონე მომხმარებლებისთვის რთული შეიძლება იყოს.

შეყვანის ფორმატი

შესაძლებლობა შეყვანად იღებს ფერების პალიტრას:

{
  "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)"
  ]
}

Logo SVG-ის გენერირება — შექმენით ლოგოები თქვენი ვალიდირებული ფერების პალიტრით
მენიუს შექმნა — ააგეთ ნავიგაცია ხელმისაწვდომი ფერებით

მიმოხილვა​

შეყვანის ფორმატი​

პარამეტრები​

შემოწმებული WCAG დონეები​

გამოტანის სქემა​

გამოტანის ველები​

გამოყენების მაგალითი​

Theme Builder-თან ინტეგრაცია​

საუკეთესო პრაქტიკები​

ჩავარდნილი წყვილები და რეკომენდაციები​

დაკავშირებული შესაძლებლობები​