명암비 검사기
텍스트와 배경 색상의 명암비를 WCAG AA 및 AAA 기준으로 검사하고, 통과할 때까지 색상을 자동으로 조정합니다.
Contrast ratio
14.68:1
Relative luminance: #1f2937 = 0.0215 · #ffffff = 1.0000
Preview
Normal text: the quick brown fox jumps over the lazy dog.
Large text sample
| Level | Required ratio | Result |
|---|---|---|
| AA · normal text | 4.5:1 | Pass |
| AA · large text | 3:1 | Pass |
| AAA · normal text | 7:1 | Pass |
| AAA · large text | 4.5:1 | Pass |
사용 방법
- Choose a text (foreground) color and a background color. The swap button exchanges them.
- The contrast ratio and the WCAG AA / AAA results for normal and large text update immediately.
- Check the live preview to see how the pair actually looks.
- If the pair fails AA, use Adjust text color to pass AA: it keeps the hue and saturation and moves only the lightness to the nearest passing color.
참고 사항
The ratio follows the WCAG 2.x relative-luminance definition: (lighter luminance + 0.05) / (darker luminance + 0.05). AA requires 4.5:1 for normal text and 3:1 for large text (at least 18pt, or 14pt bold); AAA requires 7:1 and 4.5:1 respectively. All calculations run locally in your browser.
자주 묻는 질문
- Why can the automatic adjustment change the color a lot?
- The adjustment only moves lightness, so a pair with a small luminance gap may need a big lightening (or darkening) step to pass. Treat it as a starting point when you want to keep the same hue.
- What counts as large text?
- WCAG counts text as large at 18pt (about 24px) or larger, or 14pt (about 18.66px) or larger when bold.