The WCAG Color Contrast Checker is a two-box tool. The page holds a foreground color field and a background color field, each with a color picker and a text box, and below them the results: a live preview, the contrast ratio and a grid of four pass and fail cards. There is no run button and nothing to configure; change either color and every number updates on the same keystroke. Nothing is sent anywhere: the luminance math runs in the browser on the device.
The two color inputs and the live preview
The foreground is the text color and the background is what sits behind it, and the defaults are black on white, #000000 over #FFFFFF. Each field accepts a three-digit hex like #F00 or a six-digit hex like #767676, and the leading hash is optional, so 000000 parses the same as #000000. A color picker next to each box fills the text box for you. As soon as both colors are valid the results area appears: a preview that renders sample text in the chosen pair at three sizes, the ratio, and the four WCAG cards. If one field holds something that is not a three- or six-digit hex, the whole results area disappears rather than showing a guess.
How the contrast ratio is computed
The tool follows the standard WCAG formula. Each hex color is converted to red, green and blue values from 0 to 255, each channel is linearized from the sRGB curve, and the three channels are weighted into a relative luminance with the coefficients 0.2126 for red, 0.7152 for green and 0.0722 for blue. The ratio is then the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, which is why it is always at least 1 and can never exceed 21, the gap between pure black and pure white. The number is shown to two decimal places, followed by a colon and a one, so black on white reads 21.00:1 and a color over itself reads 1.00:1. The ratio does not depend on which color is called foreground: swapping the two boxes gives the same number.
The four fixed thresholds and their boundary values
Four cards judge the ratio against four fixed minimums: AA for normal text at 4.5:1, AA for large text at 3:1, AAA for normal text at 7:1, and AAA for large text at 4.5:1, and each card shows its minimum under the verdict. The boundaries are inclusive, a ratio that lands exactly on the minimum passes. The values you will meet in practice: #767676 on white is 4.54:1 and passes AA normal, while #777777 on white lands at 4.48:1 and fails, one hex step on the other side of the line. #808080 on white is 3.95:1, large text only, and #595959 on white is 7.00:1, which passes all four cards including AAA normal.
What large text means for the 3:1 and 4.5:1 cards
Large text in the WCAG sense is at least 18 point regular or 14 point bold, which is roughly 24px regular or 19px bold. The tool does not measure font sizes and has no input for them; it always computes all four verdicts, so reading the result is a two-step act. First look at the four cards, then decide which of your real text sizes the design uses: if the text is large, the 3:1 and 4.5:1 large-text cards are the ones that apply, and if it is normal size, the 4.5:1 and 7:1 normal-text cards are. A ratio of 4:1, for example, passes the AA large-text card, fails the AA normal-text card, and fails both AAA cards.
Edge cases: invalid hex and identical colors
The parser only accepts three- or six-digit hex after stripping one leading hash, so anything else hides the results: five digits, eight digits with an alpha channel, and non-hex letters all leave the page showing just the two input boxes. An identical foreground and background gives 1.00:1 and fails all four cards, which is the honest verdict for text that is the same color as its background. Uppercase and lowercase hex are treated the same, and the three-digit shorthand expands each digit, so #F00 is #FF0000. There is no validation message in the results area; the hiding is the only signal, which is worth knowing when you wonder where the cards went.
Client-side only, nothing stored
The two hex values never leave the browser. There is no submit, no history, no saved pairs and no copy button; the computation is a pure function of the two current inputs, and reloading the page returns the defaults of black on white. There is also no swap control between the two fields, so to invert a pair you retype the two values, and no suggestion engine tells you the nearest passing color: the tool reports the ratio and the four verdicts, and the adjusting is yours.
What the tool keeps, and where to go next
Nothing is kept: no network request is made, nothing is stored, and reloading resets the fields to #000000 and #FFFFFF. For the rest of the color and CSS workflow, the Color Converter moves a hex value between HEX, RGB and HSL, the CSS Units Converter converts between px, rem, em and pt so you can check your font sizes against the large-text line, and the CSS Formatter tidies the stylesheet that carries these colors. For a broader look at the markup side of the same page, see the HTML formatting guide.