Tools / Contrast Checker

Contrast Checker

Check color contrast ratios for WCAG accessibility compliance. Test text and background colors for AA and AAA standards.

7,500 AI Tokens Used
Feb 1, 2026 Created
designaccessibility
Categories
Large Text (18pt+)Normal text appears like this. Check if it's readable.Small text (14px) for fine print and captions.
Contrast Ratio
14.18:1
1:14.5:1 (AA)7:1 (AAA)21:1
Normal TextAAA

Requires 4.5:1 for AA, 7:1 for AAA

Large Text (18pt+ or 14pt bold)AAA

Requires 3:1 for AA, 4.5:1 for AAA

WCAG 2.1 Guidelines

Level AA (Minimum): 4.5:1 for normal text, 3:1 for large text
Level AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text
Large text is 18pt (24px) or 14pt (18.67px) bold.

Contrast calculations use the WCAG 2.1 relative luminance formula. All processing is local.

How This Tool Was Built

This tool was created entirely by AI. Here's the exact prompt used to generate it:

Prompt Used 
Create a WCAG Contrast Checker tool with these features:

1. Live preview showing text on background color
2. Contrast ratio calculation and display
3. WCAG compliance indicators:
   - Normal text: AA (4.5:1), AAA (7:1)
   - Large text: AA (3:1), AAA (4.5:1)
4. Color inputs for foreground and background:
   - Color picker
   - Hex input
   - Copy button
5. Swap colors button
6. Quick preset colors
7. Visual ratio bar showing where the contrast falls
8. Use WCAG 2.1 relative luminance formula
9. Show pass/fail badges with color coding

Make it accessible and informative with purple as the accent color.
AI
Claude AI Model
#
7,500 Tokens Used
100%
AI-Generated Code Origin