Learn Color Theory
Master color with interactive guides.
What Is Contrast?
How color luminance differences affect readability and accessibility
Contrast ratio measures the luminance difference between foreground and background colors. A ratio of 1:1 means no contrast (same color); 21:1 is the maximum (black on white). The higher the ratio, the easier text is to read against its background, especially for users with low vision or in challenging lighting conditions.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with low vision. Meeting these thresholds is a legal requirement in many jurisdictions and is essential for inclusive design. Two compliance levels are commonly referenced: AA (the baseline) and AAA (enhanced).
WCAG 2.1 Success Criterion 1.4.3
These minimum contrast ratios apply to text and images of text. The criterion ensures that foreground content is distinguishable from its background for users with moderately low vision who do not use contrast-enhancing assistive technology. Decorative text and logotypes are exempt.
Live Contrast Checker
Try different foreground and background combinations to see the contrast ratio in real time
Heading Text
Body text looks like this at normal size. It should be comfortable to read without straining.
Small caption text
Font Size & WCAG Thresholds
How text size affects the minimum contrast ratio required by WCAG
Large Text Exception
WCAG allows a lower 3:1 contrast ratio for large text, defined as text that is at least 18pt (24px) or 14pt bold (approximately 18.66px bold). This exception reflects the fact that larger characters have wider strokes, making them inherently easier to read at lower contrast levels. PerfectPalette applies this threshold when evaluating your palette pairings.
Palette Contrast Matrix
See the contrast ratio for every foreground/background pairing at a glance
#1A1A1A | #FFFFFF | #2563EB | #DC2626 | #16A34A | |
|---|---|---|---|---|---|
| — | 17.4 | 3.4 | 3.6 | 5.3 | |
| 17.4 | — | 5.2 | 4.8 | 3.3 | |
| 3.4 | 5.2 | — | 1.1 | 1.6 | |
| 3.6 | 4.8 | 1.1 | — | 1.5 | |
| 5.3 | 3.3 | 1.6 | 1.5 | — |
Lightness Ramp Explorer
See how adjusting lightness changes contrast — the most effective fix for contrast failures
Preview text at adjusted lightness
Lightness is the primary lever
When fixing contrast failures, adjusting lightness is the most effective approach because contrast ratio is determined by relative luminance, which is primarily driven by lightness. PerfectPalette's contrast fixer preserves your color's hue and saturation while nudging lightness just enough to meet the target ratio. This means your brand colors stay recognizable even after an accessibility fix.