Choose readable black or white text for each palette color.

Every ColorQuarry swatch includes contrast ratios against black and white plus a deterministic recommendation for the stronger text color.

Open ColorQuarryGuidance for one swatch at a time.

What the contrast check answers

For each extracted background color, the engine calculates relative luminance and compares the contrast of black text and white text. The higher-contrast choice becomes the recommended text color and remains attached to that palette entry in the result and JSON export.

#475569White text7.58:1
#22C55EBlack text9.22:1

Use the recommendation as a starting point

The result narrows a common design decision, but the final interface still needs contextual review.

  1. Check the swatch.Start with the recommended black or white foreground.
  2. Test the actual component.Account for text size, weight, states, borders, icons, and surrounding colors.
  3. Validate the full experience.Keyboard use, semantics, motion, focus, and content remain separate accessibility concerns.

Guidance is not certification

ColorQuarry evaluates only black and white text against each solid extracted color. It does not certify a palette, page, product, or organization as WCAG conformant, and it does not evaluate every possible foreground/background pairing or non-color accessibility requirement.

Extract colors with text guidance included.

Open ColorQuarry