Nerulio.
All toolsStudioNo upload · processed on this device

UI Scale Preview

See a UI element from 1280×720 to 4K, integer scales next to 1.25/1.5/1.75, plus text overflow and contrast numbers.

The preview draws your panel or button inside a simulated 1280 × 720 to 3840 × 2160 screen (4:3, 16:9, 16:10 or 21:9), places it with Godot-style anchors, overlays a 90 % title-safe or 93 % / 95 % action-safe area, and shows it at 1×, 1.25×, 1.5×, 1.75×, 2×, 2.5× and 3×: integer scales keep pixel art crisp, fractional ones soften it. The same Check stage measures Korean, English and Japanese labels against a box and computes the WCAG contrast ratio (white on black is 21:1). It is arithmetic in the browser, not an engine layout pass.

Drop image files hereProcess many files at once
No upload · processed on this device

Scale, safe areas and contrast in numbers

At an integer scale every source pixel becomes a whole block of screen pixels: at 2× a 16 px icon is 32 px and each pixel is 2 × 2. At 1.5× two source pixels have to cover three screen pixels, so with nearest filtering the columns alternate between 1 and 2 px wide, and with linear filtering neighbouring colours blend into a soft edge; the preview draws fractional scales smoothed. Godot 4.2 and later have a stretch scale mode Integer that rounds the scale factor down (2.5 becomes 2), which its documentation recommends for pixel-art games together with the viewport stretch mode.

Safe areas come from television: EBU R 95 (version 1.1, 2017) keeps essential action 3.5 % and graphics 5 % in from every edge, which is the 93 % action-safe and 90 % title-safe rectangle the preview draws; the 95 % preset is an extra, looser option and not part of R 95. Phones and consoles report their own safe area at run time instead (Unity Screen.safeArea in pixels, Godot DisplayServer.get_display_safe_area()), so those are entered here as custom insets rather than shipped as presets.

Contrast uses the WCAG 2.2 formula: each sRGB channel is linearised, relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, and the ratio is (L1 + 0.05) ÷ (L2 + 0.05) with the lighter colour first, from 1:1 to 21:1. Success Criterion 1.4.3 asks for 4.5:1 for text and 3:1 for large text (18 pt, or 14 pt bold; the preview uses 24 px and 18.66 px), 1.4.6 for 7:1, and 1.4.11 for 3:1 on the visual parts of UI components. A ratio describes two flat colours; text over artwork has a different ratio at every pixel.

Integer scale
A scale factor that is a whole number, so each source pixel covers an exact block of screen pixels.
Title-safe (graphics safe)
The inner 90 % of the frame: 5 % margin on every side in EBU R 95.
Action-safe
The inner 93 % of the frame: 3.5 % margin on every side in EBU R 95.
Relative luminance
The brightness of a colour from 0 (black) to 1 (white) after linearising sRGB, used for the contrast ratio.
Anchor
Where an element is pinned in its parent, as four numbers from 0 to 1 (left, top, right, bottom).

Example: the numbers the Check stage computes

Every value below comes from the same functions the preview uses:

contrast   L = 0.2126 R + 0.7152 G + 0.0722 B   (sRGB linearised first)
white/black        (1.00 + 0.05) / (0.00 + 0.05) = 21.0 : 1
#767676 on white   L = 0.1812 → 1.05 / 0.2312 = 4.54 : 1   passes 4.5:1 by 0.04
white on #3182f6   L = 0.2327 → 1.05 / 0.2827 = 3.71 : 1   UI 3:1 and large text: yes · 16 px text AA: no
safe 1920×1080     title-safe 90 % → x 96, y 54, 1728 × 972   action-safe 93 % → x 67, y 38, 1786 × 1004
anchor             bottom-right, 300 × 80 button, 32 px margin → x = 1920 − 300 − 32 = 1588, y = 1080 − 80 − 32 = 968
scale              base 640 × 360 → 1920 × 1080 is exactly 3×;  1366 × 768 is 2.13× → Integer mode draws 2× (1280 × 720)

The default colours of the contrast tab are white on #3182f6: fine for a large label or an icon, too low for 16 px body text. At 1920 × 1080 EBU R 95 itself gives 67 px as 3.5 % of the width, the same number the preview draws.

Check the result

  • Scale strip: pixel art at 2× and 3× should keep hard edges; if the 1.5× version is unacceptable, plan for integer steps or a base resolution that divides your target screens.
  • Sizes tab: the element's rectangle stays inside the safe-area numbers on every aspect ratio you ship, including 21:9.
  • Localisation tab: every language reads "fits" (or "wraps" where your UI allows wrapping); then repeat with your game font, because the preview measures a browser font.
  • Contrast tab: body-text labels reach at least 4.5:1, large labels and icons at least 3:1.

Troubleshooting

SymptomLikely causeHow to checkFix
Pixel-art UI looks blurry on some monitorsThe UI is drawn at a fractional scale (for example 2.13× on 1366 × 768) with linear filteringCompare the 1.5× and 2× cells of the scale stripIn Godot use the viewport stretch mode with the Integer scale mode and Nearest filtering; see blurry pixel art in Godot
A label fits in the preview but overflows in the gameThe preview measured the text with a browser font; the game font has other widthsMeasure the same string with the game font (the Font stage builds one)Leave spare width, allow wrapping, or shorten the translation
Korean or Japanese breaks in the middle of a wordText without spaces is broken per character by the preview's greedy line breakerLook at where the line ends in the Localisation tabAccept per-character breaks, or insert explicit breaks; engines have their own line-breaking rules
An element leaves the safe area only on 21:9It is anchored to a screen edge, and the wider frame moves that edgeSwitch the aspect to 21:9 with the safe area onAdd a margin at least as large as the safe-area inset, or anchor inside a safe-area container
The contrast passes but the label is hard to read over artThe ratio compares two flat colours, and the art behind the text variesMeasure the lightest and darkest pixels behind the textPut a backing panel, an outline or a shadow behind the label

Other ways to do it

OptionWhen it is the better choice
Run the scene in the engine at each target resolutionYou need the real layout: containers, size flags, theme margins and the engine's own text rendering.
Pixel-perfect checkerYou have a screenshot from the game and want to know whether it was scaled by a whole number.

What this page does not cover

  • No engine layout pass: containers, size flags and theme margins are not modelled, only the anchor arithmetic.
  • No console or phone presets: those safe areas are device-specific and go in custom insets.
  • Text widths come from a browser font, not your game font.

Versions and sources

Measured in Chromium for docs/UI-LAB.md: title-safe at 3840 × 2160 is 192, 108 · 3456 × 1944; a top-left anchor with a 64 px margin lands at 64, 64; a 120 px box makes an English label overflow while the Korean sample fits; black on white is exactly 21:1 and #767676 on white 4.54:1. The example values were recomputed with the same functions. Safe-area percentages follow EBU R 95, the contrast formula WCAG 2.2, the integer scale mode the Godot 4.7 documentation.

Official documentation used

UI Scale Preview

See a UI element from 1280×720 to 4K, integer scales next to 1.25/1.5/1.75, plus text overflow and contrast numbers.

How it works

  1. Add images
  2. Adjust settings and review the result
  3. Download a new file

Supported formats

PNG / JPG / WebP / AVIF / HEIC → PNG + JSON (ZIP) — Input decoding depends on browser support and optional engines.

What this tool does

See a UI element from 1280×720 to 4K, integer scales next to 1.25/1.5/1.75, plus text overflow and contrast numbers.

Implementation and verified quality

advanced · Godot-style anchor arithmetic / canvas text measurement / WCAG contrast formula. Quality qualification is in progress. Pro/Flagship quality has not been established.

Before you export

Anchors and safe areas are a conceptual simulation, not a layout pass any engine ran. The contrast ratio is the WCAG formula, a reference number rather than a verdict.

Frequently asked questions

What are this tool’s limitations?

Anchors and safe areas are a conceptual simulation, not a layout pass any engine ran. The contrast ratio is the WCAG formula, a reference number rather than a verdict.

Are my files uploaded?

This tool processes the files you open on your device without uploading them. Images you explicitly attach to community posts are uploaded separately. Optional engines and models are downloaded from third parties; those requests expose connection information such as your IP address.

Will my work be saved automatically?

No. Images and editing state stay in this tab; media output can use local temporary storage. Changing language preserves your work; reloading, closing the tab, or following a link to another page can clear it.