Color Contrast Checker

The WCAG contrast thresholds, exactly

The Web Content Accessibility Guidelines define a minimum contrast ratio for text and for interface elements. Here are the numbers this checker tests against, straight from the W3C guidance:

“Large text” is defined precisely, because bigger type can get away with less contrast: 18 point (about 24 pixels) regular, or 14 point (about 18.66 pixels) bold and larger. Anything smaller is “normal text” and needs the full 4.5:1. The third row is a separate requirement, SC 1.4.11, covering icons, borders, form-field outlines and other non-text elements that carry meaning, and it applies at level AA with a 3:1 minimum.

AA is the level most accessibility laws and procurement policies reference, so it is the baseline to hit. AAA is stricter and intended for content that must be maximally legible, such as long-form reading or government services. Passing AAA for body text is hard with a brand palette, so many teams meet AA everywhere and reserve AAA for the text that matters most.

How the contrast ratio is computed (relative luminance)

The ratio is not a simple difference between two colors. Each one is first converted to a relative luminance, a single number representing how bright it appears to a typical human eye.

The conversion happens in two steps. First each red, green and blue channel (0 to 255) is scaled to 0 to 1 and passed through the inverse of the sRGB gamma curve, which linearizes the value. Then the three linear channels are combined with fixed weights that reflect how sensitive the eye is to each color:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Green dominates because our eyes are most sensitive to it, red is a distant second and blue barely registers. That is why a saturated blue looks darker than a green of the same nominal brightness, and why a yellow background is so hard to put text on.

The ratio itself is then the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. The 0.05 offset stops the formula from dividing by zero and accounts for the ambient light reflected off a screen. The result always lands between 1:1 for two identical colors and 21:1 for pure black on pure white, the maximum possible contrast.

Worked examples: three color pairs, three verdicts

Numbers are easier to trust with examples. Here are four pairings you will see constantly in real designs, checked against white (#ffffff):

Two things stand out. First, #999999, the gray a lot of templates use for “subtle” secondary text, fails even the 4.5:1 bar, at 2.85:1. Second, #767676 is the well-known boundary: it is the darkest-looking gray that just scrapes past AA at 4.54:1. If you want gray body text on white and cannot reach #767676 or darker, you have to drop the contrast requirement and accept a fail. For reference, the default text color of this site's checker, #1f2937, scores 14.68:1 on white. For a second opinion, WebAIM's contrast checker uses the same formula.

Why 4.5:1 and not something simpler

People often ask why the bar is 4.5:1 rather than a round number like double the brightness. The threshold comes from research into how much contrast people need to read comfortably, and it is deliberately set where a large share of users with impaired vision can still read the text.

Contrast sensitivity declines with age and is reduced in many eye conditions, including cataracts and diabetic retinopathy. Around one in twelve men and one in two hundred women have some form of color vision deficiency, which flattens the difference between certain hues. A design that looks crisp to a twenty-five-year-old on a bright monitor can be genuinely hard work for a sixty-year-old reading on a phone in daylight.

The 4.5:1 figure also has a practical margin built in. It is not the exact point at which text becomes unreadable, it is a level at which a broad range of people, on a range of devices and in a range of lighting, can read with reasonable effort. That is why the guideline is a floor for accessibility rather than a target for beauty: if your palette cannot reach it, the palette is the problem, not the guideline.

Large text and bold text: where the 3:1 rule applies

The lower 3:1 threshold for large text is not a loophole, it reflects that big, heavy letters are easier to distinguish at low contrast than small, thin ones. The definition is exact, and it is the part people misread.

WCAG counts text as “large” when it is 18 point or larger, or 14 point or larger when it is bold. In pixels, that is about 24 pixels for regular text and about 18.66 pixels for bold. Point size is measured before any scaling, and 18 point is roughly 24 pixels at the standard 96 pixels per inch. Note that bold only helps when the text is genuinely bold, a semibold weight at 14 point does not automatically qualify.

In practice this means a large hero headline can be a lighter color than the paragraph beneath it and still pass. Many design systems exploit this: a mid-gray headline at 3.2:1 passes as large text, while the same gray in 16-pixel body copy fails AA. Use the large-text column in this checker when the element is big and heavy, and the normal-text column for everything else.

Non-text contrast: icons, borders and focus rings (SC 1.4.11)

Contrast is not only about words. Success Criterion 1.4.11, Non-text Contrast, requires a ratio of at least 3:1 for the visual information needed to identify interface components and understand graphics.

That covers more than people expect:

• The boundary of a text input or button, when the border is what tells you the control exists.
• Icons that carry meaning, such as a search magnifier or a close X, and the shapes inside them.
• Toggle and checkbox states, the difference between checked and unchecked has to be visible.
• Focus indicators, which tell keyboard users where they are.
• Meaningful parts of charts and diagrams, like the lines and bars that distinguish data series.

The 3:1 is measured against the adjacent color, the page background for a border, the fill for an icon on a button. A pale gray input outline on white is the classic failure here: it may look tidy, but at low contrast a user with low vision cannot tell where the field begins. In WCAG 2.2 there are additional focus-appearance requirements, so it is worth checking your focus ring against the background it sits on.

WCAG 2.1 vs 2.2 and what is coming in WCAG 3

WCAG has been revised over time without changing the core contrast formula. Version 2.1 is the edition most laws and audits reference today; version 2.2 adds criteria such as focus appearance but keeps the same 4.5:1, 7:1 and 3:1 thresholds, as you can confirm in the WCAG 2.1 Recommendation. So the numbers this checker reports apply equally to 2.1 and 2.2.

The bigger change is on the horizon. The working draft of WCAG 3 proposes a different contrast method called APCA, the Accessible Perceptual Contrast Algorithm. Where the current formula weights luminance linearly and treats all text sizes the same until the large-text cutoff, APCA is designed to model how people perceive text, factoring in font weight and size directly and producing a different, signed score instead of a simple ratio.

Nothing changes for you yet. WCAG 3 is a draft and the existing ratio thresholds remain the standard that auditors and accessibility laws use. But if you build a design system today, structure your tokens so contrast is easy to tune later: keep text colors in variables, test them against your real backgrounds, and you will be able to migrate to whichever method eventually replaces the ratio.