StyleProof: CSS Style Difference & Contrast Checker EN

StyleProof compares the rendered styles of two elements on the current webpage and turns the result into a clear comparison report.

Select a reference element and a comparison element. StyleProof shows the actual differences between them across:

Typography, including font family, size, weight, and line height

Text and background colors

Spacing and padding

Display and rendered dimensions

Borders, radius, and border styles

Contrast results for supported solid backgrounds

The report shows the exact A and B values, so you can see what changed instead of reading a generic summary. You can copy the comparison as Markdown or CSS, export it as JSON, or save the report locally for later reference.

HOW TO USE

Click the StyleProof icon in the browser toolbar.

Select the first element on the page.

Select the second element.

Review the comparison report in the side panel.

Copy, export, or save the result if needed.

Clicking Clear stops the old picker and immediately starts a fresh Pick A session on the same page.

PRIVACY

StyleProof works locally in the browser. It does not require an account, analytics, remote API, telemetry, or network service. Page information is read only after the user starts an inspection and selects elements. Reports are saved only when the user chooses to save them.

StyleProof does not change page-owned CSS, fonts, content, layout, links, or controls. Its temporary picker is removed when the inspection is completed, cancelled, or cleared.

LIMITATIONS

Browser-restricted pages, cross-origin iframe content, closed Shadow DOM, and complex image or gradient backgrounds may not be fully inspectable. The report describes rendered CSS values and does not identify the original source stylesheet rule. Contrast results are not an accessibility compliance certification.