Code to image

Code as a sharp SVG or PNG, every colour contrast-checked, with alt text written.

493 characters · 11 lines

Or drop or paste anywhere on the page. A code or text file, opened into the box.

951 × 424 at 1×

Contrast

13 colours measured

3 colours in Dracula fell short of 4.5:1 and are lifted in the image, hue kept.

  • // WCAG 2 contrast ratio between two sRGcode · on code · 1 use3.02:1lifted to4.51:1#6272a4 → #7e90c3
  • 0.05code · on highlighted line · 2 uses4.34:1lifted to4.51:1#bd93f9 → #c196fd
  • return + /code · on highlighted line · 4 uses4.38:1lifted to4.51:1#ff79c6 → #ff7ec7

WCAG 2 contrast, measured on the colour shown: translucent colours are blended with what is behind them first, and tokens on a highlighted or diff line are measured on that line’s tint. The tool’s own line numbers, markers and title are set to pass.

Export

Measuring…

PNG pixels
…
PNG file
…
Written ppi
…
SVG file
…

Alt text and the code as text

Short enough to give the code itself, which is what someone using a screen reader needs.

TypeScript code from contrast.ts, 11 lines (line 4 highlighted):
// WCAG 2 contrast ratio between two sRGB colours
export function contrast(a: string, b: string): number {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

function luminance(hex: string): number {
  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
  const lin = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
}
  • 558 characters
  • Fits X (1,000)
  • Fits Bluesky (2,000)

Frame and type

Background
Window
PNG scale
More optionsLine numbers from 1 · no diff markers · canvas fits the code · font embedded in the SVG

In short

Paste code, pick a theme, and download an image of it: an SVG whose code is real text you can select, or a PNG at exactly 1×, 2× or 3× with the resolution written into the file. Every colour in the image is measured against the background it sits on, and anything under 4.5:1 can be lifted to pass with its hue kept. Alt text and the code as text come with it, because an image of code is otherwise invisible to a screen reader.

What code to image is

A tool that turns source code into a picture for slides, posts and documentation: the code is syntax-highlighted in a chosen theme, framed, and exported as an image file. This one draws the image itself rather than photographing a web page, so the SVG holds the code as real text, and it measures every colour in the image against the background it sits on.

What this tool does that others do not

  • Every colour measured where it is drawn

    Each token colour is checked with WCAG 2 contrast over its own background, after translucent colours are blended with what is behind them, and on a highlighted or diff line over that line’s tint. Anything under 4.5:1 is listed with the code it colours, and Accessible colours lifts it to pass by moving lightness only, so a purple stays purple.

    Dracula’s comment colour #6272a4 measures 3.03:1 on #282a36 and is lifted to #7e90c3 at 4.52:1. Across the 65 themes that ship with the shiki highlighter, 56 have at least one token colour under 4.5:1 and 49 fail on comments.

  • An SVG of text, not of a web page

    Other tools export through dom-to-image or html-to-image, which wrap HTML in a foreignObject element that Figma, Inkscape, Google Slides and PowerPoint draw as a blank box. Here each line is an SVG text element and each token a tspan placed on the column grid, with the font embedded, so the file opens anywhere and the code can be selected and searched.

    The sample exports at 9,571 bytes as SVG, or 37,933 with JetBrains Mono embedded (a 21,168-byte font, base64 in the file).

  • PNG at exactly 1×, 2× or 3×, with the resolution in the file

    The PNG is the same SVG drawn by your browser at the scale you choose, and its size in bytes is shown before you download. The pHYs chunk records 96 pixels per inch for each 1×, which browsers never write themselves, so a slide app places a 2× image at its intended size.

    2× is written as 192 ppi and 3× as 288. Neither Chromium nor WebKit writes any ppi into a canvas PNG.

  • Alt text and the code as text

    An image of code cannot be read by a screen reader or copied. Short snippets get the code itself as alt text, after the language and line count; longer ones get a summary of what they declare, sized to fit X’s 1,000-character limit, with the code to post alongside as plain text or a Markdown block.

    X allows 1,000 characters of alt text and Bluesky 2,000; the count shown is in characters as those platforms count them, not in UTF-16 units.

How to use it

  1. Paste the code and check the language

    Pasted code gets a language guess, which you can change; nothing is guessed after you choose one yourself. Tabs become spaces so every column lines up.

  2. Choose a theme, then read the Contrast panel

    It lists every colour under 4.5:1 with the code it colours. Leave Accessible colours on to export the lifted versions, or turn it off to keep the theme exactly as written.

  3. Mark what matters

    Highlight lines by number (3, 5-7), or switch on Diff under More options to turn leading + and − into markers in the gutter. Check the Contrast panel again: a highlight tint can push a passing colour under the line.

  4. Export, and post the words with the picture

    Download the PNG at 2× for screens or the SVG for slides and documents, then copy the alt text into the post’s image description and the code into the post itself.

Worked examples

Real input, real figures.

Highlighting a line in Dracula

You give it

The TypeScript contrast sample in Dracula, with line 4 highlighted.

You get

On the plain background only the comment fails (3.03:1). On the highlighted line, Dracula’s purple #bd93f9 drops to 4.34:1 and its pink #ff79c6 to 4.39:1, because the tint lightens what is behind them; both are lifted to 4.51 and 4.52:1 on that line only.

Sharing it as a link

You give it

The same 493-character sample, with its theme and settings, as a link.

You get

The whole link is 473 characters, compressed with the browser’s own deflate and kept after the #, which is never sent to a server. A link that would pass 8,000 characters carries the settings only and says so, where carbon.now.sh keeps the first 2,000 characters of the code without a word.

A drawn image against a page screenshot

Aspectdsyncarbon.now.sh, ray.so and similar
SVG exportText and tspans, font embedded; opens in Figma, Inkscape and slidesHTML inside foreignObject; a blank box outside browsers
Colour contrastEvery colour measured on its own background, with a hue-keeping fixNot measured; carbon’s default theme sets comments at 2.24:1
PNG resolution1×, 2× or 3×, bytes shown first, ppi written in the fileA pixel ratio and no ppi; codeimage defaults to the screen’s
Alt textWritten for you, measured against X and Bluesky limitsNone; carbon’s About page says its images hide the code from assistive technology
Shared linkFragment only, never truncatedcarbon: query string, cut at 2,000 characters; ray.so: sent to its URL shortener on Copy URL
CostFree, no account, no watermarkFree for the open-source tools; snappify and pika.style watermark their free tiers

Guide

What it will not do

  • No GIF or video export, and no image backgrounds: the backgrounds are gradients drawn in the SVG, which keeps them out of the contrast question because no text sits on them.
  • Only the Latin 400 file of each font is embedded. Bold and italic tokens are synthesised by the renderer, and characters outside Latin (Greek, Cyrillic, CJK, emoji) fall back to a system font; each token still starts on its own column, but a wide character can overlap the next.
  • X and LinkedIn image sizes are not offered as presets, because their own documentation could not be read to confirm them.

How the themes measure on this page’s sample

The sample above, highlighted in each theme the tool offers and measured with WCAG 2 contrast on the colour actually shown. 13 of 17 themes have at least one token colour under 4.5:1 on their own background; across all 65 themes that ship with the highlighter, 56 do, on a wider set of samples. The lifted colour is what Accessible colours puts in the image instead.

ThemeColours usedUnder 4.5:1Worst colourLifted to
Dracula71#6272a4 3.02:1#7e90c3 4.51:1
One Dark Pro82#7f848e 3.72:1#8d939d 4.52:1
GitHub Dark60#8b949e 6.15:1—
Nord82#616e88 2.43:1#8e9cb7 4.51:1
Tokyo Night111#51597d 2.50:1#7982a8 4.53:1
Night Owl102#637777 3.87:1#6d8282 4.51:1
Monokai72#f92672 3.92:1#ff447d 4.51:1
Catppuccin Mocha70#9399b2 5.81:1—
Rosé Pine72#31748f 3.38:1#4789a4 4.52:1
Vitesse Dark82#666666 3.26:1#7d7d7d 4.55:1
Solarized Dark63#586e75 2.78:1#7a9198 4.52:1
GitHub Light (light)60#6e7781 4.54:1—
One Light (light)63#a0a1a7 2.46:1#737379 4.51:1
Catppuccin Latte (light)75#fe640b 2.63:1#be4700 4.53:1
Vitesse Light (light)85#a0ada0 2.33:1#6d7a6e 4.50:1
Solarized Light (light)65#93a1a1 2.47:1#667474 4.51:1
VS Code Light+ (light)90#267f99 4.58:1—

Comments are the usual casualty: syntax themes dim them on purpose so the code stands out, and on a slide or a phone screen in daylight the dimmed line is the one nobody can read. To check a single pair of colours by hand, use the contrast checker, which runs the same search.

Why the SVG works in Figma and slides

Most code-image tools take a picture of their own web page. Their SVG export wraps that page’s HTML in a<foreignObject> element, which browsers draw and design and office apps do not: Figma, Inkscape, Google Slides and PowerPoint show a blank box, and the text often cannot be selected. This tool writes the image itself, one <text> element per line, so any SVG reader draws it and the code stays searchable. The PNG is that same SVG drawn by your browser, so the two cannot disagree.

A 2× PNG says 192 ppi in its pHYs chunk and a 3× PNG says 288, so a slide or layout app places it at its 1× size instead of twice as large. For other raster work, SVG to PNG converts any SVG at an exact or print size.