Color Contrast Checker

Check color contrast ratios for WCAG 2.1 compliance. Enter foreground and background colors to instantly see AA/AAA pass/fail results for normal and large text.

Checker
Presets:
#
#

다람쥐 헌 쳇바퀴에 타고파

가독성 테스트용 16px 일반 본문 텍스트.

14px 소형 텍스트 — 대비가 낮으면 읽기 어렵습니다.

대비율

AA 일반 텍스트

최소 4.5:1

통과 실패

AA 큰 텍스트

최소 3:1

통과 실패

AAA 일반 텍스트

최소 7:1

통과 실패

AAA 큰 텍스트

최소 4.5:1

통과 실패

How to Use

  1. 1
    Pick your colors

    Enter foreground and background colors using hex codes or the color picker.

  2. 2
    View contrast ratio

    See the calculated contrast ratio instantly as you type or select colors.

  3. 3
    Check compliance

    Review WCAG AA and AAA pass/fail results for both normal and large text.

About

The WCAG color contrast guidelines were developed by the World Wide Web Consortium (W3C) as part of the Web Content Accessibility Guidelines. First published in 1999, WCAG has evolved through versions 1.0, 2.0, 2.1, and 2.2, with each iteration refining accessibility standards for web content.

The contrast ratio formula is based on relative luminance calculations from the sRGB color space. Each color channel is converted from gamma-corrected sRGB to linear light, then combined using the standard luminance coefficients: 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The contrast ratio is computed as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance.

Section 508 of the US Rehabilitation Act and the European Accessibility Act both reference WCAG criteria. Meeting WCAG AA is typically the minimum legal requirement, while AAA represents the highest level of accessibility conformance.

FAQ

What is the difference between WCAG AA and AAA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility laws reference AA as the minimum standard, while AAA is recommended for critical content like government and healthcare websites.
What counts as large text in WCAG?
WCAG defines large text as at least 18 points (24px) for regular weight or 14 points (approximately 18.66px) for bold weight. Large text has a lower contrast requirement because bigger characters are inherently easier to read. This distinction matters when designing headings versus body copy.
How do I fix a low contrast ratio?
To improve contrast, darken your text color or lighten your background (or vice versa). Increase the lightness difference between foreground and background in HSL. As a rule of thumb, ensure at least 50% lightness difference. You can also try using a darker shade from the same color family — for example, switching from blue-400 to blue-700 against a white background.
What is a good contrast ratio for readability?
A ratio of 4.5:1 or higher meets WCAG AA for normal text and works well for most users. For optimal readability, aim for 7:1 or above. Pure black (#000000) on white (#FFFFFF) gives the maximum 21:1 ratio. Studies show that extremely high contrast like pure black on pure white can cause eye strain for some users — a slightly off-white background (#F8F8F8) or dark gray text (#1A1A1A) provides excellent readability with less harshness.
Does dark mode affect WCAG contrast compliance?
Yes. You must test contrast ratios separately for both light and dark modes because the foreground-background relationship changes. A color pairing that passes AA in light mode may fail in dark mode. Additionally, light text on dark backgrounds can appear brighter than expected due to the irradiation illusion — consider using slightly thinner font weights or slightly muted text colors in dark mode.

관련 글

튜토리얼

CSS light-dark() 기능: 기본 테마 전환

12월 11, 2025
튜토리얼

색상 API 설계: 색상 데이터용 REST 끝점

12월 01, 2025
색상 Q&A

검정은 색일까? 과학과 디자인의 답

11월 15, 2025