A color contrast checker measures how readable text is against its background using the official WCAG luminance formula. You give it two colors — typically a foreground text color and a background — and it returns a numeric contrast ratio on a fixed scale that runs from 1:1 (the same color used twice) up to 21:1 (pure black on pure white). That single number tells you whether the pair clears the Level AA thresholds of 4.5:1 for normal text and 3:1 for large text, the stricter Level AAA thresholds of 7:1 and 4.5:1, and the 3:1 minimum for UI components and graphical objects. Because the math is standardized in the Web Content Accessibility Guidelines, the result is the same number an accessibility auditor would calculate by hand. For beginners, that means you do not need to learn color theory first — you enter two colors, read the ratio, and adjust until the right pass marks light up.
What "contrast" actually means on a screen
Contrast on a screen is not the same as contrast in a painting. It is a precise, measurable relationship between two colors based on how much light each one emits, a property the W3C calls "relative luminance." Two colors can look very different to the eye — say, deep red and bright green — yet have almost the same luminance and therefore a poor contrast ratio. Conversely, two near-identical shades can score a passing ratio simply because one is meaningfully darker than the other. The WCAG formula converts each color channel from its sRGB value into linear light, multiplies red by 0.2126, green by 0.7152, and blue by 0.0722, then combines them into a single luminance number, as defined in the W3C WCAG 2.1 contrast minimum guidance. The ratio between the two colors is (lighter + 0.05) divided by (darker + 0.05). That is the only number you need to judge readability, and it is the only number the checker reports.
Why contrast matters beyond aesthetics
Poor contrast is one of the top reasons websites fail accessibility audits, and one of the easiest problems to fix. Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and millions more readers have low vision, cataracts, glare from a cheap screen, or simply a bright sunny day behind their phone. Body copy, button labels, and error messages that look fine to a fully sighted designer in a dim office can become invisible to those readers. The cost of contrast extends into the legal realm too: the Americans with Disabilities Act is routinely applied to U.S. websites, Section 508 mandates it for federal agencies, and the European standard EN 301 549 references WCAG directly for public-sector sites. Even where regulation is silent, contrast is a low-effort win — a few minutes with a checker usually repairs years of design drift and benefits every reader, not only those with diagnosed impairments.
The WCAG thresholds in plain language
The guidelines define three conformance levels — A, AA, AAA — but contrast is only measured at AA and AAA. Level AA is the widely accepted baseline; Level AAA is the stricter target for body text where comfortable reading is possible. Beginners should keep the following table handy, since these are the exact numbers every checker compares against:
| Use case | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥18pt or 14pt bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | 3:1 |
The thresholds drop for large text because thicker, bigger letterforms are easier to read at lower contrast. UI components — form field borders, focus rings, icons, graphical buttons — have their own 3:1 rule under the "non-text contrast" guideline. AA is the floor most teams aim for; AAA is worth chasing for body copy whenever the design allows it.
How to check a color pair step by step
The fastest way to learn is to run a real pair through the Color Contrast Checker. The interface is the same whether you are testing brand colors, a CSS variable, or something you just pulled from a palette tool:
- Set the foreground (text) color using the color picker, or type a hex value like #111111 directly into the field.
- Set the background color the same way — for example, #ffffff for plain white.
- Read the contrast ratio displayed, then look at the AA and AAA pass or fail badges for normal text, large text, and UI components.
- Adjust either color and watch the ratio update in real time. Keep tweaking until the badges you care about turn green.
That is the entire workflow. There is nothing to install and nothing is uploaded — the math runs in your browser, which is handy when you are working with unreleased brand palettes or proprietary design tokens.
A worked example: black on white
The simplest pair to verify by hand is pure black on pure white. The luminance of pure white is 1, and the luminance of pure black is 0. Plugging into the WCAG formula:
Ratio = (L1 + 0.05) / (L2 + 0.05) = (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21:1
That is the upper limit of the scale: the highest contrast any color pair can ever reach. It clears AA, AAA, and the 3:1 UI threshold with massive headroom. Most brand colors will not get close to 21:1 — a typical "almost black" like #111111 on white lands in the high teens, comfortably above the 7:1 AAA bar for normal text. Once you start adding color, the ratio drops quickly, which is exactly why the checker exists.
What the ratio does and does not measure
Contrast depends only on the two colors you test, so swapping foreground and background produces the same number — contrast is a property of the pair, not of which one is text. The ratio measures luminance, not hue. Two colors with very different hues but similar brightness, such as red on green or blue on purple, can still fail, and that is also why color alone is discouraged as a way to convey meaning: pair it with a label, icon, or underline. The formula also assumes a flat background, so gradients, semi-transparent overlays, and text sitting on photographs need extra care. Test against the lightest and darkest spots a letter can land on. Placeholder text, disabled-state buttons, and thin decorative fonts are common failure spots worth double-checking. Finally, the checker reports every threshold at once, so beginners do not have to memorize the table — you read the badges, not the formula.
Where beginners tend to get it wrong
Most contrast mistakes come from three habits. First, designing at small sizes: a swatch that looks fine at 12pt can disappear at 9pt, and large-text concessions (3:1) only kick in at 18pt regular or 14pt bold. Second, treating "passing AA" as the goal instead of the floor — comfortable body text reads better at 7:1 or higher, and AAA is achievable more often than designers expect. Third, testing once and forgetting: a token that passes on plain white may fail on a tinted card, a modal overlay, or a dark-mode variant. Build the contrast check into the design system itself rather than relying on a one-off audit at the end of a project, and rerun the check every time a color token changes.
Putting it together
For a beginner, the entire discipline collapses to three habits: pick a foreground and a background, run them through a contrast checker, and adjust until the AA and AAA badges pass at the sizes you actually ship. The math underneath is standardized, the thresholds are public, and the tool does the arithmetic in real time. Once those habits are in place, accessibility stops feeling like a separate checklist and becomes a normal part of choosing colors — the same way you would check spelling or check responsive breakpoints. Use the Color Contrast Checker on every meaningful pairing, and you will catch the failures long before they reach an auditor.
For a deeper look, see Color Difference Calculator for Beginners: HEX to Delta E.