Contrast Test & Text Readability Checker
See how readable text is at different contrast levels, check your own color pairs against the WCAG guidelines, and preview how colors look with common types of color blindness.
Contrast Test
Ratio: 21.00:1
Contrast Test
Ratio: 21.00:1
Contrast Test
Ratio: 12.60:1
Contrast Test
Ratio: 7.00:1
Contrast Test
Ratio: 4.48:1
Contrast Test
Ratio: 3.87:1
Contrast Test
Ratio: 5.25:1
Contrast Test
Ratio: 7.16:1
Contrast Test
Ratio: 8.59:1
Contrast Test
Ratio: 1.24:1
Contrast Test
Ratio: 2.14:1
💡 Try contrast pairs 6-10 (colored pairs) to see the biggest differences
Color Transformation (Current Mode)
#000000 on #FFFFFF
Shortcuts
Found a stuck pixel? Try to revive it with the Dead Pixel Fixer
How to Use This Tool
What is this Test?
Contrast here means how well text and shapes stand out from their background. The WCAG ladder and readability modes show text at decreasing contrast with the ratio for each step, the custom pair mode calculates the ratio for your own colors, and the simulator previews how colors look with protanopia, deuteranopia, tritanopia and achromatopsia. The ratio is calculated from the colors, so it is the same on every screen; how deep your monitor's own black is shows best on a black screen in a dark room.
Test Modes Explained
- Pattern: Standard contrast patterns to evaluate visibility
- Gradients: Smooth transitions to detect banding and gradation problems
- Grid: Checkerboard patterns to test color combination contrast
- Custom: User-defined colors to test specific contrast scenarios
What to Look For
- Visibility Issues: Difficulty distinguishing foreground from background
- Color Blindness: Certain color combinations appearing the same or merged
- Banding: Visible bands in gradient contrasts suggest poor depth
- Uniformity: Uneven contrast across different areas of the screen
Testing Tips
- •Warm up your monitor for at least 30 minutes before testing
- •Test in a consistently lit environment without direct light on screen
- •View from multiple angles to check for viewing angle contrast issues
- •Compare results with calibrated reference displays if available
- •Test with vision mode filters to check accessibility
Keyboard Shortcuts
How this test works
Contrast ratios are calculated with the WCAG formula from the relative luminance of the text and background colors, the same method accessibility checkers use, so the result does not depend on your screen. The color blindness preview transforms the colors with simplified matrices, a common quick approximation; it is good for spotting colors that become hard to tell apart, not for exact predictions.
Pro Tip: WCAG asks for at least 4.5:1 for normal text and 3:1 for large text and graphics. Test the exact colors from your design in custom pair mode rather than guessing. If low-contrast steps all look the same on your screen, your gamma or brightness may be off; the brightness test helps you set them.
What is Display Contrast?
WCAG Standards
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. AAA requires 7:1, AA requires 4.5:1.
- ✓ AAA Level: 7:1 contrast
- ✓ AA Level: 4.5:1 contrast
- ✓ Fail: Below 4.5:1
Color Vision Deficiency
8% of men and 0.5% of women have some form of color blindness. Our simulator helps test accessibility for people with various types of color vision deficiency.
- ✓ Deuteranopia (Red-Green)
- ✓ Protanopia (Red-Green)
- ✓ Tritanopia (Blue-Yellow)
How to Test Monitor Contrast
View WCAG Ladder
11 pairs of colors with varying contrast ratios. See which levels you can distinguish.
Test Text Readability
View text samples at different contrast levels. AAA text should be easily readable from normal viewing distance.
Simulate Color Vision Deficiency
Switch between 5 vision modes to see how people with color blindness perceive your display.
Check Custom Colors
Test any foreground/background color pair to see the exact contrast ratio and WCAG compliance.
♿ Accessibility Matters
Following WCAG contrast guidelines isn't just for compliance, it improves readability for everyone. Proper contrast helps users with low vision, color blindness, and those viewing in bright conditions.
Learn more: WCAG 2.1 Level AAA guidelines at w3.org
Frequently Asked Questions
What contrast ratio does text need to be readable?
The WCAG accessibility guidelines ask for at least 4.5:1 between normal text and its background, and 3:1 for large text (about 24px, or 19px bold). The stricter AAA level asks for 7:1 for normal text.
Is that the same as my monitor's contrast ratio?
No. The WCAG ratio is calculated from two colors and is the same on every screen. A monitor contrast ratio, such as 1000:1, describes how dark its black is compared with its white. A good monitor makes low-contrast text easier to read, but it does not change the WCAG result.
What is the difference between static and dynamic contrast?
Static contrast is measured with black and white on screen at the same time, and is the number that matters. Dynamic contrast compares a fully dark scene with a fully bright one after the monitor adjusts its backlight, which produces very large marketing figures that you never see in practice.
Can I check my own text and background colors?
Yes. Use the custom pair mode, enter the hex codes for your text and background, and the tool shows the contrast ratio and whether it passes AA and AAA.
How accurate is the color blindness simulation?
It approximates how protanopia, deuteranopia, tritanopia and achromatopsia change colors, which is enough to spot text or charts that rely on color alone. Real color vision varies from person to person, so treat it as a check, not a guarantee.
Why does text look fuzzy even with good contrast?
Fuzzy text usually comes from running the monitor below its native resolution, from display scaling in older apps, or from font smoothing settings such as ClearType on Windows. Set the native resolution first and run the ClearType tuner if text still looks soft.
Written by R. Ottens, front-end developer & image editing specialist.