Color Contrast Checker
Compare text and background colors, calculate the contrast ratio, and check whether the combination meets common WCAG AA and AAA accessibility thresholds for normal and large text.
Check Color Contrast
Compare foreground and background colors and review WCAG contrast results.
Higher contrast generally improves text readability. The maximum possible ratio is 21:1.
Live Preview
Preview typical text and interface elements with your selected colors.
This is an example of normal body text. Use the preview to check whether your foreground and background colors remain comfortable to read across a longer paragraph.
This is larger and heavier text that may have a different WCAG threshold from standard body text.
Instant Contrast Ratio
See the contrast ratio between foreground and background colors immediately as you adjust either color.
WCAG AA & AAA Checks
Check normal and large text against widely used accessibility thresholds to help improve readability.
Live Text Preview
Preview headings, body text and buttons using your selected colors before applying them to a website or dashboard.
How to Use the Color Contrast Checker
- Choose or enter the foreground text color.
- Choose or enter the background color.
- Review the calculated contrast ratio.
- Check the WCAG AA and AAA results for normal and large text.
- Use the live preview to confirm the combination is comfortable to read.
Common Uses & Real-Life Examples
Website text readability
A developer can test body text against a page background before publishing a website.
Dashboard labels and KPI cards
Analysts can check whether labels, values and headings remain readable on colored dashboard cards.
Button and interface colors
Product designers can test button text against brand colors and interface backgrounds.
Reports and presentations
Report authors can verify that headings and labels remain legible when placed over colored shapes or backgrounds.
WCAG Contrast Thresholds Used
This tool checks common WCAG contrast thresholds: AA normal text at 4.5:1, AA large text at 3:1, AAA normal text at 7:1, and AAA large text at 4.5:1. Contrast is one part of accessible visual design and should be considered alongside font size, weight, spacing and other usability factors.