Color Contrast Checker

Check color contrast ratio according to WCAG accessibility guidelines.

Sample Text 샘플 텍스트 123

Contrast Ratio

21:1

Normal Text

AA (4.5:1) Pass
AAA (7:1) Pass

Large Text (18pt+)

AA (3:1) Pass
AAA (4.5:1) Pass

Suggested Color Combinations

Color Contrast Checker Guide

All About Color Contrast Checking

The Color Contrast Checker measures the contrast ratio between a foreground (text) color and a background color according to WCAG 2.1 (Web Content Accessibility Guidelines). Maintaining proper color contrast ensures that people with visual impairments, color blindness, or age-related vision loss can read your content. It also improves readability for everyone using mobile devices in bright sunlight. This tool calculates the relative luminance of both colors, determines the contrast ratio, and grades the result against WCAG AA and AAA standards. WCAG is an international standard created by the W3C (World Wide Web Consortium), first published as WCAG 1.0 in 1999 and now widely applied in its 2.1 version. Legal frameworks such as the ADA (Americans with Disabilities Act) in the US, EN 301 549 in Europe, and South Korea's KWCAG all reference WCAG criteria. This means color contrast checking is not merely a design preference but a requirement that can carry legal implications for public-facing websites.

WCAG Grade Requirements

  • AA Normal Text - Minimum 4.5:1 contrast ratio required. This is the baseline web accessibility standard.
  • AA Large Text - Minimum 3:1 ratio required (18pt+ or 14pt bold).
  • AAA Normal Text - Minimum 7:1 contrast ratio required. This is the enhanced accessibility standard.
  • AAA Large Text - Minimum 4.5:1 contrast ratio required.