How to Check Color Contrast for Readable Text
A color contrast checker answers a narrow question: if you set this foreground on this background, what is the contrast ratio, and does that ratio meet WCAG AA or AAA for normal or large text? Hue Parcel’s laboratory does that in the browser with sRGB relative luminance. It does not audit a website, a logo, or a photograph.
The ratio
Each color is converted from 8-bit sRGB channels to linear light with the standard piecewise function, then combined as 0.2126R + 0.7152G + 0.0722B. Call those luminances L1 and L2. The contrast ratio is (Llighter + 0.05) / (Ldarker + 0.05). Black on white is about 21:1. A color on itself is 1:1. You can confirm both in the contrast checker by entering #000000 on #FFFFFF, then the same HEX twice.
The preview sentence—“The quick brown fox jumps over the lazy dog.”—is shown at normal size and at a larger size so you can see the pair, not only the number. Pass and Fail in the result cells are labeled in text as well as color.
Thresholds
AA normal text: 4.5:1. AA large text: 3:1. AAA normal text: 7:1. AAA large text: 4.5:1. Large text, in WCAG terms, is 18pt regular or 14pt bold, which is not the same as “a heading that looks big on your laptop.” If your type is 16px regular, use the normal-text row even if the mockup heading looks huge.
A pair can pass AA large and fail AA normal. That is common with mid-gray on white. Do not ship that gray as body copy because a poster title passed.
How to use the laboratory
Foreground and background selectors list the current five-color palette so you can test swatch against swatch. HEX fields and native pickers accept custom values. Swap reverses the pair—useful when you are deciding whether navy on cream or cream on navy is the layout. Invalid HEX is rejected with a message instead of a silent no-op.
If you generated a new palette on the homepage, the same localStorage state is available on the contrast page. Changing a swatch in the generator updates what the selectors offer the next time they sync. Still, always re-check the actual pair you will use for paragraphs, not only the accent on the poster block.
What contrast does not prove
Passing 4.5:1 does not mean the page is accessible. Contrast ignores font rendering, letter-spacing, overlapping images, disabled controls, focus rings, and whether information is encoded in color alone. A green Pass label next to a red Fail label is itself a color-only hint; Hue Parcel also writes the words Pass and Fail.
Harmony modes do not feed the checker. Complementary colors can fail as text. Analogous neighbors often fail because their lightness is close. Test the job, not the wheel. The homepage mockups even link back to the laboratory for that reason: a slide title is not a paragraph.
Swap is worth using twice. Navy on cream and cream on navy can both pass and still feel different because the larger area sets the mood. The ratio is the same either way; the layout is not. Choose the direction that matches the work, then confirm the size of the type you will actually set.
Reading a Fail without overcorrecting
A Fail on AA normal means that pair is a poor choice for 16px body copy. It does not mean you must delete the color from the palette. Keep it as an accent, a rule, or a poster field, and pick a darker or lighter partner for paragraphs. Edit the failing swatch’s lightness in the generator, or type a new HEX in the laboratory, then look at the ratio again. Moving L is usually faster than changing hue.
Example: #8EA8C3 on #F1E9DA is two neighbors in the initial palette. They can sit beside each other as surface and paper. They are unlikely to be a comfortable body-text pair. Navy #23395B on that same cream is the more typical type combination from the same five colors. The checker will show you the difference as a number, not as a lecture about the wheel.
If you are choosing a palette first, generate and lock in the color palette generator, pick the darkest and lightest as candidates for text and background, then run those two HEX values here. If they fail, edit lightness rather than hunting a new hue. Contrast is mostly a lightness problem wearing a color costume.