Přeskočit na hlavní obsah

Validace kontrastu palety

Funkce Validace kontrastu palety kontroluje, zda jsou barevné kombinace v vaší designové paletě shodu s WCAG (Web Content Accessibility Guidelines) předtím, než je aplikujete na svou tému.

Přehled​

Tato funkce zajišťuje, že barevná schéma vašeho webu splňuje standardy pro přístupnost, protože ověřuje kontrastní poměry mezi textem a pozadím. Pomáhá tak zabránit barevným kombinacím, které by mohly být pro uživatele s vizuálními potížemi obtížně čitelné.

Formát vstupu​

Funkce přijímá jako vstup barevnou paletu:

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

Parametry​

ParametrTypPožadovánoPopis
colorsarrayAnoPole objektů barev s vlastnostmi name a hex
wcag_levelstringNeÚroveň shody s WCAG: "A", "AA" (výchozí) nebo "AAA"
pairs_to_checkarrayNeSpecifické barevné kombinace pro validaci (např. ["primary-text", "background-text"])

Kontrolované úrovně WCAG​

Funkce validuje kontrastní poměry podle standardů WCAG:

ÚroveňNormální textVelký textMinimální poměr
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • Normální text — text menší než 18pt (nebo 14pt tučně)
  • Velký text — text 18pt nebo větší (nebo 14pt tučně nebo větší)

Schéma výstupu​

Funkce vrátí podrohový zprávu o validaci:

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

Pole výstupu​

PoleTypPopis
compliantbooleanZda celá paleta splňuje zadanou úroveň WCAG
wcag_levelstringÚroveň WCAG, která byla zkontrolována
pairsarrayPodrobné výsledky pro každou barevnou kombinaci
contrast_rationumberVýpočtený kontrastní poměr (od 1:1 do 21:1)
statusstring"pass" nebo "fail" pro každou kombinaci
recommendationsarrayNávrhy na vylepšení neshodujících kombinací

Příklad použití​

Dotaz:

Zkontrolujte, zda moje barevné schéma splňuje standardy WCAG AA. Mám primární barvu #678233, barvu textu #ffffff a pozadí #f5f5f5.

Výsledek: Funkce validuje všechny barevné kombinace a vrátí:

  • ✅ Primární + Text: poměr 5.2:1 (splňuje WCAG AA)
  • ✅ Pozadí + Text: poměr 12.1:1 (splňuje WCAG AAA)
  • Celkově: Splňuje WCAG AA

Integrace s Theme Builderem​

Když používáte výběr směřování designu v Theme Builderu, funkce Validace kontrastu palety:

  1. Analyzuje vybranou barevnou paletu
  2. Kontroluje všechny kombinace textu a pozadí
  3. Validuje vůči vybrané úrovni WCAG
  4. Poskytuje doporučení pro neshodující kombinace
  5. Zabraňuje aplikaci nedostupných barevných schémat

Nejlepší praxe​

  • Začněte úrovní AA — WCAG AA je standard pro většinu webových stránek
  • Testujte před aplikací — validujte svou paletu, než se zavete do designu
  • Zkontrolujte všechny kombinace — ujistěte se, že text, odkazy a prvky UI splňují standardy
  • Zvažte preference uživatelů — někteří uživatelé mohou mít dodatečnou citlivost na barvy
  • Používejte kontroléry kontrastu — zkombinujte tuto funkci s nástroji prohlížeče pro ověření

Neshodující kombinace a doporučení​

Pokud barevná kombinace selže validaci, funkce poskytne doporučení:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "Zjasněte barvu textu na #ffffff (poměr by byl 5.2:1)",
    "Ztmavněte barvu pozadí na #556b2f (poměr by byl 4.8:1)",
    "Použijte jinou primární barvu, jako je #4a6b1f (poměr by byl 6.1:1)"
  ]
}