What the ratio measures
Contrast compares the relative luminance of two colors on a scale from 1:1 for identical colors up to 21:1 for black and white. It describes the difference between foreground and background, not whether two colors are visually fashionable.
The thresholds worth remembering
WCAG 2.x AA expects at least 4.5:1 for normal text and 3:1 for large text. AAA uses 7:1 for normal text and 4.5:1 for large text. Large text means at least 18pt regular or 14pt bold in the WCAG definitions.
Buttons, labels, and real interfaces
Check every text/background combination rather than just your hero heading. Small labels, disabled-looking controls, and secondary navigation are common trouble spots. Components also need accessible interaction states; passing a text contrast test is only one piece of accessibility.
Fix failing contrast carefully
Try darkening foreground text or lightening its background, then test again. Do not always solve a failure by increasing font weight. Use the live checker to confirm the revised color values before exporting tokens.
Before you ship
Compare the colors against the actual design, verify small text and form states with the Contrast Checker, and export named tokens so future edits remain consistent. There is no palette that automatically makes every interface accessible.
Try it with real colors.
Explore a harmonious palette and see what your choices do in an interface.
Open color studio