How to use the contrast checker
- 1Enter or pick the text color and the background color.
- 2Read the contrast ratio and the pass or fail result for each WCAG level.
- 3Check the live preview to see how text and buttons look.
- 4If a check fails, use one of the suggested colors. It keeps your hue and adjusts only the lightness.
What contrast ratio means
Contrast ratio compares the brightness of two colors, from 1:1 (identical) to 21:1 (black on white). It is calculated from each color's relative luminance, using the formula in the Web Content Accessibility Guidelines (WCAG).
WCAG requirements
- AA, normal text: at least 4.5:1. This is the level most laws and accessibility policies refer to.
- AA, large text: at least 3:1. Large means about 24px regular or 19px bold and above.
- AAA, normal text: at least 7:1.
- AAA, large text: at least 4.5:1.
- UI components and icons: at least 3:1 against what surrounds them.
Why it matters
Low contrast is one of the most common accessibility problems on the web. Good contrast helps people with low vision or color blindness, older readers, and anyone using a phone in bright sunlight.
Fixing a failing color
The suggestions keep your text color's hue and step its lightness up or down until it passes, so your design keeps its character. Light grey placeholder text and pale brand colors on white are the usual culprits.
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text to meet WCAG AA, the level most organisations aim for.
Does contrast apply to logos?
No. WCAG exempts logos and brand names, and decorative elements. It does apply to text, icons and form controls.
Why does my color fail even though it looks readable?
Displays and eyesight vary. The ratio is a consistent, measurable standard that accounts for a wide range of viewers and screens.
Last updated