Color Contrast Checker (WCAG)
Free online Color Contrast Checker and WCAG contrast ratio analyzer. Test text and background color combinations for WCAG 2.1 Level AA and AAA accessibility compliance, ADA requirements, and UI readability with real-time interactive previews.
Test foreground and background color combinations against official Web Content Accessibility Guidelines.
Live Color Blindness & Visual Preview Box
Inspect how your selected palette appears across different types of color vision deficiencies in real time.
Preview Headline & Interactive Typography
This live visual sandbox demonstrates exactly how text, borders, buttons, and hyperlinks render for people with standard vision. Adequate luminance contrast guarantees high readability.
7.29 : 1
Verified Accessible Color Presets
Click to apply paletteStep-by-Step Instructions
Enter Foreground & Background Colors
Input text color and background color using Hex, RGB, HSL, or color picker.
Review Contrast Ratio
Evaluate calculated luminance contrast ratio (ranging from 1:1 to 21:1).
Check WCAG 2.1 / 2.2 Compliance Levels
Review Pass/Fail status for Level AA and Level AAA standards across Normal Text, Large Text, and UI Components.
Use Auto-Adjust Color Fixer
Automatically adjust color lightness/darkness with 1 click to achieve guaranteed compliance.
Key Features & Capabilities
- WCAG 2.1 & 2.2 relative luminance formula: $L = 0.2126 R + 0.7152 G + 0.0722 B$ and contrast ratio: $\frac{L_1 + 0.05}{L_2 + 0.05}$
- Compliance verification for Level AA (4.5:1 normal text, 3:1 large text) and Level AAA (7:1 normal text, 4.5:1 large text)
- UI component & graphical object contrast check (3:1 minimum requirement for inputs, buttons, and borders)
- Interactive text size preview simulating typography on desktop and mobile viewports
Frequently Asked Questions
What is the WCAG contrast ratio requirement for Level AA vs Level AAA?
Under Web Content Accessibility Guidelines (WCAG 2.1/2.2): **Level AA**: requires at least **4.5:1** for regular text (<18pt / <14pt bold), **3.0:1** for large text (≥18pt or ≥14pt bold), and **3.0:1** for UI controls/borders. **Level AAA**: requires at least **7.0:1** for regular text and **4.5:1** for large text.
How is relative luminance calculated for color contrast?
Relative luminance ($L$) calculates the relative brightness of any point in a colorspace normalized to 0 for darkest black and 1 for lightest white. Contrast ratio is computed as: $\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$, where $L_1$ is the relative luminance of the lighter color and $L_2$ is the relative luminance of the darker color.
Why is 3:1 contrast required for non-text UI components?
WCAG Success Criterion 1.4.11 requires a 3:1 minimum contrast ratio for user interface components (button borders, form input outlines, toggle switches, active focus indicators). This ensures low-vision users can identify interactive clickable controls on the screen.
What text is considered 'Large Text' under WCAG guidelines?
Large text is defined as text that is at least **18pt (24px)** in standard font weight, or at least **14pt (18.66px)** in **bold** font weight (or equivalent font weight 700+).
Related Utilities
Discover complementary online tools in the same workflow.
JSON Formatter & Validator
Format, beautify, minify, validate, and view JSON data online with instant syntax highlighting and error detection.
Base64 Encoder & Decoder
Encode text or binary data into Base64 format or decode Base64 back into raw string format.
CSV to JSON Converter
Easily convert CSV data to clean JSON format. Turn tabular spreadsheets into structured JSON.
YAML to JSON Converter
Convert YAML configuration files into structured JSON for APIs and modern web tooling.
JWT Parser & Token Debugger
Decode JWT tokens to view header, payload claims, and expiration status without sending secrets anywhere.
Hash Generator (SHA-256, SHA-512, MD5)
Generate cryptographically secure SHA-256, SHA-512, SHA-384, and SHA-1 hashes for any text.