MoaKit
All tools

Color Contrast Checker

Check text and background contrast against WCAG AA/AAA and APCA, and get the nearest passing color.

미리보기

큰 제목 글자

본문 글자는 이 정도 크기예요. 오래 읽어도 눈이 편한지 확인해 보세요.

작은 안내 글자 12px

버튼

7.57:1

아주 좋아요

APCA Lc 86.3 · 본문에 충분

  • AA 본문 글자일반 글자(약 18px 미만) · 4.5:1기준 통과
  • AA 큰 글자24px 이상, 또는 굵은 19px 이상 · 3:1기준 통과
  • AAA 본문 글자더 엄격한 기준 · 7:1기준 통과
  • AAA 큰 글자큰 글자의 엄격한 기준 · 4.5:1기준 통과
  • 아이콘·입력칸 테두리버튼 모양, 아이콘, 포커스 표시 (WCAG 1.4.11) · 3:1기준 통과

What is Color Contrast Checker?

Calculates the contrast ratio between text and background colors and tells you whether it passes web accessibility standards (WCAG).

How to use

  1. Enter the text color and background color.
  2. Check the contrast ratio.
  3. If it falls short of the standard, adjust the colors.

Tips

  • 4.5:1 or higher is recommended for body text, and 3:1 or higher for large text.