Use the tool
Showing December 25 as an example. Choose a date to see another.
Paper Snowfall · #EDF2F6
| Pairing | Ratio | Grade |
|---|---|---|
| Dark ink on the color | 16.61:1 | AAA |
| Cream ink on the color | 1.13:1 | Fails AA |
| The color as text on its lightest tint | 1.09:1 | Fails AA |
| Deepest shade as text on the lightest tint | 6.28:1 | AA |
Ratios use the WCAG 2.1 relative-luminance formula. "AA" is 4.5:1 for body text and 3:1 for large text; "AAA" is 7:1. The tint row is allowed to fail: a pale color used as text on its own lightest tint genuinely is unreadable.
Contrast is arithmetic, not taste
WCAG 2.1 defines contrast as the ratio of relative luminance between two colors, from 1:1 for identical colors to 21:1 for black on white. The formula is specified: convert each channel to linear light, weight the channels, add 0.05 to each luminance, and divide the lighter by the darker. Every ratio on this site is computed that way from the hex values, not estimated by eye.
The thresholds are equally specific. Normal body text needs 4.5:1 for AA. Large text - 18pt, or 14pt bold, roughly 24px or 18.66px bold - needs 3:1. Interface components and graphical objects need 3:1 against their adjacent colors. AAA raises body text to 7:1 and large text to 4.5:1.
Why a pale color is the hard case
Dark colors usually accept light text and light colors usually accept dark text, but the middle of the palette is where both choices can fail. A mid-tone can sit close to 4:1 against both the site's dark ink and its cream ink, leaving no compliant option at small sizes. The site's own day pages hit this: four of the 366 colors needed the page's tinted wash reduced so the headline could stay readable.
The honest fix is not to push the text further from the color until it is technically compliant but no longer the color's own ink. It is to change the role: use the color as a border, a rule, a dot or a large heading, and put the small text on a paper surface. The color stays present; the text gets a background it can survive on.
The contrast tool
Enter a date and the tool renders four measured pairings from that date's palette: dark ink on the color, cream ink on the color, the color as text on its lightest tint, and the deepest shade on the lightest tint. Each row prints the ratio and the WCAG grade it earns - AAA, AA, large text only, or fail.
The tint row is deliberately allowed to fail. A pale date used as text on its own lightest tint genuinely is unreadable, and a tool that hid that would be teaching the wrong lesson. The row exists so the failure is visible before it reaches a slide, a sign or a printed card.
Do not encode meaning in color alone
Roughly one in twelve men and one in two hundred women has some form of color vision deficiency, according to NHS figures. Red and green are the most commonly confused pair, which is exactly the pair a party sign or a status badge tends to use. A guest who cannot separate two swatches should still be able to read which is which.
The fix is redundancy: a label, a pattern, a position, an icon. "Gifts" in green and "Cards" in red is one cue; "Gifts" with a box icon and "Cards" with an envelope is two. The second version works for everyone, including the reader standing in bad light.
Applying it to real artifacts
For a sign, use large type and the ink that clears 3:1 at the size you set; if you want body-size text, aim for 4.5:1. For a slide, the same rules apply, and projectors reduce contrast further, so leave margin. For a printed card, paper and ink behave differently from a screen, but the ratio you computed is still the best available starting point - then check a proof.
For a website, measure the final composite, not the intended color. A background image, a translucent panel or a gradient changes the surface under the text. The site's own palette measures the wash it paints over the page for exactly this reason: the color behind the headline is not the paper color.
A short checklist
Name the text size and weight first, because the threshold depends on them. Pick the pairing, compute the ratio, and only then judge the look. If it fails, change the role of the color before changing the color itself: a border or a large block can carry a color that small text cannot.
Then test with a real reader, or at least with a simulation. The tool's numbers are necessary, not sufficient; the point of the ratio is to remove the guesswork, not to replace judgment.
States, focus and icons
Contrast is not only text on a background. WCAG 2.1's non-text contrast criterion asks for 3:1 between an interface component's visual boundary and its adjacent colors, and between a graphical object and its surroundings. A focus ring, a checkbox border, a chart line and an icon that carries meaning all fall under it. A birthday-color button whose fill matches the page background can pass a text test and still be invisible as a control.
Focus is the state most often forgotten. A link that changes color on hover but has no visible focus indicator is unusable by keyboard. Test by pressing Tab through the page: every interactive element should show where the focus is, and the indicator should clear 3:1 against both the control and the page. Do not remove the browser's outline unless you replace it with something at least as visible.
To test without trusting your eyes, compute the ratio for the exact colors and sizes you ship, then check the page at 200% zoom. WCAG's resize-text criterion asks that content remain usable when text is enlarged to 200% without assistive technology; a layout that clips a heading at that zoom has a problem no color choice can fix. Simulation tools are useful for spotting a likely failure, but they are approximations of specific deficiencies, not a substitute for a readable label.
Questions
What contrast ratio do I need for normal text?
4.5:1 for WCAG AA, and 7:1 for AAA. Large text - 18pt, or 14pt bold - needs 3:1 for AA and 4.5:1 for AAA.
Can I use a pale birthday color behind text?
Often not at small sizes. The tool measures both inks against the color; if neither clears 4.5:1, use the color as a border or a large heading and put the text on a paper surface.
Does a color name make a color accessible?
No. A name is a label for people who can see the color, and it does not help someone who cannot distinguish it. Pair color with text, a pattern or an icon.