Contrast Checker — Make Text Easier to Read
Compare text and background colors and see their accessibility result instantly.
Use this when you need to
- Verify text and background color pairs
- Sample colors from a local image
- Find a nearby color that passes WCAG
What it does not replace
A passing ratio does not guarantee readability or test color-dependent meaning. Font size, weight, motion, imagery and context still require human review.
Three simple steps
WCAG Contrast Checker
Choose a text color and its background, then read the Pass/Fail results. Enter HEX values manually, use the color controls, or sample both colors directly from an image.
3. Contrast result
Normal body text needs at least 4.5:1. Large text means at least 24px regular or about 18.7px bold.
Pass · AA · Normal text
Requires 4.5:1
Pass · AA · Large text
Requires 3:1
Pass · AAA · Normal text
Requires 7:1
Pass · AAA · Large text
Requires 4.5:1
Large headline preview
Normal text preview. Use this area to judge readability in addition to the numerical WCAG result.
Bold supporting text preview
Sample colors from an image
Upload a screenshot or thumbnail, select what you want to sample, then click the exact text or background pixel. For textured areas, try several nearby pixels and use the lowest contrast result.
No image selected
Manual color checking above is ready to use.
Understand and Improve Color Contrast
Contrast describes how clearly foreground text stands out from its background. Strong contrast helps people read in bright environments, on lower-quality displays and when they have reduced vision. It also makes headlines and labels easier to scan at small sizes.
WCAG uses a numerical contrast ratio from 1:1 to 21:1. For regular text, level AA requires at least 4.5:1 and level AAA requires 7:1. Large text has a lower AA threshold of 3:1. Display Lab calculates the ratio from the relative luminance of the two selected colors and shows the relevant pass or fail badges.
Choose colors manually, enter exact hexadecimal values, or upload an image and sample the text and background pixels with the built-in picker. The image stays in your browser. Display Lab shows normal- and large-text results, suggests nearby passing colors, supports Before/After inspection, and includes a movable Help window for a repeatable checking workflow.
- Live contrast-ratio calculation
- WCAG AA and AAA indicators
- Normal and large-text thresholds
- Editable and copyable HEX colors
- Local image sampling and passing-color suggestions
Learn the reasoning