וואַלידירן פּאַלעט־קאָנטראַסט

די 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	יאָ	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	פֿאָרשלאָגן פֿאַר פֿאַרבעסערן פּאָרן וואָס פֿאַלן דורך

באַניץ־בײַשפּיל

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 פֿעיִקייט:

אַנאַליזירט אײַער אויסגעקליבענע קאָליר־פּאַלעט
קאָנטראָלירט אַלע טעקסט־הינטערגרונט קאָמבינאַציעס
וואַלידירט קעגן אײַער אויסגעקליבענעם 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​

בעסטע פּראַקטיקן​

דורכגעפֿאַלענע פּאָרן און רעקאָמענדאַציעס​

פֿאַרבונדענע פֿעיִקייטן​