How the WCAG contrast ratio is calculated
The contrast ratio between two colours is defined in WCAG as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker. The range runs from 1:1 for two identical colours to 21:1 for pure black against pure white. Because the formula is symmetric once the lighter colour is identified, swapping foreground and background never changes the number.
Relative luminance is not simply the average of the channels. Each of red, green and blue is first converted from the 0 to 255 range to 0 to 1, then linearised: a channel value at or below 0.03928 is divided by 12.92, and anything above is transformed with ((v + 0.055) / 1.055) raised to the power 2.4. This undoes the sRGB transfer curve so the numbers represent light rather than encoded pixel values.
The linearised channels are then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue, reflecting how much each contributes to perceived brightness. Green dominates, which is why a mid green looks much lighter than a mid blue of the same numeric value, and why blue text on black is far harder to read than the hex codes suggest.
What the AA and AAA thresholds actually require
WCAG 2 success criterion 1.4.3 sets the AA bar: normal text needs at least 4.5:1 and large text at least 3:1. Criterion 1.4.6 sets the stricter AAA bar at 7:1 for normal text and 4.5:1 for large. Criterion 1.4.11 covers non-text content and requires 3:1 for user interface components and meaningful graphics, which is the row this tool labels as UI component.
Large text has a precise definition: at least 18 point, which is usually 24 CSS pixels, or at least 14 point bold, usually about 18.66 CSS pixels. A 20 pixel heading is not large text under this definition and still needs 4.5:1. Getting this wrong is one of the most common sources of a failed audit, because designers tend to treat any heading as large.
The 3:1 UI component threshold applies to things a user has to perceive in order to operate the interface: the border of a text input, the outline of a focus ring, the track and thumb of a toggle, the bars of a chart that carry meaning. It does not apply to purely decorative graphics, to inactive controls, or to a logo, all of which WCAG exempts.
Worked examples with real hex values
The tool's default pair, #1a1a1a on #ffffff, gives about 17.4:1. That passes every threshold with a wide margin and is roughly what a well-set body text page looks like. Pure #000000 on #ffffff gives the maximum 21:1, which many designers avoid because the hard edge can cause visual fatigue on bright screens.
A mid grey such as #767676 on white lands almost exactly on 4.54:1, which is why that value appears so often as the darkest acceptable placeholder or secondary text colour on a white background. Move one step lighter to #8a8a8a and the ratio falls to roughly 3.5:1, which fails AA for normal text while still passing for large text and for UI components.
Colour pairs can also fail in ways that look fine on screen. A saturated #0066cc link on white is about 5.6:1 and passes, while the same blue on a #f0f0f0 panel drops to roughly 5.1:1 and still passes, but #3399ff on white is only about 2.4:1 and fails everywhere despite looking perfectly legible to someone with typical vision on a good display.
What a passing ratio does not guarantee
The WCAG 2 formula takes no account of font weight, font size beyond the large-text cut-off, or the rendering of thin strokes. Hairline weights at small sizes can be genuinely hard to read at 5:1, while a heavy weight is comfortable at 4.5:1. Treat the threshold as a floor rather than a target, and check real text at real sizes.
The formula also ignores hue. Two colours can meet 4.5:1 and still be difficult for someone with a colour vision deficiency to tell apart if the difference between them is carried mainly by hue rather than lightness. This is why WCAG separately requires that colour is never the only means of conveying information, and why status indicators need an icon or a label as well as a colour.
Finally, this tool evaluates opaque hex colours. If your text sits on a semi-transparent overlay, over an image, or over a gradient, the effective background varies from pixel to pixel and you need to test the worst case. Composite the overlay against the darkest and lightest parts of what is behind it and check both results.