A contrast ratio analyser, also called a colour contrast checker, is a tool that measures the contrast between two colours, such as text and its background, and reports whether it meets accessibility guidelines like WCAG.
Why it matters: Low contrast affects far more people than those with colour blindness, including people with poor vision and dyslexia. It's one of the most common accessibility failures, and one of the easiest to measure.
In practice: Testers pick the two colours, either from the code or from a screenshot, and the tool returns a ratio to compare against the WCAG thresholds. Checking colours from a screenshot of the real screen matters, because what is programmed is not always what users see. On mobile, that means taking a screenshot on the device and checking it on a desktop.
Examples:
- Taking a phone screenshot, picking the text and background colours, and checking them with an analyser.
- Checking grey text on a darker grey background that looks fine to the designer but fails the ratio.
Common pitfalls:
- Checking only design files or code values, not the colours actually rendered.
- Forgetting text over images and gradients, where contrast changes across the area.
What contrast ratio does WCAG require? At level AA, normal text needs a ratio of at least 4.5:1 against its background, and large text at least 3:1.
