How to use it
Enter a text color and a background color as hex codes (like #1a2b3c or #abc) or as rgb(26, 43, 60), or use the color pickers. The tool shows the contrast ratio, from 1 : 1 (no contrast) to 21 : 1 (black on white), and checks it against the Web Content Accessibility Guidelines (WCAG). Swap colors turns light-on-dark into dark-on-light. If the pair fails, the closest text color that passes is offered; press it to use it. The ratio is shown rounded down, so a pair that is just below a limit never looks as if it passes.
What the levels mean
Level AA, the usual target for websites, asks for at least 4.5 : 1 for normal text and 3 : 1 for large text (at least 24 px, or 18.66 px if bold) and for icons and input borders. Level AAA is stricter: 7 : 1 for normal text and 4.5 : 1 for large text. Good contrast helps everyone: people with low vision or color blindness, anyone reading in bright sunlight, and anyone on a poor screen. Light grey text on white is the most common failure. For example, #777 on white is 4.47 : 1 and just misses AA, while #767676 passes.
Questions
Does it check transparent or gradient backgrounds? No, only two solid colors. For text on a picture, test against the lightest and darkest parts. Is contrast the only thing that matters? No; thin fonts and small sizes are harder to read at the same ratio, and information should never rely on color alone. Are my colors saved? The last pair is remembered on this device only. To build a set of colors that work together, try the Palette Generator.