Color guide
Color contrast basics
Color contrast compares foreground and background luminance so text, controls, and important visual cues can be seen clearly.
Contrast ratio measures readability risk
A higher contrast ratio means the foreground and background are easier to distinguish. For body text, 4.5:1 is the common WCAG AA threshold and 7:1 is the AAA threshold.
Large text has a lower threshold
Large text can pass AA at 3:1 because bigger letterforms are easier to see. Small body text usually needs stronger contrast.
Do not rely on color alone
Accessible interfaces combine color with labels, icons, focus states, patterns, spacing, and clear copy so meaning is not carried by hue alone.
Try it in Hue Codex
Use the free tools to test the idea immediately: pick a color, convert it, generate harmonies, build tints and shades, check contrast, and export practical CSS or palette data.
Quick answers
Color contrast basics FAQ
What contrast ratio should normal text pass?
Normal text should usually meet at least 4.5:1 for WCAG AA.
Can a brand color fail contrast?
Yes. A color can be on-brand and still fail as text. Use it as a background, accent, border, or pair it with a more readable text color.