Watch Face Design Check: Legibility & Safe Zones

How it works

Watch Face Legibility & Safe-Zone Audit is for the last look before you publish a smartwatch face. You give it the face image(s) (or a description) plus the planned time and complication zones and the text colour. It measures what it can, labels what it cannot, and never edits or uploads anything.

Phase 1 — Intake. Whether it can run a measurement (Python with Pillow) or only look or read your description, each face's size and shape (round or square), each text zone as a pixel box with its planned colour, whether you have a separate ambient image, and the preview image.

Phase 2 — Measure. A small read-only Python/Pillow snippet, included in the Skill, prints the contrast ratio of your text colour against every pixel under the zone (median and worst case), how busy the art is under it, how close the box corners come to the round-screen edge, a dimmed grayscale ambient simulation, and a 120 px small-preview check. Without Python it falls back to visual judgement and labels it UNSURE.

Phase 3 — Four checks per face. Time contrast, safe zone (busy art and round crop), ambient and small-size legibility, and preview honesty (does the preview show the time where the real watch draws it). Each is PASS, FIX or UNSURE with the measured number or a quoted observation. A face takes its worst zone result per check (time and date/complication zones are listed separately), and without a preview statement L4 stays UNSURE, so a face that otherwise passes reads PASS-with-UNSURE-L4. Tight zone boxes measure more accurately than loose ones.

Phase 4 — Fix list. Only the failing faces, one line each, naming the number the fix should move, plus a "keep as is" list and the questions a human still has to answer.

Sample output

Real, unedited output from running this Skill on a sample problem:

Mode M — 2 faces — PASS 0 / FIX 2 / UNSURE 0

## Faces and zones

- Mode M: Python 3 with Pillow is available and both files were readable. Script saved to /tmp/qa3/wfaudit.py, run with `python3 -I`, one run per zone per face.
- good.png: 400x400, square file, round face (visible area = inscribed circle, radius 200 px).
- bad.png: 400x400, square file, round face.
- Planned layout (user): time in the centre, date near the top.
- Zone boxes (x0,y0,x1,y1) were chosen by me as tight boxes around the glyphs I measured in the pixels. All are "derived", not user-supplied.

| Face | Zone | Box | Text colour | Source of colour |
|---|---|---|---|---|
| good | time | 36,155,370,243 | #FFFFFF | user: "white-ish"; pixels show exactly (255,255,255) |
| good | date | 142,58,256,81 | #C8C8C8 | not stated; sampled from pixels (200,200,200) |
| bad | time | 36,155,370,243 | #808080 | user: "grey"; pixels show exactly (128,128,128) |
| bad | date | 152,25,248,49 | #787878 | not stated; sampled from pixels (120,120,120) on a yellow plate (250,250,120) |

- Ambient image supplied: no (C3a is the script's dimmed grayscale simulation, an estimate).
- Preview/mockup supplied: no.
- Defaults used: 4.5:1 target, 6% bezel inset (limit 94% of radius), 0.5 ambient dimming, 9 px minimum zone height at 120 px, busy-art thresholds.

## Per-face results

| Face | L1 time contrast | L2 safe zone | L3 ambient/small | L4 preview | Verdict | Evidence |
|---|---|---|---|---|---|---|
| good | PASS | UNSURE | FIX | UNSURE | FIX | Time zone: `C1 contrast median 16.09:1 \| worst-5% 15.34:1 \| 1% of zone <3:1 -> PASS`; `C2a busy art 3% ... -> PASS`; `C2b ... 88% of radius (limit 94%) -> PASS`; `C3a ambient median 9.54:1 \| 2% <3:1 -> PASS`; `C3b zone height 26.4px \| median 15.97:1 -> PASS`. Date zone: `C1 median 10.81:1 \| worst-5% 5.09:1 \| 4% <3:1 -> PASS`; `C2a busy art 9% of zone pixels are strong edges -> UNSURE`; `C2b 77% of radius -> PASS`; `C3a median 6.27:1 -> PASS`; `C3b small 120px preview: zone height 6.9px \| median 9.93:1 \| 11% <3:1 -> FIX` (under 9 px). L4: no preview or real-layout statement supplied; image time box centre 51% across, 50% down, date box centre 50% across, 17% down, consistent with the plan but no preview to compare. |
| bad | FIX | FIX | FIX | UNSURE | FIX | Time zone: `C1 contrast median 1.28:1 \| worst-5% 1.05:1 \| 80% of zone <3:1 -> FIX`; `C2a busy art 20% of zone pixels are strong edges -> FIX` (printed value rounds to 20%; the script's rule is >20%); `C2b 88% of radius (limit 94%) -> PASS`; `C3a ambient median 1.22:1 \| 81% <3:1 -> FIX`; `C3b median 2.11:1 \| 83% <3:1 -> FIX`. Date zone: `C1 median 4.00:1 \| worst-5% 3.35:1 \| 3% <3:1 -> UNSURE` (below 4.5 target); `C2a busy art 24% ... -> FIX`; `C2b 91% of radius (limit 94%) -> PASS`; `C3a median 3.48:1 -> PASS`; `C3b zone height 7.2px \| median 3.80:1 \| 19% <3:1 -> FIX`. L4: no preview supplied; time box centre 51% across, 50% down, date box centre 50% across, 9% down. |

### Raw script output

good.png time
```
file=/tmp/qa2/watch/good.png size=400x400 shape=round box=36,155,370,243 text=#FFFFFF need>=4.5
box centre = 51% across, 50% down
glyph-coloured pixels excluded from background: 45%
C1 contrast  median 16.09:1 | worst-5% 15.34:1 | 1% of zone <3:1 -> PASS
C2a busy art 3% of zone pixels are strong edges -> PASS
C2b round crop farthest box corner at 88% of radius (limit 94%) -> PASS
C3a ambient (grayscale, brightness x0.50, simulation) median 9.54:1 | 2% <3:1 -> PASS
C3b small 120px preview: zone height 26.4px | median 15.97:1 | 5% <3:1 -> PASS
```
good.png date
```
file=/tmp/qa2/watch/good.png size=400x400 shape=round box=142,58,256,81 text=#C8C8C8 need>=4.5
box centre = 50% across, 17% down
glyph-coloured pixels excluded from background: 33%
C1 contrast  median 10.81:1 | worst-5% 5.09:1 | 4% of zone <3:1 -> PASS
C2a busy art 9% of zone pixels are strong edges -> UNSURE
C2b round crop farthest box corner at 77% of radius (limit 94%) -> PASS
C3a ambient (grayscale, brightness x0.50, simulation) median 6.27:1 | 4% <3:1 -> PASS
C3b small 120px preview: zone height 6.9px | median 9.93:1 | 11% <3:1 -> FIX
```
bad.png time
```
file=/tmp/qa2/watch/bad.png size=400x400 shape=round box=36,155,370,243 text=#808080 need>=4.5
box centre = 51% across, 50% down
glyph-coloured pixels excluded from background: 47%
C1 contrast  median 1.28:1 | worst-5% 1.05:1 | 80% of zone <3:1 -> FIX
C2a busy art 20% of zone pixels are strong edges -> FIX
C2b round crop farthest box corner at 88% of radius (limit 94%) -> PASS
C3a ambient (grayscale, brightness x0.50, simulation) median 1.22:1 | 81% <3:1 -> FIX
C3b small 120px preview: zone height 26.4px | median 2.11:1 | 83% <3:1 -> FIX
```
bad.png date
```
file=/tmp/qa2/watch/bad.png size=400x400 shape=round box=152,25,248,49 text=#787878 need>=4.5
box centre = 50% across, 9% down
glyph-coloured pixels excluded from background: 24%
C1 contrast  median 4.00:1 | worst-5% 3.35:1 | 3% of zone <3:1 -> UNSURE
C2a busy art 24% of zone pixels are strong edges -> FIX
C2b round crop farthest box corner at 91% of radius (limit 94%) -> PASS
C3a ambient (grayscale, brightness x0.50, simulation) median 3.48:1 | 5% <3:1 -> PASS
C3b small 120px preview: zone height 7.2px | median 3.80:1 | 19% <3:1 -> FIX
```

## Fix list

Ordered by severity.

1. bad | time: change the grey #808080 digits to white or near-black and/or darken or flatten the rainbow stripes under the time (or add a backing shape); target median >= 4.5:1, re-run on the same box 36,155,370,243 (now 1.28:1, worst-5% 1.05:1) | L1, L3
2. bad | time: clear or calm the stripe art under the time zone so strong edges fall to <= 8% (now 20%, FIX in the script's >20% rule at the unrounded value) | L2
3. bad | date: the date sits on stripes at the plate edge; make the plate fully cover the box or shrink the box inward so strong edges <= 8% (now 24%); darken the #787878 text on the yellow plate to reach 4.5:1 (now median 4.00:1) | L2, L1
4. bad | date: bigger or heavier digits, aiming for about 9 px zone height at 120 px (now 7.2 px) | L3
5. good | date: bigger or heavier digits, aiming for about 9 px zone height at 120 px (now 6.9 px; contrast is fine at 9.93:1) | L3

Keep as is: good | time (16.09:1 median, 88% of radius, 26.4 px at 120 px). good | date contrast and position (10.81:1, 77% of radius).

Needs a human look:
- good | date C2a (9% strong edges, UNSURE): are the strong edges just the glyph outlines on the gradient, or is there art behind the date? Look at the date zone at full size.
- bad | date C1 (4.00:1, UNSURE vs the 4.5 target): is #787878 really the intended date colour? (I sampled it, you did not state it.)
- both | L4: send the store or promo preview image, or tell me where the real watch draws the time and date, so the preview can be compared with the box centres (time 51%/50%, good date 50%/17%, bad date 50%/9%).
- both | L3: is there a separate ambient image? Without one, C3a is only an estimate.

Apply nothing. Tell me which fixes to turn into a revision brief.

## Limits of this check

- Mode M, numbers are for the supplied 400x400 images only; the real watch's brightness, glare, ambient dimming and system complications are not measured.
- L4 could not be verified: no preview/mockup and no statement of where the real watch draws the time. Both faces therefore have L4 UNSURE.
- Ambient (C3a) is a simulation (grayscale, brightness x0.5); no ambient image was supplied.
- Date text colours were sampled from pixels, not supplied by the user.
- Zone boxes were chosen by me from glyph extents; a looser or tighter box changes the numbers. The date boxes are small (about 100x23 px), so percentages there rest on few pixels.
- Defaults used: 4.5:1 target, 6% inset, 0.5 dimming, 9 px minimum height, busy-art thresholds.
- Store acceptance rules and device screens differ and were not checked.

Use cases

• Checking white-on-bright text and busy art behind the time before you publish a face
• Catching a date or complication that runs into the round bezel
• Testing an always-on/dimmed version and a tiny gallery thumbnail for legibility
• Confirming your store preview shows the time where the real watch will draw it
• Turning a vague "does it look readable?" into numbers and a short fix list

FAQ

Do I need Python? It is better: with Python and Pillow the Skill measures contrast ratios on your actual image. Without it, it judges by eye or from your description and marks contrast UNSURE instead of inventing a number. It asks before installing anything.

Does it edit, crop or upload my files? No. It is read-only, writes nothing into your folder, and keeps nothing after the conversation. No API key or hosting is needed.

Does it tell me if a store will accept my face? No. It checks legibility only. Check each store's current rules and requirements yourself; it gives no legal or trademark advice.

Which sizes and shapes? Any size you can supply, round or square, for example 360 to 454 px round faces. Round faces are checked against the inscribed circle with an adjustable edge margin.

How accurate is the ambient check? It is a simulation (grayscale, dimmed) of your image, labelled as such. If you have a separate ambient image, it audits that as its own face.