WCAG Color Contrast Checker (AA / AAA)

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

๐Ÿ”’ 100% ๋ธŒ๋ผ์šฐ์ € ๋‚ด๐Ÿ†“ ํ‰์ƒ ๋ฌด๋ฃŒโšก ๊ฐ€์ž… ์—†์Œ
์ฐธ๊ณ : ์•„๋ž˜ ํˆด ์ธํ„ฐํŽ˜์ด์Šค๋Š” ํ˜„์žฌ ์˜์–ด๋กœ๋งŒ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. UI๋Š” ํ•˜๋‚˜์”ฉ ๋ฒˆ์—ญ ์ค‘์ž…๋‹ˆ๋‹ค. ์ด ํˆด์„ ์˜์–ด๋กœ ๋ณด๊ธฐ โ†’
The quick brown fox jumps over the lazy dog - 0123456789
14.33:1
Contrast ratio ยท Normal text
AA (normal โ‰ฅ 4.5)PASS
AA large (โ‰ฅ 3)PASS
AAA (normal โ‰ฅ 7)PASS
AAA large (โ‰ฅ 4.5)PASS

Uses the WCAG 2.1 sRGB relative-luminance formula. โ€œLarge textโ€ is 24px (18pt) regular or 18.66px (14pt) bold.

์‚ฌ์šฉ๋ฒ•

  1. 1
    Pick foreground and background

    Type HEX or use the color pickers. Alpha is supported and blended over the background.

  2. 2
    Read the ratio

    The exact contrast ratio appears with AA / AAA pass/fail badges for normal and large text.

  3. 3
    Nudge until it passes

    Sliders adjust lightness in tiny steps so you can find the closest passing shade.

WCAG Color Contrast Checker (AA / AAA) ์†Œ๊ฐœ

Free WCAG color contrast checker. Pick foreground and background colors to see the exact contrast ratio (per WCAG 2.1 relative luminance) and pass/fail badges for AA, AA Large, AAA, and AAA Large. Live preview of real text at the actual colors. Runs entirely in your browser. 712 Tools์˜ WCAG Color Contrast Checker (AA / AAA)์€ ์ตœ์‹  JavaScript API๋ฅผ ์‚ฌ์šฉํ•ด ์—ฌ๋Ÿฌ๋ถ„์˜ browser์—์„œ ์™„์ „ํžˆ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค - server๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณผ ์ผ์ด ์ ˆ๋Œ€ ์—†์Šต๋‹ˆ๋‹ค. ์ฆ‰, ์ฆ‰๊ฐ์ ์ธ ๊ฒฐ๊ณผ, ์™„์ „ํ•œ ํ”„๋ผ์ด๋ฒ„์‹œ, ๊ทธ๋ฆฌ๊ณ  ์—…๋กœ๋“œ ์ œํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค.

debugging ์„ธ์…˜, ๋น ๋ฅธ sanity check, ๋˜๋Š” ํ”„๋กœ๋•์…˜ ์ธ์‹œ๋˜ํŠธ - ์–ด๋–ค ์ƒํ™ฉ์ด๋“  ์ด ํˆด์€ ์›ํ•˜๋Š” ๋งŒํผ ๋ฌด๋ฃŒ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›Œํ„ฐ๋งˆํฌ ์—†์Œ, ๊ฐ€์ž… ์—†์Œ, ํˆด ๋‚ด ๊ด‘๊ณ  ์—†์Œ.

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

What ratios does WCAG require?

AA needs 4.5:1 for normal text and 3:1 for large. AAA needs 7:1 for normal and 4.5:1 for large. 'Large' is 18pt (24px) regular or 14pt (18.66px) bold.

Which luminance formula is used?

The WCAG 2.1 sRGB relative-luminance formula - the same one webaim.org and axe use. Results match to the fourth decimal.

What about APCA?

APCA (the proposed WCAG 3 algorithm) isn't included yet - it's still in draft. This tool sticks to the current WCAG 2.1 formula that accessibility auditors and lawyers actually cite.

๋” ์ฝ๊ธฐ

5 ๋ถ„ ์†Œ์š”

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

๊ด€๋ จ ํˆด

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

Palette Generator

Generate harmonious color palettes from a base color

CSS Gradient

Design linear, radial, and conic CSS gradients with live preview

Box Shadow

Design multi-layer CSS box-shadows with live preview

Glassmorphism

Design frosted-glass CSS cards with live preview and copy-ready code

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine