ପ୍ୟାଲେଟ୍ କନ୍ଟ୍ରାଷ୍ଟ ସତ୍ୟାପନ କରନ୍ତୁ
ପ୍ୟାଲେଟ୍ କନ୍ଟ୍ରାଷ୍ଟ ସତ୍ୟାପନ କରନ୍ତୁ କ୍ଷମତା ଆପଣଙ୍କ theme ରେ ଲାଗୁ କରିବା ପୂର୍ବରୁ WCAG (Web Content Accessibility Guidelines) ଅନୁପାଳନ ପାଇଁ ଆପଣଙ୍କ ଡିଜାଇନ୍ ପ୍ୟାଲେଟ୍ର ରଙ୍ଗ ଯୁଗଳଗୁଡ଼ିକୁ ଯାଞ୍ଚ କରେ।
ସାରାଂଶ
ଏହି କ୍ଷମତା ଟେକ୍ସଟ୍ ଓ ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ମଧ୍ୟରେ କନ୍ଟ୍ରାଷ୍ଟ ଅନୁପାତ ସତ୍ୟାପନ କରି, ଆପଣଙ୍କ ସାଇଟ୍ର ରଙ୍ଗ ଯୋଜନା ଅଭିଗମ୍ୟତା ମାନଦଣ୍ଡ ପୂରଣ କରୁଥିବାକୁ ନିଶ୍ଚିତ କରେ। ଏହା ଦୃଷ୍ଟି ଅସୁବିଧା ଥିବା ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ପଢ଼ିବାକୁ କଷ୍ଟକର ହୋଇପାରୁଥିବା ରଙ୍ଗ ସଂଯୋଜନକୁ ରୋକିବାରେ ସହାୟତ ା କରେ।
ଇନ୍ପୁଟ୍ ଫର୍ମାଟ୍
ଏହି କ୍ଷମତା ଇନ୍ପୁଟ୍ ଭାବେ ଏକ ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ଗ୍ରହଣ କରେ:
{
"colors": [
{
"name": "primary",
"hex": "#678233"
},
{
"name": "text",
"hex": "#ffffff"
},
{
"name": "background",
"hex": "#f5f5f5"
}
],
"wcag_level": "AA"
}
ପାରାମିଟର୍
| Parameter | Type | Required | Description |
|---|---|---|---|
colors | array | Yes | name ଏବଂ hex ଗୁଣ ସହିତ ରଙ୍ଗ ଅବଜେକ୍ଟଗୁଡ଼ିକର ଆରେ |
wcag_level | string | No | WCAG ଅନୁପାଳନ ସ୍ତର: "A", "AA" (ଡିଫଲ୍ଟ), କିମ୍ବା "AAA" |
pairs_to_check | array | No | ସତ୍ୟାପନ କରିବାକୁ ନିର୍ଦ୍ଦିଷ୍ଟ ରଙ୍ଗ ଯୁଗଳ (ଯଥା, ["primary-text", "background-text"]) |
ଯାଞ୍ଚ ହୋଇଥିବା WCAG ସ୍ତର
ଏହି କ୍ଷମତା WCAG ମାନଦଣ୍ଡ ଅନୁସାରେ କନ୍ଟ୍ରାଷ୍ଟ ଅନୁପାତ ସତ୍ୟାପନ କରେ:
| Level | Normal Text | Large Text | Minimum Ratio |
|---|---|---|---|
| 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 bold)
- ବଡ଼ ଟେକ୍ସଟ୍ — 18pt କିମ୍ବା ତାଠାରୁ ବଡ଼ ଟେକ୍ସଟ୍ (କିମ୍ବା 14pt bold କିମ୍ବା ତାଠାରୁ ବଡ଼)
ଆଉଟ୍ପୁଟ୍ ସ୍କିମା
ଏହି କ୍ଷମତା ଏକ ବିସ୍ତୃତ ସତ୍ୟାପନ ରିପୋର୍ଟ ଫେରାଇ ଦେଇଥାଏ:
{
"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": []
}
}
ଆଉଟ୍ପୁଟ୍ ଫିଲ୍ଡଗୁଡ଼ିକ
| Field | Type | Description |
|---|---|---|
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 ର ଡିଜାଇନ୍-ଦିଗ ଚୟନ ବ୍ୟବହାର କରିବାବେଳେ, ପ୍ୟାଲେଟ୍ କନ୍ଟ୍ରାଷ୍ଟ ସତ୍ୟାପନ କ୍ଷମତା:
- ଆପଣ ବାଛିଥିବା ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ବିଶ୍ଳେଷଣ କରେ
- ସମସ୍ତ ଟେକ୍ସଟ୍-ପୃଷ୍ଠଭୂମି ସଂଯୋଜନ ଯାଞ୍ଚ କରେ
- ଆପଣ ବାଛିଥିବା 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 ସୃଷ୍ଟି କରନ୍ତୁ — ଆପଣଙ୍କ ସତ୍ୟାପିତ ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ସହିତ ଲୋଗୋ ତିଆରି କରନ୍ତୁ
- ମେନୁ ସୃଷ୍ଟି କରନ୍ତୁ — ଅଭିଗମ୍ୟ ରଙ୍ଗ ସହିତ ନେଭିଗେସନ୍ ତିଆରି କରନ୍ତୁ