Embed the contrast checker

Drop a working WCAG contrast checker into any page with one iframe. No account, no tracking cookies, no ads, no build step — it is a static page that runs the contrast math in the visitor's browser.

Live preview

The embed code

<iframe src="https://hexcolorpro.pages.dev/embed/contrast-checker"
        title="WCAG contrast checker" width="100%" height="300"
        style="border:0;max-width:420px" loading="lazy"></iframe>
<p style="font:13px/1.5 system-ui;color:#6b7280">
  Contrast checker by <a href="https://hexcolorpro.pages.dev/contrast-checker">HexColor Pro</a>
</p>

Copy embed code

How to use it

• Paste the snippet into a blog post, a design-system doc, or an accessibility checklist page.
• The widget is 420px wide at most and 300px tall; it scales down on mobile.
• Results update as the visitor types or picks a color — nothing is sent to a server.
• Keep the attribution line: it is the only condition for using the embed.

What it checks

The widget computes the WCAG 2.2 contrast ratio with the relative-luminance formula and reports the three thresholds that matter in practice: AA normal text (4.5:1), AA large text (3:1), and AAA normal text (7:1). For the full tool — with suggestions that reach a target ratio and a UI-component check — use the contrast checker.