Use the Color Contrast Checker in three steps
Set the text color
Choose or enter the foreground hex color.
Set the background
Select the color that will sit behind the text.
Review the thresholds
Check normal text, large text, and enhanced contrast results.
Understanding the ratio
Contrast ranges from 1:1 for identical colors to 21:1 for black against white. WCAG AA commonly requires 4.5:1 for normal text and 3:1 for large text.
Contrast is only one accessibility factor
Passing a ratio does not guarantee readability. Font weight, size, spacing, glare, motion, and the surrounding interface also affect how easily people can read content.
Color Contrast Checker FAQ
What ratio passes WCAG AA for normal text?＋
A contrast ratio of at least 4.5:1 is the common AA threshold for normal-sized text.
What counts as large text?＋
WCAG generally treats text as large at 18pt regular or 14pt bold and above.
What ratio passes AAA for normal text?＋
Normal text needs at least 7:1 for the enhanced AAA contrast threshold.
Can I enter three-digit hex colors?＋
Yes. Values such as #fff and #123 are expanded to six-digit hex colors.
Does a pass guarantee the whole design is accessible?＋
No. Contrast is one requirement among many, including semantics, keyboard access, focus visibility, and usable text sizing.
Should disabled controls meet the same threshold?＋
Some WCAG contrast requirements exempt inactive controls, but making disabled states reasonably legible still improves usability.