The audio player takes on your site's colours, with no setup

When you add a third-party component to a site, the small chore that always comes with it is the colour setup: finding the right blue, the right grey, pasting in the brand tint so the thing does not look like it landed there by mistake. The WeDispatch audio player tries to spare you that. Placed on a page, it looks around and takes the site's accent colour without your having to type it in. This is not a magic trick, it is a precise rule, and like any rule it has cases where it works well and cases where it gets things wrong. Better to lay it out plainly.

The rule, in the order it runs

The player looks for an accent colour by going through several trails, and it stops at the first one that gives an acceptable result:

• the chromatic colour that recurs most in the visible flow of the page. A brand accent is repeated: headings, links, rules, boxes. That recurrence is what makes it an accent, and it is what gets measured first;
• the header band colour, if the first trail found nothing: the background of the header, or of its buttons;
• the colour of links in the body text, then of any link on the page;
• failing all of that, the text colour itself, which guarantees at least a legible player consistent with the page.

You can follow this reasoning on your own pages: the colour the player adopts is almost always the one you would have pointed to by eye as "the site's colour". The details of the component and its variants are described on the audio player page, and the choice of the template that dresses it in which audio player template for your blog.

What the player turns down, and why

A colour found is not a colour kept. The player discards several candidates that, at first glance, would seem to fit:

• grey, black and white. They are nobody's accent. Black text on a white background passes every contrast test, but painting the player black says nothing about the brand. The rule therefore demands a real colour, chromatic, not a shade of grey;
• the browser's default link blue. When a page yields exactly that factory blue, it is a sign the site decided nothing at all for its links. Taking it for a brand accent would mean painting the player with a value straight out of the box, not with an intent;
• a colour laid on itself. Red on a red background exists in the code but cannot be seen. A light contrast check rules that case out, without demanding the legibility of text: here the colour fills shapes, it is not read.

Each of these refusals comes from a real case observed on real news sites, where the first version of the rule produced a dull player where the brand itself had a clear colour. The fallback is always the same, and it is safe: with no acceptable accent, the player takes the text colour, and its frame is tinted from it, so it matches the page even when it gives up guessing.

The honest limit: what the detection cannot see

There is a frequent case where the brand colour is present everywhere in your mind but nowhere in the readable code: the logo. On many sites, the brand's red or yellow lives only in a logo image loaded from another domain. To the player, that image is mute: it cannot read a colour from it without running into the browser's security rules on cross-origin images. If your identity rests solely on a logo image, and the rest of the page is black and white, the detection will not find your colour, simply because it is written nowhere a script is allowed to read.

It is exactly for those cases, and for all the ones where you would rather decide yourself, that the colour stays settable by hand. An attribute on the component (data-accent, with the colour of your choice) short-circuits the whole detection and fixes the accent once and for all. The guess is a default convenience, not a constraint: it saves you time when it sees right, and it steps aside the moment you want to decide. Setting the component up on a site, with or without manual tuning, is described on the WordPress page, and the full set of display variants in the render toolkit.

The principle behind all this is simple: a component you add to a site should not look like a component that was added to a site. Guessing the right colour instead of demanding it is a small thing, but it is the kind of small thing that makes a player look like it belongs to the page rather than having been dropped onto it.

See what it picks on your site

The free WeDispatch plan lets you install the player and watch which colour it settles on: try it now. The plans, from 69 to 419 EUR excluding VAT per month, are detailed on the pricing page.

Read next

• An audio player in the page or in an iframe: what that choice decides
• Image captions and photo credits: what French text to speech does with them
• Footnotes and note markers: what French text to speech does with them