How to check your site's color contrast

A TeleportHQ Contrast audit finds text on your live site that is hard to read because its color is too close to the color behind it. In the editor, open Growth → SEO & Performance → Contrast and click Run contrast audit. Each problem shows the current colors next to a suggested fix, and the AI Assistant can apply the fixes for you.

Before you start#

• Plan and role. Contrast audits are part of Growth, which comes with the Trial, Pro and Premium plans. You need the Owner, Admin or Designer role. See What's in the Growth tab?.
• A published site, without a password. The audit reads your live pages. On the TeleportHQ trial, every publish puts your site behind a password, so the contrast audit works once the workspace subscribes and you remove the password. See How to publish your site.
• Limits. You can run 3 contrast audits per day per project, and one per published version. Each audit checks up to 12 pages, starting with your homepage.
• AI tokens. The audit itself uses none. The short summary at the top of the report, and the fixes the AI Assistant applies, use AI tokens.

Why contrast matters#

Low-contrast text is hard to read on phones, in sunlight and for people with low vision. The TeleportHQ contrast audit uses the WCAG accessibility standard (level AA): normal text needs a contrast ratio of at least 4.5:1 with its background, and large or bold text needs 3:1.

Run the audit#

1. In the left sidebar, click Growth.
2. In the Growth panel, click SEO & Performance.
3. In the list on the left, click Contrast. The bar at the top shows your live address and how many contrast audits are left today.
4. Click Run contrast audit. The button changes to Checking…, and Contrast audits shows "Checking your pages…".

5. Wait for the audit to finish. You can open another tab of SEO & Performance in the meantime: the audit keeps running.
6. When it finishes, the Contrast report opens on the right. To open it again later, click the audit in the Contrast audits list.

Read the report#

The TeleportHQ Contrast report starts with a short summary, then Contrast issues, grouped by page. Each issue names the section the text is in and quotes the text. A red or orange dot marks how serious it is, and a number such as ×3 says how many times the same problem appears.

1. The ratio, for example "2.9:1 · needs 4.5:1": the contrast the text has, and the contrast it needs.
2. Current and Suggested: the colors now, and colors that would pass. Sometimes the suggestion changes the background instead of the text.
3. Fix with AI assistant: fixes this one issue.
4. Fix all on this page (N): fixes every issue on that page.

Needs review means the text sits on a picture or a gradient, so there's no single background color to measure. Check those with your own eyes.

Fix the issues#

1. In the Contrast report, choose how much to fix:
   • Fix with AI assistant on one issue,
   • Fix all on this page (N) for one page, or
   • Fix all with AI assistant, at the top of the list, for the whole report.
2. TeleportHQ closes the Growth panel, opens the AI Assistant and sends it the request. A message confirms: "Sent to the AI assistant — it is applying the contrast fixes. Publish your project to update the live site."
3. Check the changes in the editor.
4. Publish your site.

The issues you sent show Fixed in the report. To look at an issue yourself first, click Go to page: the page opens in the editor, with the text selected when TeleportHQ can find it ("Opened the page and highlighted the text to fix.").

Check that it worked#

After publishing, run a new contrast audit. When everything passes, the report says "No contrast issues — your text is readable everywhere we checked."

Troubleshooting#

"You have already run a contrast audit on the current published version. Publish your latest changes to run a new one." Publish your site again, then run a new audit.

"Daily contrast audit limit reached — you can run 3 per day per project. The counter resets at midnight UTC." Wait until midnight UTC and try again.

"Contrast audits cannot run on password-protected sites. Make the site public first: remove the password in the Publish window, which on a trial takes a subscription." On Pro or Premium, click Remove under Password Protection in the Publish window while you run the audit. On the trial, the password can't be removed: the audit works after the workspace subscribes. See How to password-protect your site.

"Your published site could not be reached. Publish the project and try again." Check that your site is online, publish again, and retry.

"A contrast audit is already running — give it a minute and refresh." Someone already started a contrast audit on this project. Wait for it to finish.

"Could not send the fix automatically — it is ready in the AI assistant. Press Enter to send it." The request is typed in the AI Assistant but wasn't sent. Press Enter in the AI Assistant.

"These items need a human review — there is nothing to auto-fix." You picked only Needs review issues. Check them yourself, and change the text color or the picture behind it if the text is hard to read.

"1 page couldn't be checked: /about. Try again in a few minutes." TeleportHQ couldn't load that page this time. The other pages' results are valid. Run a new audit later.

"This contrast audit didn't complete, so there are no results to show. Run a new audit to try again." The audit failed. Run it again later.

Good to know#

• Only the newest report can send fixes. Older reports say "Past audit — run a new audit to fix these with the AI assistant".
• Site Health links here. When a Site Health audit finds a color contrast problem, Open Contrast audit brings you to this tab. See How to check your site's SEO health.
• Fix colors at the source. If many issues share the same color, change that color in your Design Language, so every element that uses it updates at once. See What is the Design Language?.