AES Encryption Explained: How It Works and Why It Matters
Jun 23, 2026
WCAG Color Contrast Checker
Check foreground/background color contrast ratio against WCAG 2.2 AA/AAA compliance levels with pass/fail indicator.
Color Contrast Checker
--.--
: 1
AA Normal
--
≥ 4.5:1
AA Large
--
≥ 3:1
AAA Normal
--
≥ 7:1
AAA Large
--
≥ 4.5:1
Sample Text — The quick brown fox jumps over the lazy dog.
Small text sample for visual reference. WCAG requires 4.5:1 for normal text and 3:1 for large text (≥18pt or ≥14pt bold).
How to Use
- Enter colors — Type hex codes (e.g. #111827) or use the color picker for foreground (text) and background colors.
- Check results — The contrast ratio is calculated instantly. Each WCAG level shows PASS or FAIL.
- Swap colors — Use the Swap button to quickly invert foreground and background.
- Preview — Sample text is rendered with your chosen colors for visual reference.
WCAG 2.2 Contrast Requirements
| Level | Normal Text | Large Text | Description |
|---|---|---|---|
| AA | ≥ 4.5:1 | ≥ 3:1 | Minimum contrast for readability |
| AAA | ≥ 7:1 | ≥ 4.5:1 | Enhanced contrast for better accessibility |
Large text is defined as ≥18pt or ≥14pt bold. These criteria apply to text and images of text, excluding logos and decorative elements.
Frequently Asked Questions
What is the WCAG contrast ratio?
The contrast ratio is a measure of the difference in luminance between two colors, ranging from 1:1 (identical) to 21:1 (black on white). WCAG defines minimum ratios for accessible text.
How is the contrast ratio calculated?
The relative luminance of each color is calculated using the sRGB formula, then the ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. This follows the WCAG 2.x specification.
What is the difference between AA and AAA?
AA is the minimum compliance level required by most accessibility standards (e.g., Section 508). AAA is a higher standard that provides enhanced readability for users with visual impairments.
Is my data sent to a server?
No. All calculations happen 100% client-side in your browser. Your colors never leave your device.
Last updated: 1 Jul 2026
Blog
Latest from Our Blog
CSS Gradient Generator: Create Stunning Gradients for Your Website
Jun 23, 2026
Diff Checker: How to Compare Text and Files Effectively
Jun 23, 2026
JSON Validation: How to Validate and Fix JSON Data
Jun 23, 2026
Regex Testing: How to Test and Debug Regular Expressions
Jun 23, 2026
SSL Certificate Checker: How to Verify SSL/TLS Certificates Online
Jun 23, 2026