Free Developer Tool
Color Contrast Checker
Calculate the contrast ratio between foreground and background colors.
Foreground text
Background text
Foreground Color
HEX#000000
RGBrgb(0, 0, 0)
HSLhsl(0, 0%, 0% )
Background Color
HEX#FFFFFF
RGBrgb(255, 255, 255)
HSLhsl(0, 0%, 100% )
Contrast Ratio
21.00:1AAA
WCAG Results
Normal Text AAPass
Large Text AAPass
Normal Text AAAPass
Large Text AAAPass
Preview
Normal text — 16px
Large text — 24px
Reversed normal text
Reversed large text
What is Color Contrast Checker?
Check the contrast ratio between foreground and background colors to evaluate text readability and create more accessible color combinations.
How to use
- Choose a foreground color.
- Choose a background color.
- Calculate the contrast ratio.
- Review the contrast result.
Features
- Contrast ratio calculation
- Foreground and background colors
- Readability evaluation
- Accessibility guidance
Common Use Cases
- Web accessibility
- UI design
- Text readability
- Design system testing
Example
Input
Foreground: #FFFFFF Background: #000000
Output
Contrast ratio: 21:1 Result: Excellent contrast
FAQ
What does the contrast ratio measure?
The contrast ratio measures the difference in relative luminance between two colors.
Can it check text and background colors?
Yes.
Is a higher contrast ratio better for readability?
Generally, yes. Higher contrast makes text easier to distinguish from its background.
Missing a feature?
If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.
New improvements and features are added based on user feedback.