How to check contrast
- Enter the text color and the background color as HEX codes, or use the swatch buttons. In Chrome and Edge, the Eyedropper buttons sample a color straight from your screen.
- Read the ratio. WCAG ratios run from 1:1 (identical colors) to 21:1 (black on white).
- Check the table: each row is a use (normal text, large text, interface parts) and each column a conformance level.
- If the pair fails, click one of the suggested colors. It keeps your text color's hue and chroma and only changes its lightness, just enough to pass.
The preview box shows real text at three sizes, a button and a 3-pixel border in your colors, because a number never tells you how the pair feels.
The WCAG 2.2 thresholds
| Content | Level AA | Level AAA | Success criterion |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 and 1.4.6 |
| Large text: at least 24 px, or 18.66 px bold | 3:1 | 4.5:1 | 1.4.3 and 1.4.6 |
| Icons, input borders, focus rings, chart lines | 3:1 | none | 1.4.11 |
Most laws and policies that reference accessibility, such as the European Accessibility Act and Section 508 in the US, point at level AA. Logos and purely decorative text are exempt.
How the ratio is calculated
Each color is converted to its relative luminance, L, a weighted sum of its linearised red, green and blue channels: L = 0.2126 R + 0.7152 G + 0.0722 B. The weights reflect how sensitive our eyes are to each primary, which is why a pure green looks far brighter than a pure blue.
The ratio is then (L₁ + 0.05) / (L₂ + 0.05), with L₁ the lighter color. The 0.05 accounts for ambient light reflecting off a screen.
Worked example: the famous #767676
On white, #777777 gives 4.48:1 and fails AA for body text by a hair; #767676 gives 4.54:1 and passes. That one-step difference is why #767676 is the usual answer to "what is the lightest gray I can use on white?". HexaCalc truncates ratios to two decimals rather than rounding them, so 4.499 never displays as a misleading 4.50.
Here are some other everyday pairs:
| Pair | Ratio | Result |
|---|---|---|
#57534A on #FAF8F3 (our secondary text) | 7.21:1 | AAA |
White on #B83A12 (our buttons) | 5.75:1 | AA |
White on #D9481C (our brand orange) | 4.29:1 | Large text only |
White on #2563EB (Tailwind blue-600) | 5.16:1 | AA |
#888888 on white | 3.54:1 | Large text and UI only |
What APCA adds
APCA (Accessible Perceptual Contrast Algorithm) is a newer model developed for the draft WCAG 3. It gives a lightness contrast value, Lc, from about −108 to +106. Positive means dark text on a light background; negative means light on dark. APCA treats those two cases differently, which matches how people actually perceive them, and it grades contrast by font size and weight rather than one pass mark.
Rough guidance from the APCA documentation: Lc 90 is preferred for body text, Lc 75 is the minimum for fluent body reading, Lc 60 is fine for larger content text, Lc 45 for headlines and large UI, and Lc 30 for placeholder or disabled text.
APCA is not part of WCAG 2.2, and no law requires it. Use the WCAG ratio to decide pass or fail, and look at APCA as a second opinion, especially for dark mode, where WCAG 2 is known to overrate some light-on-dark pairs.
Checking a whole palette
Open Check a whole palette, paste up to 12 HEX codes and you get a grid of every text and background combination. Bold ratios pass AA for normal text. This is the fastest way to find out which colors in a brand palette can carry text and which are decoration only.
Common fixes
- Gray text on white fails. Darken it to
#767676or below, or switch to a warm dark gray like#57534A. - White text on a brand color fails. Use the darker version for buttons and keep the bright one for large headings or decoration. HexaCalc does exactly this: vermilion
#D9481Cfor display type,#B83A12for buttons. - Placeholder text. Placeholders still count as text. If yours are pale, label inputs with real labels and never rely on the placeholder alone.
- Text on photos. Contrast varies across an image. Add a solid or semi-opaque overlay and test the text against the darkest and lightest areas.
Contrast is one part of accessible color. If you also use color to signal meaning, like red for errors and green for success, check the pair in the color blindness simulator and add an icon or text label.
FAQ
Does WCAG count font weight?
Only at the large-text boundary: bold text of 14 pt (about 18.66 px) counts as large. Otherwise weight is not part of the WCAG 2 formula, although thin fonts genuinely need more contrast. APCA accounts for that.
What contrast ratio do I need for buttons?
The button label must meet the text rule against the button fill (4.5:1 for normal-size labels). The button's edge must reach 3:1 against the page background, unless the label alone makes the button obvious.
Does transparency change the result?
Yes. A semi-transparent color is blended with whatever is behind it. Flatten it first: blend it over its real background and test the resulting solid color.
Why do two checkers give slightly different numbers?
Rounding. Some tools round 4.497 up to 4.50 and call it a pass. We truncate, which is stricter and matches how WCAG says thresholds should be applied.