Contrast embed A contrast checker for your own page, in one iframe

• A page where you can paste HTML: a site you build, a CMS that accepts an iframe, or a course page.
• Nothing to install, no account and no key.

1. 01

   Copy the iframe

   Paste it where the checker should appear. The title names the frame for screen readers: keep it, in your page’s language.

   The iframe

   <iframe src="https://auricartisan.com/embed/contrast/" title="Contrast checker" width="420" height="620" style="max-width:100%;border:0" loading="lazy"></iframe>

2. 02

   Choose the colors, the theme and the language

   Add any of the options below to the address. Without them it starts with grey on white, follows the reader’s light or dark setting, and speaks English.

   The options the address takes

   Option	Values	Without it
   fg	The text color: three or six hex digits, without the # (in an address, # starts a fragment)	8A8A8A
   bg	The background color, the same way	FFFFFF
   theme	light or dark	The reader’s system setting
   lang	hi for Hindi	English
   credit	0 hides the credit link	Shown

   An address with options

   https://auricartisan.com/embed/contrast/?fg=1F2937&bg=FFFFFF&theme=dark&lang=hi

3. 03

   Give it room

   The checker does not resize its frame. On the check its content was 601 pixels tall at 420 pixels wide and 717 at 320, so the iframe above is 620 pixels tall; on a narrow column give it 730. A frame that is too short scrolls inside.

4. 04

   Credit, if you like

   The checker shows a small “Made by Auric Artisan” link, which credit=0 removes. A credit beside the frame is welcome and never required, in any words you like.

   A credit beside it, optional

   <p>Contrast checker from <a href="https://auricartisan.com/integrations/embed/">Auric Artisan</a></p>

How it behaves

• Hex colors only, in three or six digits. Names such as teal and other notations are not read.

• The ratio is WCAG 2’s. APCA is not shown; the full checker on this site has it.
• The suggestion changes the text color, keeping its hue, to reach AA for normal text. Changing the background instead is up to you.
• It does not resize its frame: give it the height above.

• Framing was checked on a local copy of the site, which sends the headers that the live site’s _headers file sets for /embed/.

• Nothing: no cookies, no local storage, no analytics, and no request beyond the files above. The colors stay in the reader’s browser.
• Its pages allow only their own files to run, so nothing else can be injected into the frame on your site.
• Like every page on this site, it is served through Cloudflare, which sees the request for it.

• The full contrast checker, with APCA
• Check pairs from your own code with the API
• How to fix a contrast failure
• The contrast checker, with every option
• Accessible color and WCAG contrast, explained

Other integrations

• Browser extensionCheck and fix contrast on the page in front of you.
• VS CodeUnderline low contrast in your stylesheets and fix it in place.
• REST APIConvert colors and check pairs from a server or a script.
• Design tokensExport one token system to Tailwind, CSS or Figma.
• Tailwind themeStart a Tailwind v4 project with accessible components.
• React tokensTheme a React app from the token export.
• Figma variablesTurn Figma variables into CSS tokens.
• Contrast in CICheck your color pairs on every pull request.