Give a foreground and a background colour and see the contrast ratio with the AA and AAA results for normal and large text. The ratio uses the WCAG luminance formula, which linearises each channel before weighting it — a step that is easy to skip and changes the answer enormously. Mid grey on white is 4.48:1 by the real formula and about 2:1 without the correction, which is the difference between a borderline pass and a clear fail.
This page loads no libraries at all — the work is done by the browser itself. Your file is read on your own machine and never sent anywhere — open your browser's network tab and watch while you use it.
Because sRGB values are not proportional to light. The stored value is gamma-encoded, so 128 is not half as bright as 255, and the channels have to be linearised before they can be weighted and added. Skip that step and the numbers still look plausible — mid grey on white comes out around 2:1 instead of 4.48:1 — so a page that fails can be recorded as passing.
AA asks for 4.5:1 for normal text and 3:1 for large text; AAA asks for 7:1 and 4.5:1. Large means 24px regular or 18.66px bold and above. All four are shown at once so you can see how much room you have rather than just whether you scraped through.
No. The ratio is defined with the lighter colour on top regardless of which you called foreground, so swapping them gives the same number. What does change is which one you should adjust.
It means it meets a measurable minimum. Contrast is one part of legibility; typeface, weight, size, line length and the surrounding colours all matter and none of them is in the ratio. A page can pass at 4.5:1 and still be hard work.
Everything here is free and works the same way — in your browser.