Practical color guide
Complete guide to color contrast
Learn contrast ratios, WCAG thresholds and readable text-color choices clearly and accurately.
What is color contrast?
Contrast is the perceived luminance difference between two colors. A larger difference usually makes boundaries and text easier to distinguish.
Important thresholds
A 4.5:1 ratio is the baseline for normal text, while large text can pass at 3:1. AAA requires 7:1 for normal text.
How to check
Enter foreground and background colors in the contrast checker, then verify the result with the actual size, weight and viewing conditions.