Color Contrast Checker
Calculate contrast ratio between text and background colors for WCAG 2.1 AA/AAA compliance.
Contrast Checker
Visual Preview
Sample Text
Contrast Ratio: 17.85:1
color: #ffffff;
background-color: #0f172a;
/* Contrast Ratio: 17.85:1 */About Color Contrast Checker
The WCAG Color Contrast Checker evaluates color pairs against Web Content Accessibility Guidelines (WCAG 2.1) Level AA and AAA standards. Calculate exact contrast ratios, view real-time compliance badges, and inspect simulated color blindness previews.
How to Use Color Contrast Checker
Step 1
Enter or pick Foreground (Text) color hex code.
Step 2
Enter or pick Background color hex code.
Step 3
Inspect the computed contrast ratio score (e.g. 7.4:1).
Step 4
Review WCAG AA and AAA compliance badges for normal and large text.
Practical Use Cases for Color Contrast Checker
A11y Accessibility Audits & Legal Compliance
Verify that website text and UI components meet ADA, Section 508, and WCAG 2.1 AA legal accessibility standards.
Design System Color Palette Validation
Test text, button, and badge color pairs in Figma or CSS design systems to ensure legible typography.
Input & Output Examples
Checking Contrast between #0F172A and #FFFFFF
Foreground: #FFFFFF (White), Background: #0F172A (Slate 900)
Contrast Ratio: 16.14:1 (PASS: WCAG AA & AAA for Normal Text, Large Text, and UI Components)
Key Features & Performance
- ✓Calculates exact mathematical WCAG contrast ratio (1:1 to 21:1).
- ✓Instant pass/fail badges for WCAG 2.1 AA & AAA (Normal Text, Large Text, UI Components).
- ✓Live typography preview with customizable font sizes.
- ✓Color blindness simulation filters (Protanopia, Deuteranopia, Tritanopia, Achromatopsia).
- ✓1-Click Swap foreground and background colors.
- ✓100% Client-Side calculation with zero server network calls.
Key Terminology & Definitions
Contrast Ratio
A mathematical ratio ranging from 1:1 (no contrast) to 21:1 (maximum contrast, black on white) measuring the relative luminance between two colors.
WCAG 2.1 Level AA Standard
Requires a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold) and graphical UI components.