What the contrast ratio means
Contrast ratio compares the relative brightness of two colours, from 1:1 (identical) to 21:1 (black on white). It's the measure used by the Web Content Accessibility Guidelines (WCAG), the standard behind accessibility law in many countries. Low contrast doesn't only affect people with low vision — it's what makes text hard to read on a phone in sunlight, on a cheap projector or on a dimmed screen.
AA vs AAA, normal vs large text
WCAG AA is the level most websites and apps aim for: at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal text and 4.5:1 for large text. “Large” means at least 24 px regular or about 18.7 px bold — big text stays readable at lower contrast because the letter shapes are bigger. Icons, input borders and other interface elements need at least 3:1.
Fixing a failing pair
The quickest fix is to keep the hue and change the lightness: darken the text or lighten the background until the ratio passes. The suggestion in this tool does exactly that — it searches for the nearest shade of your text colour that meets AA, so your brand colour stays recognisable. Grey text on a coloured background is the most common failure; try a darker tint of the background colour instead of grey.