CreatorHelper
โ™ฟ

์ƒ‰์ƒ ๋Œ€๋น„ ๊ฒ€์‚ฌ๊ธฐ

WCAG ๋ช…์•” ๋Œ€๋น„์œจ ๊ณ„์‚ฐ ยท AA/AAA Pass/Fail ยท ํ…์ŠคํŠธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ยท ์ ‘๊ทผ์„ฑ ์ ์ˆ˜ ยท ๋ฌด๋ฃŒ

๋น ๋ฅธ ํ”„๋ฆฌ์…‹

๐Ÿ‘ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

์ผ๋ฐ˜ ํ…์ŠคํŠธ ์ƒ˜ํ”Œ (16px)

ํฐ ํ…์ŠคํŠธ ์ƒ˜ํ”Œ (24px ๊ตต๊ฒŒ)

์ด ๋ฐฐ๊ฒฝ์ƒ‰์—์„œ ํ…์ŠคํŠธ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€ ํ™•์ธํ•˜์„ธ์š”

๋Œ€๋น„์œจ

6.70: 1

๋“ฑ๊ธ‰

AA

์ ‘๊ทผ์„ฑ ์ ์ˆ˜

75/100

์ผ๋ฐ˜ ํ…์ŠคํŠธํฐ ํ…์ŠคํŠธ (18px+ ๋˜๋Š” 14px ๊ตต๊ฒŒ)
WCAG AA
โœ… ํ†ต๊ณผโœ… ํ†ต๊ณผ
WCAG AAA
โŒ ์‹คํŒจโœ… ํ†ต๊ณผ

๐Ÿ’ก ์ ‘๊ทผ์„ฑ ํŒ

  • โ€ข WCAG AA (4.5:1)๋Š” ๋Œ€๋ถ€๋ถ„ ๊ตญ๊ฐ€์˜ ๋ฒ•์  ์ตœ์†Œ ๊ธฐ์ค€์ž…๋‹ˆ๋‹ค.
  • โ€ข AAA (7:1)์€ ๋ณธ๋ฌธ ํ…์ŠคํŠธ์— ๊ถŒ์žฅ๋˜๋Š” ์ตœ๊ณ  ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€์ž…๋‹ˆ๋‹ค.
  • โ€ข ํฐ ํ…์ŠคํŠธ(18px+)๋Š” AA ๊ธฐ์ค€์ด 3:1๋กœ ๋‚ฎ์•„์ง‘๋‹ˆ๋‹ค.

WCAG ์ƒ‰์ƒ ๋Œ€๋น„์œจ์ด๋ž€?

WCAG(Web Content Accessibility Guidelines)๋Š” W3C๊ฐ€ ๋ฐœํ‘œํ•œ ์›น ์ ‘๊ทผ์„ฑ ๊ตญ์ œ ํ‘œ์ค€์ž…๋‹ˆ๋‹ค. ์ƒ‰์ƒ ๋Œ€๋น„์œจ์€ ํ…์ŠคํŠธ์™€ ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ ์‚ฌ์ด์˜ ๋ฐ๊ธฐ ์ฐจ์ด๋ฅผ 1:1(๋™์ผ)์—์„œ 21:1(ํ‘๋ฐฑ) ์‚ฌ์ด์˜ ์ˆซ์ž๋กœ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. ๋Œ€๋น„์œจ์ด ๋†’์„์ˆ˜๋ก ์‹œ์ธ์„ฑ์ด ์ข‹์•„ ์ €์‹œ๋ ฅ์ž์™€ ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž ๋ชจ๋‘์—๊ฒŒ ๋” ์ฝ๊ธฐ ์‰ฌ์šด ๋””์ž์ธ์ด ๋ฉ๋‹ˆ๋‹ค.

์œ ํŠœ๋ธŒยทSNS ํฌ๋ฆฌ์—์ดํ„ฐ์—๊ฒŒ ์™œ ์ค‘์š”ํ•œ๊ฐ€์š”?

  • ์ธ๋„ค์ผ CTR: ํ…์ŠคํŠธ๊ฐ€ ๋ฐฐ๊ฒฝ๊ณผ ๋ช…ํ™•ํ•˜๊ฒŒ ๊ตฌ๋ถ„๋ ์ˆ˜๋ก ์ž‘์€ ํ™”๋ฉด์—์„œ๋„ ์ฝํžˆ๋ฉฐ ํด๋ฆญ๋ฅ ์ด ๋†’์•„์ง‘๋‹ˆ๋‹ค.
  • ์ž๋ง‰ ๊ฐ€๋…์„ฑ: ์˜์ƒ ์ž๋ง‰ ํ…์ŠคํŠธ์˜ ๋Œ€๋น„์œจ์ด ๋‚ฎ์œผ๋ฉด ์‹œ์ฒญ์ž ๊ฒฝํ—˜์ด ์ €ํ•˜๋ฉ๋‹ˆ๋‹ค.
  • ์†Œ์…œ ์นด๋“œ: OG ์ด๋ฏธ์ง€, ๋งํฌ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์นด๋“œ์˜ ํ…์ŠคํŠธ ๊ฐ€๋…์„ฑ์€ ๊ณต์œ ์œจ์— ์˜ํ–ฅ์„ ์ค๋‹ˆ๋‹ค.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ (FAQ)

WCAG ์ƒ‰์ƒ ๋Œ€๋น„์œจ ๊ธฐ์ค€์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

WCAG 2.1 ๊ธฐ์ค€: AA ๋ ˆ๋ฒจ์€ ์ผ๋ฐ˜ ํ…์ŠคํŠธ 4.5:1, ํฐ ํ…์ŠคํŠธ(18px+) 3:1 ์ด์ƒ. AAA ๋ ˆ๋ฒจ์€ ์ผ๋ฐ˜ ํ…์ŠคํŠธ 7:1, ํฐ ํ…์ŠคํŠธ 4.5:1 ์ด์ƒ์ž…๋‹ˆ๋‹ค.

์ ‘๊ทผ์„ฑ ๋Œ€๋น„์œจ์ด ์ค‘์š”ํ•œ ์ด์œ ๋Š”?

์ „ ์„ธ๊ณ„ ์•ฝ 2์–ต 5์ฒœ๋งŒ ๋ช…์ด ์‹œ๊ฐ ์žฅ์• ๋ฅผ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ถฉ๋ถ„ํ•œ ๋ช…์•” ๋Œ€๋น„๋Š” ์ €์‹œ๋ ฅ์ž, ์ƒ‰๋งน, ๋ฐ์€ ํ–‡๋น› ์•„๋ž˜ ์Šค๋งˆํŠธํฐ ์‚ฌ์šฉ์ž ๋ชจ๋‘๊ฐ€ ํ…์ŠคํŠธ๋ฅผ ์ฝ์„ ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.

AA์™€ AAA ๊ธฐ์ค€ ์ค‘ ์–ด๋–ค ๊ฒƒ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋‚˜์š”?

AA(4.5:1)๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์›น์‚ฌ์ดํŠธ์™€ ์•ฑ์—์„œ ๋ฒ•์  ์ตœ์†Œ ๊ธฐ์ค€์ž…๋‹ˆ๋‹ค. ์˜๋ฃŒยท๊ณต๊ณต๊ธฐ๊ด€ยท์žฅ์• ์ธ ์ ‘๊ทผ์„ฑ์ด ์ค‘์š”ํ•œ ์„œ๋น„์Šค๋Š” AAA(7:1) ๊ธฐ์ค€์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค.

์œ ํŠœ๋ธŒ ์ธ๋„ค์ผ์—๋„ ๋Œ€๋น„์œจ์ด ์ค‘์š”ํ•œ๊ฐ€์š”?

๋„ค, ์ธ๋„ค์ผ ํ…์ŠคํŠธ์™€ ๋ฐฐ๊ฒฝ์˜ ๋Œ€๋น„์œจ์ด ๋†’์„์ˆ˜๋ก ๊ฐ€๋…์„ฑ์ด ์ข‹์•„์ ธ ํด๋ฆญ๋ฅ (CTR)์ด ํ–ฅ์ƒ๋ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ๋ชจ๋ฐ”์ผ์—์„œ ์ž‘์€ ์ธ๋„ค์ผ๋กœ ํ‘œ์‹œ๋  ๋•Œ ๋ช…ํ™•ํ•œ ๋Œ€๋น„๊ฐ€ ๋” ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

๋Œ€๋น„์œจ์ด ๋‚ฎ์„ ๋•Œ ์–ด๋–ป๊ฒŒ ๊ฐœ์„ ํ•˜๋‚˜์š”?

ํ…์ŠคํŠธ๋ฅผ ๋” ์–ด๋‘ก๊ฒŒ(๋ฐฐ๊ฒฝ์ด ๋ฐ์„ ๋•Œ) ๋˜๋Š” ๋” ๋ฐ๊ฒŒ(๋ฐฐ๊ฒฝ์ด ์–ด๋‘์šธ ๋•Œ) ์กฐ์ •ํ•˜์„ธ์š”. ํฐ ํ…์ŠคํŠธ์— ์–ด๋‘์šด ๊ทธ๋ฆผ์ž๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜, ํ…์ŠคํŠธ ๋’ค์— ๋ฐ˜ํˆฌ๋ช… ๋ฐฐ๊ฒฝ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋„ ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค.

์ด ๋„๊ตฌ๋Š” ์–ด๋–ป๊ฒŒ ๋Œ€๋น„์œจ์„ ๊ณ„์‚ฐํ•˜๋‚˜์š”?

W3C WCAG 2.1 ๊ณต์‹ ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์ƒ‰์ƒ์˜ ์ƒ๋Œ€์  ๊ด‘๋„(Relative Luminance)๋ฅผ ๊ณ„์‚ฐํ•œ ํ›„ (L1+0.05)/(L2+0.05) ๊ณต์‹์œผ๋กœ ๋Œ€๋น„์œจ์„ ๊ตฌํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ๊ณ„์‚ฐ์€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค.

์ƒ‰์ƒ ๋Œ€๋น„ ๊ฒ€์‚ฌ๊ธฐ โ€” WCAG ๋ช…์•” ๋Œ€๋น„์œจ ๊ณ„์‚ฐ ยท AA/AAA Pass/Fail | Creator Helper