12px AA Normal Text
AA Pass AAA Pass
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
WCAG Contrast Test
Color Contrast Checker
Test foreground and background colors against WCAG contrast thresholds for readable text, large type, and interface components.
Color contrast checker workflow
Quick test presets
Color input controls
Pick colors, paste HEX values, or start from a common preset.
RGB value: rgb(13, 13, 13)
HSL value: hsl(0, 0%, 5%)
RGB value: rgb(255, 255, 255)
HSL value: hsl(0, 0%, 100%)
Common color presets
Ink #0D0D0D
Paper #FFFAF0
White #FFFFFF
Orange #FF6A00
Yellow #FFC400
Success #24C84F
Gray Ink #3A3733
Blue #1D4ED8
Visual preview
Sample Heading Text
Sample subheading
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
Text color
#0D0D0D
rgb(13, 13, 13)
Background color
#FFFFFF
rgb(255, 255, 255)
Contrast results
19.44:1
Excellent contrast
Contrast strength
WCAG compliance check
AA Normal Text
4.5:1 minimum
AA Large Text
3:1 minimum
AAA Normal Text
7:1 minimum
AAA Large Text
4.5:1 minimum
UI Components
3:1 minimum
Technical details
- Normal text needs 4.5:1 for AA and 7:1 for AAA.
- Large text needs 3:1 for AA and 4.5:1 for AAA.
- Interface boundaries and graphical objects need at least 3:1.
Font-size testing
14px AA Normal Text
AA Pass AAA Pass
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
16px AA Normal Text
AA Pass AAA Pass
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
18px AA Normal Text
AA Pass AAA Pass
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
24px AA Large Text
AA Pass AAA Pass
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
32px AA Large Text
AA Pass AAA Pass
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
48px AA Large Text
AA Pass AAA Pass
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
Text variations
Sample Heading Text
Sample subheading
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
Small helper text should stay readable, not merely decorative.
Good contrast makes every interface feel calmer.
Accessibility summary
Contrast: 19.44:1
WCAG: Excellent contrast
Status: This color pair is accessible for normal text.
Next step: test this pair with real content and interactive states.
Color blindness simulation
Normal Vision
Original selected colors.
Sample Heading Text
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
#0D0D0D
#FFFFFF
19.44:1 Pass
Protanopia
Reduced red perception.
Sample Heading Text
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
#0D0D0D
#FFFFFF
19.44:1 Pass
Deuteranopia
Reduced green perception.
Sample Heading Text
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
#0D0D0D
#FFFFFF
19.44:1 Pass
Tritanopia
Reduced blue-yellow perception.
Sample Heading Text
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
#0D0D0D
#FFFFFF
19.44:1 Pass
Achromatopsia
No color perception.
Sample Heading Text
The quick brown fox jumps over the lazy dog. This sample checks whether real paragraph text stays readable at the selected contrast.
#0D0D0D
#FFFFFF
19.44:1 Pass
Quick tips
Start with high contrast
Pick readable pairs first, then tune the mood.
Test real content
Short labels and long paragraphs fail differently.
Test on mobile
Small screens, glare, and motion make contrast matter more.
Aim for AAA
AAA gives more room for real-world display conditions.