Color Contrast Checker

AA is the level almost everything in practice points at — procurement questionnaires, public sector rules in the UK and EU, and most internal design standards all name it, and 4.5:1 for body text is the part of it people quote at each other. AAA sits above that as an enhanced level, and WCAG does not expect a whole site to meet it. It earns its place for long-form reading, sustained data entry, and products used by an older audience, since contrast sensitivity declines with age. Applied everywhere it tends to flatten a palette towards near-black on white, which is why most teams hold AA as the rule and reach for AAA on the screens where reading really matters.

Because the ratio is a luminance calculation and legibility is not. It takes no account of stroke weight, so a hairline 300 and a medium 500 in the same colour score identically while only one of them survives a laptop screen in daylight. It ignores letter-spacing, line length and any texture behind the text. Two colours of similar lightness but opposing hue can clear the threshold and still vibrate unpleasantly against each other. Very high contrast brings its own trouble: pure black on pure white produces enough glare for some readers that near-black on an off-white ground is the more comfortable choice, even though the number goes down when you make that swap.

Change lightness and keep the hue. Most brand colours fail as body text on white because they were chosen for a logo, where nothing has to be read at 14 pixels — so the usual fix is to add a darker step to the palette and reserve the original for surfaces, large headings and icons. Reversing the pair is often easier than darkening: white on the brand colour clears the bar in plenty of cases where the brand colour on white cannot. Yellows, limes and light cyans are the stubborn ones. Their luminance sits close to white whatever you do to saturation, so they work as backgrounds and almost never as text on a light page.

Flatten it to a single pair before testing. For semi-transparent text, composite each channel — the result is alpha times the text channel plus one minus alpha times the background channel — then convert the three numbers back to hex, since only opaque hex is read here and translucency has to be resolved by you. For a photograph or a gradient there is no single background, so test the worst case: the lightest pixel under dark text, the darkest under light text. Where the image is uploaded by someone else through a CMS, no fixed pair is safe, and the durable fix is a solid or gradient scrim behind the text so the colour beneath it is one you control.

Meaningful non-text things do: the glyph of an icon that carries information, the border of a text input, a focus ring, chart segments that have to be told apart. Logos and brand names are exempt, which is why a wordmark in a pale tint is not a violation even when it is hard to read. Inactive controls are exempt too, though a disabled button nobody can decipher still generates support tickets. Purely decorative graphics fall outside it entirely. Since only one pair is reported at a time, an icon is checked exactly the way text is: the colour of the glyph against the colour of the surface behind it.

Yes, and not because the arithmetic changes — reversing a pair leaves the figure identical — but because the palettes do. A dark theme is rarely a straight inversion: a grey ramp spaced to look right on white tends to bunch up against a near-black surface, so the muted greys that passed in the light theme are the first things to fail in the dark one. Perception shifts as well. Light text on a dark ground blooms slightly, which is why designers often pull white back to a light grey and black up to a dark grey rather than running both extremes. The WCAG 2 formula is weakest at the dark end, so treat a marginal dark pass as marginal.

No. The calculation reduces each colour to a single luminance figure and discards hue completely, so two colours can score identically against white and be impossible to tell apart from one another. That is a separate requirement: information must never be carried by colour alone. In practice it means underlining links inside body copy, pairing a status colour with an icon or a word, labelling chart series directly instead of relying on a key, and marking an invalid field with a message rather than a red border. Viewing the screen in greyscale for a minute finds most of these problems, and no contrast figure ever will.

Nothing leaves your browser. The two hex values sit in the component's own state, the luminance and the ratio are worked out in the page, and no request carries a colour anywhere — which is the point when the palette you are testing belongs to a rebrand nobody has announced. Nothing is stored either: no account, no history, and nothing written to the address bar, so a result cannot be handed to a colleague as a link, and a reload puts the fields back to the dark indigo on white they start from. If the outcome needs to be on record, screenshot the badges or write the pair and the figure straight into the ticket.