LayoutScopev0.4.0
GitHub / install
https://lyrazeta.github.io/layoutscope/demo/2026-08-14 03:09:23 UTC - 9.9 s

Inspection results

15 findings across 2 page views

Audit trail

Suppression audit

1 of 16 raw findings suppressed by 1 active entries from demo/broken/layoutscope.config.json

LS006 selector=#bad-contrast · viewport=mobile1 applied

Action smoke fixture: demonstrate an audited suppression.

Show matched findings
  • /demo · mobile · #bad-contrast · 735eb968b145994c
    Text contrast is 1.44:1; 4.5:1 is required.
    Evidence details
    contrast ratio
    1.44
    required ratio
    4.5
    foreground
    rgb(210, 216, 217)
    background
    rgb(255, 255, 255)
    font size
    12
    font weight
    400
01

Northstar Operations

/demo
desktop1440 x 900
7 findings110 elements541 ms load1,440 x 982 document

Screenshot

Click a marker to inspect it
Screenshot of /demo at desktop - 1440 x 900

Findings

7 shown

Text or interactive content is clipped by its container.

article:nth-of-type(2) > div:nth-of-type(2)
Evidence details
client width
318
client height
300
scroll width
355
scroll height
300
clipped horizontally
true
clipped vertically
false

Fix: Allow the container to grow, wrap the content, or use an intentional truncation treatment with an accessible label.

Text or interactive content is clipped by its container.

section:nth-of-type(3)
Evidence details
client width
1162
client height
238
scroll width
1180
scroll height
238
clipped horizontally
true
clipped vertically
false

Fix: Allow the container to grow, wrap the content, or use an intentional truncation treatment with an accessible label.

Text contrast is 1.44:1; 4.5:1 is required.

#bad-contrast
Evidence details
contrast ratio
1.44
required ratio
4.5
foreground
rgb(210, 216, 217)
background
rgb(255, 255, 255)
font size
12
font weight
400

Fix: Increase foreground/background contrast or increase the rendered text size and weight.

Text contrast is 4.14:1; 4.5:1 is required.

div:nth-of-type(1) > p:nth-of-type(1)
Evidence details
contrast ratio
4.14
required ratio
4.5
foreground
rgb(102, 119, 124)
background
rgb(238, 242, 243)
font size
12
font weight
800

Fix: Increase foreground/background contrast or increase the rendered text size and weight.

A large visual surface is blank or nearly uniform.

#throughput
Evidence details
surface type
canvas
brightness spread
0
dominant color ratio
1

Fix: Verify rendering initialization, asset loading, canvas dimensions, and WebGL or media errors.

Two unrelated visible elements overlap substantially.

div:nth-of-type(3) > pwith div:nth-of-type(2) > div:nth-of-type(1)
Evidence details
overlap width
93.43
overlap height
35.09
overlap ratio
0.45

Fix: Inspect stacking, absolute positioning, negative margins, and breakpoint-specific layout rules.

An icon-only control has no accessible name.

header > button

Fix: Add aria-label, visible text, or another reliable accessible name.

02

Northstar Operations

/demo
mobile390 x 844
8 findings1 suppressed110 elements67 ms load390 x 1,486 document

Screenshot

Click a marker to inspect it
Screenshot of /demo at mobile - 390 x 844

Findings

8 shown

Text or interactive content is clipped by its container.

article:nth-of-type(2) > div:nth-of-type(2)
Evidence details
client width
360
client height
300
scroll width
397
scroll height
300
clipped horizontally
true
clipped vertically
false

Fix: Allow the container to grow, wrap the content, or use an intentional truncation treatment with an accessible label.

Text or interactive content is clipped by its container.

section:nth-of-type(1)
Evidence details
client width
362
client height
224
scroll width
392
scroll height
224
clipped horizontally
true
clipped vertically
false

Fix: Allow the container to grow, wrap the content, or use an intentional truncation treatment with an accessible label.

Text or interactive content is clipped by its container.

section:nth-of-type(3)
Evidence details
client width
360
client height
238
scroll width
1180
scroll height
238
clipped horizontally
true
clipped vertically
false

Fix: Allow the container to grow, wrap the content, or use an intentional truncation treatment with an accessible label.

Text contrast is 4.14:1; 4.5:1 is required.

div:nth-of-type(1) > p:nth-of-type(1)
Evidence details
contrast ratio
4.14
required ratio
4.5
foreground
rgb(102, 119, 124)
background
rgb(238, 242, 243)
font size
12
font weight
800

Fix: Increase foreground/background contrast or increase the rendered text size and weight.

A large visual surface is blank or nearly uniform.

#throughput
Evidence details
surface type
canvas
brightness spread
0
dominant color ratio
1

Fix: Verify rendering initialization, asset loading, canvas dimensions, and WebGL or media errors.

Two unrelated visible elements overlap substantially.

div:nth-of-type(3) > pwith div:nth-of-type(2) > div:nth-of-type(1)
Evidence details
overlap width
93.43
overlap height
35.09
overlap ratio
0.41

Fix: Inspect stacking, absolute positioning, negative margins, and breakpoint-specific layout rules.

An interactive target is smaller than 24 by 24 CSS pixels.

header > button
Evidence details
target width
22
target height
22
recommended minimum
24

Fix: Increase the clickable area to at least 24 by 24 CSS pixels; 44 by 44 is a comfortable target.

An icon-only control has no accessible name.

header > button

Fix: Add aria-label, visible text, or another reliable accessible name.