Επικύρωση Αντίθεσης Παλέτας Χρωμάτων

Η ικανότητα Επικύρωση Αντίθεσης Παλέτας Χρωμάτων ελέγχει τις ζεύξεις χρωμάτων της παλέτας σχεδιασμού σας για τη συμμόρφωση με τις WCAG (Κατευθυντήριες Οδηγίες Προσβασιμότητας Περιεχομένου Ιστοσελίδων) πριν από την εφαρμογή τους στο θέμα σας.

Γενική Επισκόπηση

Αυτή η ικανότητα διασφαλίζει ότι το χρώμα του site σας πληροί τα πρότυπα προσβασιμότητας, ελέγχοντας τις αναλογίες αντίθεσης μεταξύ των χρωμάτων κειμένου και φόντου. Βοηθά στην αποφυγή συνδυασμών χρωμάτων που μπορεί να είναι δύσκολο να διαβαστούν από χρήστες με οπτικές παθήσεις.

Μορφή Εισόδου

Η ικανότητα λαμβάνει ως είσοδο μια παλέτα χρωμάτων:

{
  "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 είναι το πρότυπο για τα περισσότερα websites
• Ελέγξτε πριν εφαρμόσετε — επικυρώστε τη παλέτα σας πριν δεσμευστείτε σε ένα σχέδιο
• Ελέγξτε όλους τους συνδυασμούς — βεβαιωθείτε ότι το κείμενο, οι συνδέσμοι και τα στοιχεία διεπαφής πληρούν τα πρότυπα
• Λάβετε υπόψη τις προτιμήσεις των χρηστών — ορισμένοι χρήστες μπορεί να έχουν επιπλέον ευαισθησία στα χρώματα
• Χρησιμοποιήστε έλεγκτες αντίθεσης — συνδυάστε αυτή την ικανότητα με εργαλεία browser για επαλήθευση

Ζεύγη που Αποτυγχάνουν και Προτάσεις

Εάν ένα ζεύγιο χρωμάτων αποτύχει την επικύρωση, η ικανότητα παρέχει προτάσεις:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "Αραιώστε το χρώμα του κειμένου σε #ffffff (η αναλογία θα ήταν 5.2:1)",
    "Σκούριστε το χρώμα του φόντου σε #556b2f (η αναλογία θα ήταν 4.8:1)",
    "Χρησιμοποιήστε ένα διαφορετικό κύριο χρώμα όπως #4a6b1f (η αναλογία θα ήταν 6.1:1)"
  ]
}

Σχετικές Ικανότητες

• Generate Logo SVG — δημιουργήστε λογότυπα με την επικυρωμένη παλέτα χρωμάτων σας
• Create Menu — δημιουργήστε πλοήγηση με προσβάσιμα χρώματα