Colour is almost right

Why it matters

White at 85 percent opacity is not white. On a blue background it comes out as a pale blue, and next to real white you see it. A hex code alone does not show this, which is why it survives every check of the stylesheet.

How Snaglist checks it

This check only runs with a brand manual you uploaded and rules you confirmed. In a real browser, Snaglist reads the colour of each piece of text, its transparency, the opacity of every block around it, and the background. It calculates the colour that comes out on the screen and compares it with the manual, the way a printer does (CIEDE2000). The right colour with less than 98 percent opacity is reported, and so is a difference up to 5. Above that it is a different colour, reported under the colour check.

Snaglist reports this as a notification. It costs 2 percent of the page in the health score. Good to know, and sometimes a deliberate choice.

Common causes

• Opacity used to make a text look quieter
• A shade picked by eye from a screenshot
• An opacity on a block that also applies to the text inside it
• An animation that does not end at full opacity

How to fix it

1. Find the text in the detail and see where the transparency comes from, on the text or on a block around it.
2. Set the colour to the exact value from the manual.
3. If the lighter shade is deliberate, add it to the manual.

How it shows in the report

In the report for your client this appears under the heading "Colours that do not quite match your manual". When everything is in order, the report says: "Colours match the manual, opacity included".