Applicable relationships meeting their unrounded minimum.
All tools
WCAG 2.2 / EMAIL PALETTES / LIGHT + DARKMeasure the pair.
Measure the pair.
Audit the system.
Test every meaningful color relationship in an email—not only one headline swatch—and keep exact evidence for text, links, controls, and graphics.
- Unrounded ratios
- Alpha compositing
- Batch evidence
CONTRAST RATIO12.33:1
NORMAL TEXT
The selected minimum is met.
The full ratio is 12.334402:1 and is compared without rounding. Continue with rendered-client and context checks.
Minimum4.5:1Normal text
Invalid inputs are counted separately.
Text pairs meeting WCAG enhanced contrast.
Pairs calculated after sRGB compositing.
Rendered relationship preview
Solid sRGB approximationNorthwind NotesISSUE 24
A practical field note
Build for the moment after “send.”
Email quality lives in the details people can perceive. This preview preserves the selected source relationship on a solid background.
Selected-pair evidence
Thresholds are not rounded112.334402:1 meets the unrounded 4.5:1 minimum for Normal text.
212.334402:1 meets the 7:1 enhanced text threshold.
Repair candidate
Foreground-only line adjustmentNo minimum repair needed.
Review the evidence and surrounding visual context.
Complete palette ledger
9 relationshipsRelationshipRoleRatioMinimumResult
DESIGN QA HANDOFF
Keep the values, roles, thresholds, and limitations together.
Exports preserve exact unrounded ratios, effective composite colors, link distinction evidence, repair candidates, notes, and exceptions. No recipient or message data leaves the browser.
Read the full agent guideMETHOD, NOT MAGIC
One ratio answers one relationship.
An email palette passes only when every required relationship is identified and tested in context: text over its actual background, button label over fill, meaningful boundary against adjacent canvas, icon against its field, and authored dark-mode values as a separate state.
The ratio does not assess font rendering, thin strokes, background images, gradients, client color transformations, color-only meaning, keyboard behavior, semantic HTML, or whether an image has useful alternative text.
- 01Inventory
Record every meaningful foreground/background pair and state.
- 02Classify
Assign text, link, component, graphic, or genuine exception.
- 03Composite
Resolve alpha against the actual solid background before luminance.
- 04Test
Use source colors and unrounded WCAG ratios at the applicable threshold.
- 05Render
Inspect real clients, images, dark mode, forced colors, and zoom manually.
OPERATOR QUESTIONS
What the number means.
WCAG contrast is precise, but the scope decision—what is text, large, meaningful, adjacent, or exempt—still needs human judgment.
What counts as large text?+
WCAG defines large-scale text as at least 18 point regular or 14 point bold. At the CSS reference conversion of 1 point to 1.333 pixels, this tool uses 24px regular or approximately 18.67px at weight 700 or above.
Why can 2.999:1 fail when the card displays 3.00?+
WCAG thresholds must not be rounded up. The interface displays two decimals for readability but compares the full calculated value.
Do button backgrounds always need 3:1?+
The visual information required to identify a component and its state needs 3:1 against adjacent colors. A button can sometimes be identified through text, position, or context without a contrasting boundary, so classify the exact visual cue rather than every fill automatically.
Is an accessible link color enough?+
Link text must meet its text contrast threshold against the background. If color alone distinguishes an inline link, it also needs sufficient distinction from surrounding text and an additional cue; visible underlining is the more robust email choice.
Can this test text over a photograph or gradient?+
Not from two color values. Sample the least-contrasting area behind the full rendered text or provide a solid protective layer. Client cropping, loading, and dark-mode transformations require rendered testing.
Does passing WCAG guarantee readable email?+
No. Thin type, font substitution, anti-aliasing, small sizes, line length, hierarchy, motion, zoom, client transformations, and user settings all affect readability.