Cameleon's contrast, measured

Each skin's colours

A skin's colours were each designed against one background. Cameleon holds them to the hardest one in the skin instead: the furthest surface, at the strongest tint a coloured header or callout can be given. A colour that does not clear 4.5:1 there is lightened or darkened until it does, keeping its hue, so the colour on the page can differ a little from the one in the skin. Both are below, with their contrast.

Midnight dark

Surfaces, from the page outward: #05070f#080b1e#0b1230#121a42

Dusk dark

Surfaces, from the page outward: #0f0b24#141032#1a1440#231b55

Legacy dark

Surfaces, from the page outward: #0d1b3d#112046#16264f#1d3160

Sunset light

Surfaces, from the page outward: #fff6ec#f4ebe2#eae1d7#dfd7cd

Yardage Book light

Surfaces, from the page outward: #f7f8f3#e6e9df#d6d9cf#c7cac0

In the skin is the colour as the skin defines it, with its contrast against the skin's furthest surface. On the page and Hardest background are the colour Cameleon draws, against the page background and against the hardest background the skin can produce.

On 15 popular sites

Pieces of text under WCAG AA contrast (4.5:1, or 3:1 for large text), out of all the text measured on the page. Each site's page is linked, with captures in every skin.

How it was measured

• Each page is the real one, fetched 3 November 2026, with its own stylesheets. Cameleon's engine, the code the extension runs, recoloured it; nothing was adjusted by hand.
• One skin per page load. Applying several skins to one loaded page gives a different answer depending on the order, so every skin got a fresh page.
• Each page was left to settle for four seconds before it was skinned and again before it was measured, so text a site adds after loading is counted. An early test that skipped this scored a page too kindly.
• Every element with text of its own was measured, against the background a reader actually sees: through every see-through layer down to the first solid one.
• Except where that background is a picture or a gradient rather than a colour. An image is painted over the colour beneath it, so the colour is not the one on screen and a figure taken from it would be invented. 53 pieces of text (CNN 1, The Guardian 18, RTÉ News 22, NASA 12) sit on one and are counted as not measurable rather than scored either way.
• Measured in Chrome 156 rather than Safari, running the same engine files the extension ships. The colours are the same in both, because they are the site's own CSS; how a page is laid out can differ.
• The pages are public ones read without signing in, with nothing personal on them. The address of each is on its own page.
• Where a site opened with a cookie-consent dialog (CNN, The Guardian, The Verge, Ars Technica, RTÉ News), the dialog was taken off before anything was measured, as it is once a reader answers it. Nothing else on the page was changed.

What it cannot fix

• Pictures, video and canvas. Colours inside an image are the image's own. Under a dark skin they are dimmed a little; text drawn into a picture is never re-lit.
• Background images. A photograph or gradient set as a background is left alone, so pale text a skin puts over a bright one can be hard to read. Where a whole page is grounded that way the skin is defeated outright, and the measurement above says so rather than scoring it.
• Sites built of web components. A page drawn entirely inside shadow DOM, which an extension cannot reach, is not recoloured at all.
• A site that changes its own theme while open. Whether a page is already dark is judged once, as it loads.
• Unusual colour spaces. A colour given in a wide-gamut space Cameleon does not read is left as it is rather than guessed at.

Cameleon · Dark mode for the sites you read · Changelog