Skip to main content

Branding Your Portal

Module: ChemIQ For: Admin

Your Public SDS Portal should look like part of your company's web presence, not like a generic safety tool with your products bolted on. The Portal Branding panel lets you customize four things — and stops you from accidentally picking a color that makes your safety information unreadable.

Where to Find It​

  1. Open ChemIQ from the main navigation
  2. Go to Public SDS Portal
  3. Scroll to the Portal Branding panel (it sits alongside Portal Config, Emergency Contact, and Site Posters)

The panel is available on every company with the Public SDS Portal enabled.

The Four Fields​

Logo URL​

A public HTTPS URL pointing to your company logo. The portal fetches the image at render time, so the URL needs to be reachable from the public internet — not from a behind-the-firewall asset server.

  • Format: any image format your browser can render (PNG, JPG, SVG, WebP)
  • Recommended shape: square — the catalog header renders the logo at 48×48 pixels with white padding
  • Where it appears: the catalog header, per-product page header
  • If left blank: a neutral shield icon stands in (the page still works)

A small preview appears inline as soon as you paste a valid URL — if you see a broken image, fix the URL before saving.

Tip: if you already host your logo somewhere (a CMS, a CDN, your own website), use that URL. There's no need to upload it separately to Tellus.

Primary Color​

A hex color code that becomes your portal's accent. The color picker has two inputs side-by-side:

  • A native color swatch (click to open the OS color picker)
  • A text input for typing a hex code directly (e.g., #0F172A)

The color is used in two places:

SurfaceHow the color is used
Catalog header backgroundSolid block behind your logo and company name
Product card left borderA 4-pixel vertical stripe on every card in the catalog grid

A Reset button next to the input clears the color and falls back to Tellus's default navy #0F172A.

Live WCAG AA Contrast Check​

Every time you change the color, Tellus runs a live contrast check against the white text that will sit on top of it. The result appears immediately under the input as a small chip:

ResultWhat it means
Green checkmark — "Contrast 4.2:1 — passes WCAG AA"Safe to save. White text on this color is readable for users with normal and low vision.
Red warning — "Contrast 1.8:1 — fails WCAG AA, 3:1 required"The save will be rejected. White text on this color would be unreadable for users with low vision.

The minimum threshold is 3:1 for UI elements (WCAG AA's standard for large text and graphical objects). On stricter audits — for example, where text needs to remain readable on a phone in direct sunlight — Tellus can be configured to enforce 4.5:1.

Why This Exists​

Accessibility on the public SDS portal isn't a nice-to-have. OSHA 29 CFR 1910.1200(h) requires hazard information to be communicated in a way employees can understand. If a worker can't read the signal word Danger because it's rendered in white on amber gold, the SDS isn't "readily accessible" in any practical sense — and a citation is possible.

Concrete Example — Amber Gold Fails​

Tellus's own brand palette uses amber gold #F59E0B as an accent color. It's a great color for buttons, links, and highlights on a dark background. It's a bad color for the portal header because:

CalculationResult
Amber gold #F59E0B against white text #FFFFFF1.93:1
Required minimum for WCAG AA UI elements3:1
Required minimum for WCAG AA body text4.5:1

So if you paste #F59E0B into the Primary Color input, you'll see the red warning and the save will be rejected. This isn't Tellus being precious — it's the same rule a federal accessibility audit would apply. Pick a deeper shade (the Tellus default navy #0F172A is 19.3:1, well above the threshold) or a brand-adjacent darker variant.

Picking a Color That Works​

A few practical tips:

  • Dark colors almost always pass. Navy, deep teal, forest green, burgundy, charcoal — all comfortably above 3:1 with white text.
  • Mid-tone colors are risky. Royal blue often passes; medium green often doesn't.
  • Light colors almost never pass. Yellow, light blue, light gray, pastels — these are background colors, not header colors.
  • Test your real brand color first. If it fails, look for the darker shade in your brand guidelines.

Contact Info​

A free-text field that renders as a card in the catalog footer. Use it for whatever contact path your customers actually need:

EHS Manager: ehs@example.com
Phone: (555) 555-0100
Hours: Monday–Friday, 8 AM – 5 PM ET
For 24/7 emergencies: CHEMTREC 1-800-424-9300

Line breaks are preserved. There's no character limit, but anything past a short paragraph starts to feel cramped — keep it scannable.

Safety Summary Disclaimer (Override)​

The per-product SDS pages include an auto-generated Safety Information Summary distilled from the parsed SDS (top hazards, PPE, first aid quick reference, spill response). By default, every summary shows the standard Tellus disclaimer:

Auto-generated from this SDS — verify with the full SDS before acting in an emergency.

If your legal or compliance team requires different wording — say, your insurance policy requires specific disclaimer language, or you operate in a jurisdiction with different liability framing — paste it into the Safety Summary disclaimer field. Your text replaces the default on every per-product page.

If you leave this blank, the default disclaimer is used. That's the safe, well-tested choice for most customers.

Important: the disclaimer is part of the Safety Summary liability guardrails. It renders in the same visual block as the summary content, not in a footer — workers under acute exposure don't read disclaimers, but the disclaimer's visual placement matters for legal defensibility. Don't make it harder to find by overriding with marketing copy.

Saving Your Changes​

Save is explicit — there's no auto-save. As you edit, the panel shows "You have unsaved changes" at the bottom; click Save changes to commit. If you navigate away without saving, your edits are lost.

The save button is disabled when:

  • There are no changes to save
  • A save is in progress
  • The current primary color fails the contrast check

When the save completes, you see a "Branding saved" confirmation and the panel reloads with the new server state.

Where Your Branding Appears​

After saving, your branding shows up on:

  • Catalog page at sds.tellusehs.com/{your-slug} — logo, header color, contact info card in the footer
  • Product cards in the catalog grid — left border in your primary color
  • Per-product SDS pages at sds.tellusehs.com/{your-slug}/{product-slug} — header logo, color, disclaimer override
  • Site access posters — header logo and company name (poster QR codes are scoped to the site, not the catalog)

Changes are live the moment you save. No need to republish products.

Permissions​

RoleCan view brandingCan edit branding
Admin✓✓
Manager✓—
Program Coordinator✓—
Employee——

If you're a Manager and need a branding change, ask your Admin — or get yourself promoted.