๐Ÿ› ๏ธ์œ ํ‹ธ๋ฆฌํ‹ฐ ํ—ˆ๋ธŒ
๐Ÿ’ฌํ”ผ๋“œ๋ฐฑ
๐Ÿ  ํ™ˆ์œผ๋กœ

๐ŸŽฏ ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ & ๊ฐ€๋…์„ฑ ๊ฒ€์‚ฌ๊ธฐ

๋‘ ์ƒ‰์ƒ์˜ WCAG 2.1 ๋Œ€๋น„์œจ์„ ๊ณ„์‚ฐํ•˜๊ณ , ๋””์ž์ธ ์ดˆ๋ณด์ž๋„ ์‹คํŒจ ์—†๋Š” ์ƒ‰์ƒ ์กฐํ•ฉ์„ ์ฐพ์•„๋ณด์„ธ์š”.

์ƒ‰์ƒ ์„ ํƒ

WCAG 2.1 ์ ์ˆ˜

17.74: 1
3:1
4.5:1
7:1
์ผ๋ฐ˜ ํ…์ŠคํŠธ (16px)โœ“ AAA
ํฐ ํ…์ŠคํŠธ (18px+)โœ“ AAA
WCAG 2.1 ๊ธฐ์ค€
AA ์ผ๋ฐ˜ ํ…์ŠคํŠธ: 4.5:1 ์ด์ƒ ย |ย  AA ํฐ ํ…์ŠคํŠธ(18px+): 3:1 ์ด์ƒ
AAA ์ผ๋ฐ˜ ํ…์ŠคํŠธ: 7:1 ์ด์ƒ ย |ย  AAA ํฐ ํ…์ŠคํŠธ: 4.5:1 ์ด์ƒ

์‹ค์‹œ๊ฐ„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

Heading (24px)

The quick brown fox jumps over the lazy dog.

Body (16px)

The quick brown fox jumps over the lazy dog.

Small (12px)

The quick brown fox jumps over the lazy dog.

Button (14px)

The quick brown fox jumps over the lazy dog.

Heading (24px)โœ“ AAA
Body (16px)โœ“ AAA
Small (12px)โœ“ AAA
Button (14px)โœ“ AAA

ํŠธ๋ Œ๋“œ ํŒ”๋ ˆํŠธ

ํด๋ฆญํ•˜๋ฉด ์ƒ‰์ƒ์ด ์ฆ‰์‹œ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค

์ด ๋„๊ตฌ๋ฅผ ์นœ๊ตฌ์—๊ฒŒ ๊ณต์œ ํ•˜๊ธฐ

์ถ”์ฒœ ๋„๊ตฌ

๐ŸŽจAI ๋กœ๊ณ  & ํŒŒ๋น„์ฝ˜ ์ƒ์„ฑ๊ธฐ
๐Ÿ”ค๋‹ค๊ตญ์–ด ํฐํŠธ ๋น„๊ต๊ธฐ
๐Ÿ’ฌ์‚ฌ์šฉ์ž ํ”ผ๋“œ๋ฐฑ ์ˆ˜์ง‘๊ธฐ
๊ด‘๊ณ  ์˜์—ญ

์ƒ‰์ƒ ํŒ”๋ ˆํŠธ & WCAG ๊ฐ€๋…์„ฑ ๊ฒ€์‚ฌ๊ธฐ๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

์ƒ‰์ƒ ๋Œ€๋น„ ๊ฒ€์‚ฌ๊ธฐ(Color Contrast Checker)๋Š” ๋‘ ์ƒ‰์ƒ ๊ฐ„์˜ ๋ช…๋„ ๋Œ€๋น„(Contrast Ratio)๋ฅผ WCAG 2.1(Web Content Accessibility Guidelines) ๊ธฐ์ค€์œผ๋กœ ์ฆ‰์‹œ ๊ณ„์‚ฐํ•ด์ฃผ๋Š” ์›น ์ ‘๊ทผ์„ฑ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ํ…์ŠคํŠธ์™€ ๋ฐฐ๊ฒฝ์ƒ‰์˜ ์กฐํ•ฉ์ด ์‹œ๊ฐ ์žฅ์• ์ธ, ์ƒ‰๋งน ์‚ฌ์šฉ์ž, ๊ณ ๋ น ์‚ฌ์šฉ์ž๋ฅผ ํฌํ•จํ•œ ๋ชจ๋“  ์‚ฌ๋žŒ์ด ์ฝ๊ธฐ์— ์ถฉ๋ถ„ํ•œ ๋Œ€๋น„๋ฅผ ๊ฐ€์ง€๋Š”์ง€ AA/AAA ๊ธฐ์ค€์œผ๋กœ ํŒ๋ณ„ํ•ฉ๋‹ˆ๋‹ค. ํŠธ๋ Œ๋”ฉ ํŒ”๋ ˆํŠธ๋ฅผ ํด๋ฆญ ํ•œ ๋ฒˆ์œผ๋กœ ์ ์šฉํ•˜๊ณ , ๋””์ž์ด๋„ˆยท๊ฐœ๋ฐœ์žยทPM ๋ˆ„๊ตฌ๋‚˜ ์‰ฝ๊ฒŒ ์ ‘๊ทผ์„ฑ์„ ๊ฒ€์ฆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฃผ์š” ํ™œ์šฉ ์‚ฌ๋ก€

๐ŸŽจ
UI/UX ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•
๋ฒ„ํŠผ ์ƒ‰์ƒ, ํผ ๋ ˆ์ด๋ธ”, ์•Œ๋ฆผ ๋ฉ”์‹œ์ง€ ๋“ฑ UI ์ปดํฌ๋„ŒํŠธ์˜ ํ…์ŠคํŠธ-๋ฐฐ๊ฒฝ ์กฐํ•ฉ์ด WCAG ๊ธฐ์ค€์„ ์ถฉ์กฑํ•˜๋Š”์ง€ ๊ฒ€์ฆํ•ฉ๋‹ˆ๋‹ค.
โ™ฟ
์›น ์ ‘๊ทผ์„ฑ(Accessibility) ์ค€์ˆ˜
๊ณต๊ณต๊ธฐ๊ด€, ๊ธˆ์œต, ๊ต์œก ์‚ฌ์ดํŠธ ๋“ฑ ๋ฒ•์ ์œผ๋กœ ์›น ์ ‘๊ทผ์„ฑ ์ค€์ˆ˜๊ฐ€ ํ•„์š”ํ•œ ์„œ๋น„์Šค์˜ ์ƒ‰์ƒ ๋Œ€๋น„๋ฅผ ์‚ฌ์ „์— ๊ฒ€ํ† ํ•ฉ๋‹ˆ๋‹ค.
๐Ÿ“Š
ํ”„๋ ˆ์  ํ…Œ์ด์…˜ & ์ธํฌ๊ทธ๋ž˜ํ”ฝ
๋ฐœํ‘œ ์ž๋ฃŒ, ๋Œ€์‹œ๋ณด๋“œ, ์ฐจํŠธ์˜ ์ƒ‰์ƒ ์กฐํ•ฉ์„ ๊ฒ€์‚ฌํ•ด ๋น”ํ”„๋กœ์ ํ„ฐ ํ™˜๊ฒฝ์ด๋‚˜ ์ธ์‡„๋ฌผ์—์„œ๋„ ์„ ๋ช…ํ•˜๊ฒŒ ๋ณด์ด๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
๐ŸŽฏ
๋งˆ์ผ€ํŒ… & ๋ธŒ๋žœ๋“œ ๋””์ž์ธ
๋ธŒ๋žœ๋“œ ์ปฌ๋Ÿฌ ๊ธฐ๋ฐ˜์˜ ๋ฐฐ๋„ˆ, ์ด๋ฉ”์ผ ๋‰ด์Šค๋ ˆํ„ฐ, SNS ๊ฒŒ์‹œ๋ฌผ ๋””์ž์ธ ์‹œ ํ…์ŠคํŠธ ๊ฐ€๋…์„ฑ์„ ํ™•๋ณดํ•ฉ๋‹ˆ๋‹ค.

์‚ฌ์šฉ ๋ฐฉ๋ฒ•

  1. 1
    ๋ฐฐ๊ฒฝ์ƒ‰ & ํ…์ŠคํŠธ์ƒ‰ ์„ ํƒ
    ์ƒ‰์ƒ ํ”ผ์ปค์—์„œ ๋ฐฐ๊ฒฝ์ƒ‰๊ณผ ํ…์ŠคํŠธ(์ „๊ฒฝ)์ƒ‰์„ ์„ ํƒํ•˜๊ฑฐ๋‚˜ HEX ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค. โ†” ๋ฒ„ํŠผ์œผ๋กœ ๋‘ ์ƒ‰์ƒ์„ ์Šค์™‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. 2
    WCAG ์ ์ˆ˜ ํ™•์ธ
    ์ผ๋ฐ˜ ํ…์ŠคํŠธ(16px) AA/AAA, ํฐ ํ…์ŠคํŠธ(18px+) AA/AAA ๊ธฐ์ค€ 4๊ฐ€์ง€ ํ•ฉ๊ฒฉ/๋ถˆํ•ฉ๊ฒฉ ๋ฐฐ์ง€๋ฅผ ์ฆ‰์‹œ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
  3. 3
    ํŠธ๋ Œ๋”ฉ ํŒ”๋ ˆํŠธ ์ ์šฉ
    ํ•˜๋‹จ์˜ ํŠธ๋ Œ๋”ฉ ํŒ”๋ ˆํŠธ ์นด๋“œ๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ•ด๋‹น ์ƒ‰์ƒ ์กฐํ•ฉ์ด ์ฆ‰์‹œ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ํŒ”๋ ˆํŠธ๋ฅผ ๋น ๋ฅด๊ฒŒ ๋น„๊ตํ•ด๋ณด์„ธ์š”.
  4. 4
    ๊ฒฐ๊ณผ ๊ณต์œ  & ๋””์ž์ธ ์ ์šฉ
    ํ•ฉ๊ฒฉ ๋ฐฐ์ง€ ๊ฒฐ๊ณผ๋ฅผ ์Šคํฌ๋ฆฐ์ƒท์œผ๋กœ ํŒ€์—๊ฒŒ ๊ณต์œ ํ•˜๊ฑฐ๋‚˜, ํ™•์ธ๋œ ์ƒ‰์ƒ ์กฐํ•ฉ์„ ๋””์ž์ธ ์‹œ์Šคํ…œ ๋ฌธ์„œ์— ๊ธฐ๋กํ•˜์—ฌ ๋ธŒ๋žœ๋“œ ๊ฐ€์ด๋“œ๋ผ์ธ์œผ๋กœ ํ™œ์šฉํ•˜์„ธ์š”.

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