WCAG Color Contrast Checker
Inspect foreground and background color contrast ratios for WCAG 2.1 AA and AAA accessibility compliance.
WCAG Color Contrast Checker (AA / AAA)
Test foreground and background color combinations for accessibility compliance.
RenderXD Accessibility
The quick brown fox jumps over the lazy dog. Great web design requires readable text.
About WCAG Color Contrast Checker
The WCAG Color Contrast & Accessibility Checker evaluates text and background color pairs against WCAG 2.1 / 2.2 AA and AAA accessibility standards (Normal Text, Large Text, UI Components) with relative luminance calculations.
How to Use WCAG Color Contrast Checker
Step 1
Enter the text foreground color (HEX, RGB, or HSL).
Step 2
Enter the container background color.
Step 3
Review the contrast ratio score and WCAG AA/AAA pass/fail status badges.
Step 4
Inspect simulated previews across standard and color-blind vision filters.
Practical Use Cases for WCAG Color Contrast Checker
Web Accessibility Compliance (ADA / Section 508)
Verify that button text, paragraph copy, and form inputs meet international legal accessibility contrast standards.
Design System & UI Color Token Auditing
Audit primary brand color palettes to ensure high readability and contrast across light and dark theme modes.
Input & Output Examples
Testing Navy Blue on White Background
Foreground: #0F172A (Navy), Background: #FFFFFF (White)
Contrast Ratio: 16.1:1 | WCAG AA: Pass (Normal & Large) | WCAG AAA: Pass (Normal & Large)
Key Features & Performance
- ✓Calculates exact mathematical Contrast Ratio (e.g. 4.5:1, 7.1:1, 21:1).
- ✓Evaluates compliance across WCAG 2.1 / 2.2 AA and AAA for Normal Text, Large Text, and Graphic Components.
- ✓Color Suggestions: Automatically suggests the nearest accessible shade if your color fails.
- ✓Simulates color blindness filters: Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
- ✓100% Client-Side calculation.
Key Terminology & Definitions
WCAG 2.1 Level AA Thresholds
Requires a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text (18pt+ or 14pt bold) and active UI components.
Relative Luminance
The relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.