Contrast Checker — Make Text Easier to Read
Compare text and background colors and see their accessibility result instantly.
WCAG Contrast Checker
Ensure your text is accessible and legible for all users. Meets WCAG 2.1 guidelines.
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 with the color controls or enter exact hexadecimal values. The live preview shows the combination in context, and the copy buttons make it easy to reuse the selected values in a design tool. If a combination fails, adjust one color until the ratio and badges reach the level your project needs.
- Live contrast-ratio calculation
- WCAG AA and AAA indicators
- Normal and large-text thresholds
- Editable and copyable HEX colors