ରଙ୍ଗ ବିପରୀତତା ଯାଞ୍ଚକାରୀ

ପ୍ରାପ୍ୟତା ନିଶ୍ଚିତ କରିବାକୁ ପୃଷ୍ଠଭୂମି ଏବଂ ପୃଷ୍ଠଭୂମି ରଙ୍ଗର ମଧ୍ୟରେ ବିପରୀତତା ଅନୁପାତ ପରୀକ୍ଷା କରନ୍ତୁ।

ଆପଣଙ୍କ ରଙ୍ଗ ଯାଞ୍ଚ କରନ୍ତୁ

ପାଠ୍ୟ ପଠନୀୟତା ପାଇଁ WCAG ପ୍ରାପ୍ୟତା ମାନଦଣ୍ଡ ପୂରଣ କରିବାକୁ ନିଶ୍ଚିତ କରିବା ପାଇଁ ରଙ୍ଗ ସଂଯୋଗଗୁଡ଼ିକ ପରୀକ୍ଷା କରନ୍ତୁ।

2.19 ଅନୁପାତ 1
ବିପରୀତତା
ବିଫଳ
ଲେଖ୍ୟ ଫଳାଫଳ
ଅତ୍ୟନ୍ତ ଖରାପ

ତୁଳନା କରାଯାଇଛି: #F39C12 ଉପରେ #FFFFFF

ଲେଖ୍ୟ

16px, ସାଧାରଣ (400)

ସାଧାରଣ ପାଠ୍ୟ ଭାବେ ଗଣନା କରାଯାଏ।

  • AA (WCAG 1.4.3): ଅତି କମରେ 4.5:1

    ଆଉ 2.31 ଆବଶ୍ୟକ

    ବିଫଳ
  • AAA (WCAG 1.4.6): ଅତି କମରେ 7:1

    ଆଉ 4.81 ଆବଶ୍ୟକ

    ବିଫଳ

UI ଉପାଦାନ ଏବଂ ଗ୍ରାଫିକ୍ସ

ଆଇକନ୍, ଇନପୁଟ୍ ବର୍ଡର୍, ଫୋକସ୍ ସୂଚକ ଏବଂ ଇଣ୍ଟରଫେସ୍ ବ୍ୟବହାର କରିବା ପାଇଁ ଦେଖିବା ଆବଶ୍ୟକ ଅନ୍ୟାନ୍ୟ ଅଂଶଗୁଡ଼ିକ।

  • AA (WCAG 1.4.11): ଅତି କମରେ 3:1

    ଆଉ 0.81 ଆବଶ୍ୟକ

    ବିଫଳ
2.19 ରୁ 1. ଟେକ୍ସଟ୍: AA ପାସ୍ ନହେଁ, AAA ପାସ୍ ନହେଁ. UI ଉପାଦାନ: ଫେଲ୍.
ଏହା କିପରି ଯାଞ୍ଚ କରାଯାଏ
ତୁଳନା କରାଯାଇଥିବା ରଙ୍ଗ (ବ୍ଲେଣ୍ଡ ପରେ)
ଲେଖ୍ୟ #F39C12 ଉପରେ ପୃଷ୍ଠଭୂମି #FFFFFF
ସାପେକ୍ଷ ଲ୍ୟୁମିନାନ୍ସ
ଲେଖ୍ୟ 0.4287, ପୃଷ୍ଠଭୂମି 1.0000
ସୂତ୍ର
(L1 + 0.05) / (L2 + 0.05) ଯେଉଁଠାରେ L1 ହେଉଛି ହାଲୁକା ରଙ୍ଗର ଲ୍ୟୁମିନାନ୍ସ ଏବଂ L2 ହେଉଛି ଅନ୍ଧାରା ରଙ୍ଗର ଲ୍ୟୁମିନାନ୍ସ।
ସଠିକ ଅନୁପାତ
2.1931 ରୁ 1, ପ୍ରଦର୍ଶିତ ହେଉଛି 2.19 ରୁ 1. ଦେଖାଯାଇଥିବା ମୂଲ୍ୟ କାଟି ଦିଆଯାଏ, ରାଉଣ୍ଡ କରାଯାଏ ନାହିଁ, ତେଣୁ ଏହା ବାସ୍ତବତାଠାରୁ ଭଲ ଦେଖାଯାଏ ନାହିଁ। ସଠିକ ମୂଲ୍ୟକୁ ଆବଶ୍ୟକତା ସହ ତୁଳନା କରାଯାଏ।

ଲେଖର ଆକାର: 16px, ସାଧାରଣ (400)

ସାଧାରଣ ପାଠ୍ୟ ଭାବେ ଗଣନା କରାଯାଏ। ବଡ଼ ପାଠ୍ୟ ଅତି କମରେ 24px (18pt), କିମ୍ବା ବୋଲ୍ଡ (ଓଜନ 700 କିମ୍ବା ତାହାଠାରୁ ଅଧିକ) ହେଲେ ଅତି କମରେ 18.67px (14pt)। ଆକାରଗୁଡ଼ିକୁ ରାଉଣ୍ଡ ନକରି କାଟି ଦେଖାଯାଏ।

ସାଧାରଣ ପାଠ୍ୟ ଭାବେ ଗଣନା କରାଯାଏ। ବଡ଼ ପାଠ୍ୟ ଅତି କମରେ 24px (18pt), କିମ୍ବା ବୋଲ୍ଡ (ଓଜନ 700 କିମ୍ବା ତାହାଠାରୁ ଅଧିକ) ହେଲେ ଅତି କମରେ 18.67px (14pt)। ଆକାରଗୁଡ଼ିକୁ ରାଉଣ୍ଡ ନକରି କାଟି ଦେଖାଯାଏ।

ଦ୍ରୁତ ସମାଧାନ

Aa
ପ୍ରିଭ୍ୟୁ ଶୀର୍ଷକ

ଦ୍ରୁତ ବାଦାମୀ ଶିଆଳ ଅଳସ କୁକୁର ଉପରେ ଲାଘୁଛି

ଛୋଟ ପାଠ୍ୟ ଉଦାହରଣ (12px)

ପାଠ୍ୟ
#f39c12
ପୃଷ୍ଠଭୂମି
#ffffff

WCAG ମାନଦଣ୍ଡ

ସ୍ତର AA

ସାଧାରଣ ପାଠ୍ୟ ପାଇଁ 4.5:1ର ନ୍ୟୁନତମ ବିରୋଧ ଅନୁପାତ ଏବଂ ବଡ ପାଠ୍ୟ ପାଇଁ 3:1। ଅଧିକ ଅଭିଗମ୍ୟତା ପାଇଁ ଆବଶ୍ୟକ।

ସ୍ତର AAA

ସାଧାରଣ ପାଠ୍ୟ ପାଇଁ 7:1 ର ଖରାପିତ ରଙ୍ଗ ଅନୁପାତ ଏବଂ ବଡ ପାଠ୍ୟ ପାଇଁ 4.5:1। ସମ୍ପୂର୍ଣ୍ଣ ଅଭିଗମନୀୟତା ପାଇଁ ପ୍ରସ୍ତାବିତ।

ରଙ୍ଗ ବିପରୀତତା ଯାଞ୍ଚକାରୀ

ପାଠ୍ୟ ଏବଂ ପୃଷ୍ଠଭୂମି ରଙ୍ଗର ବିପରୀତତା ଅନୁପାତ ଗଣନା କରନ୍ତୁ।

ପାଠ୍ୟ ଏବଂ ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ପାଇଁ ରଙ୍ଗ ଚୟନ କରିବାକୁ ରଙ୍ଗ ଚୟନକାରୀ ବ୍ୟବହାର କରନ୍ତୁ କିମ୍ବା RGB ହେକ୍ସାଡେସିମାଲ୍ ଫର୍ମାଟରେ ଏକ ରଙ୍ଗ ପ୍ରବେଶ କରନ୍ତୁ (ଉଦାହରଣ ସ୍ୱରୂପ, #259 କିମ୍ବା #2596BE)। ରଙ୍ଗ ଚୟନ କରିବାକୁ ସ୍ଲାଇଡରକୁ ସମନ୍ୱୟ କରିପାରିବେ। ଜଳ ବିଷୟବସ୍ତୁ ଅଧିଗମ୍ୟତା ମାନଙ୍କ (WCAG) ସରଳ ପାଠ୍ୟ ବାଚାଧିକ ବାଛିବା ପାଇଁ ନିର୍ଦ୍ଦେଶ ଜଣାଇ ରଖିଛି। ଏହି ପ୍ରତ୍ୟେକ ଗାଣିତିକ ସୂତ୍ର ହିସାବରେ ଜଳାର୍ଘରକୁ ଏକ ସ୍ବତନ୍ତ୍ର ଅଲଗୋରିଦ୍ଦମ୍ ନିଆଗକୁ ବେଳକରନ୍ତି। ଏହି ସୂତ୍ର ବ୍ୟବହାର କରି, WCAG କହିଥାଏ ଯେ ଏକ 4.5:1 ରଙ୍ଗ ବିରୋଧ ଅନୁପାତ ପାଠ୍ୟ ଏବଂ ଏହାର ପୃଷ୍ଠଭୂମି ପାଇଁ ସରଳ ପାଠ୍ୟ ଅନୁପାତରେ ଯାଞ୍ଚିତ ହୋଇଥାଏ, ଏବଂ ବଡ ପାଠ୍ୟ (18+ pt ସରଳ, କିମ୍ବା 14+ pt ଧୃବୀକୃତ) ଅତି କମରୁ ଏକ 3:1 ରଙ୍ଗ ବିରୋଧ ଅନୁପାତ ନିଆଗକୁ ଥାଏ।

ମୁଖ୍ୟ ବିଶେଷତା

  • ରିଅଲ୍-ଟାଇମ୍ ବିପରୀତ ଅନୁପାତ ଗଣନା
  • WCAG AA & AAA ଅନୁକୂଳତା ଯାଞ୍ଚ
  • ସଂଶୋଧନ ପାଇଁ HSL ସ୍ଲାଇଡର୍ସ
  • ବହୁ ପ୍ରିଭ୍ୟୁ ଫର୍ମାଟ୍

ଉନ୍ନତ ଟୁଲ୍ସ

  • ସ୍ୱୟଂଚାଳିତ ରଙ୍ଗ ସଠିକ୍ କରିବା
  • ଟେକ୍ସଟ୍ ଏବଂ ପୃଷ୍ଠଭୂମି ନମୁନା
  • ରଙ୍ଗ ନାମ ଚିହ୍ନଟ
  • ଫଳାଫଳ ରପ୍ତାନି

ବହୁଳ ପଚାରାଯାଇଥିବା ପ୍ରଶ୍ନଗୁଡ଼ିକ

WCAG AA ଅନୁପାଳନ ପାଇଁ, ସାଧାରଣ ଟେକ୍ସଟ୍‌ର ଅତି କମରେ 4.5:1 ବିପରୀତତା ଅନୁପାତ ଦରକାର, ଯେତେବେଳେ ବଡ଼ ଟେକ୍ସଟ୍ (18pt କିମ୍ବା 14pt ବୋଲ୍ଡ) ପାଇଁ 3:1 ଦରକାର।

WCAG AAA ଉଚ୍ଚ ବିପରୀତତା ଅନୁପାତ ଦାବି କରେ: ସାଧାରଣ ଟେକ୍ସଟ୍ ପାଇଁ 7:1 ଏବଂ ବଡ଼ ଟେକ୍ସଟ୍ ପାଇଁ 4.5:1, ଯେତେବେଳେ AA ପାଇଁ ଯଥାକ୍ରମେ 4.5:1 ଏବଂ 3:1।

ଆପଣଙ୍କ ଡିଜାଇନ୍ ଉଦ୍ଦେଶ୍ୟ ବଜାୟ ରଖି ଟେକ୍ସଟ୍ କିମ୍ବା ପୃଷ୍ଠଭୂମି ରଙ୍ଗ ସଜାଡ଼ିବାକୁ ସ୍ୱୟଂଚାଳିତ ସଂଶୋଧନ ଫିଚର୍ ବ୍ୟବହାର କରନ୍ତୁ, କିମ୍ବା AA/AAA ଅନୁପାଳନ ପାଇଁ ଉପଯୁକ୍ତ କ୍ଷେତ୍ର ଦର୍ଶାଉଥିବା ଦୃଶ୍ୟ ସୂଚକ ସହିତ HSL ସ୍ଲାଇଡର୍ ଦ୍ୱାରା ନିଜେ ରଙ୍ଗ ସଜାଡ଼ନ୍ତୁ।

ସବୁଜ କ୍ଷେତ୍ର ଏବଂ AA/AAA ଚିହ୍ନ WCAG ଅନୁପାଳନ ପାଇଁ ଉପଯୁକ୍ତ ପରିସର ଦେଖାଏ। ଦିଗ ସୂଚନା (ଅଧିକ ଉଜ୍ଜ୍ୱଳ/ଅଧିକ ଗାଢ଼) ଆପଣଙ୍କ ବର୍ତ୍ତମାନର ରଙ୍ଗ ସମ୍ମିଶ୍ରଣ ଅନୁସାରେ ଭଲ ବିପରୀତତା ଆଡ଼କୁ ମାର୍ଗଦର୍ଶନ କରେ।

ହଁ, ଆପଣ ଯେକୌଣସି HEX ରଙ୍ଗ କୋଡ୍ ପ୍ରବେଶ କରିପାରିବେ କିମ୍ବା କଷ୍ଟମ୍ ରଙ୍ଗ ବାଛିବାକୁ ରଙ୍ଗ ଚୟନକାରୀ ବ୍ୟବହାର କରିପାରିବେ। URL ସ୍ୱୟଂଚାଳିତ ଭାବେ ଅପଡେଟ୍ ହୁଏ, ତେଣୁ ଆପଣ ନିର୍ଦ୍ଦିଷ୍ଟ ରଙ୍ଗ ସମ୍ମିଶ୍ରଣ ସେୟାର କରିପାରିବେ।