Developer Tools New Tool

Free Online CSS Badge Generator with Contrast Checks

Generate pill and square badges, a notification dot and a count bubble positioned on a parent. Size, padding, radius, font, background, text colour and border are yours to set, and the five status presets are built from one accent colour with the contrast of each measured against WCAG AA.

Free Forever Nothing Uploaded Contrast measured Runs in your browser

Free Online CSS Badge Generator with Contrast Checks

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Badge Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Preset	Background	Text	Ratio	WCAG AA

The badges above are real elements with the generated stylesheet applied, shown on a white surface because that is what the ratios are measured against when a tone has no background of its own.

CSS

Shape Class name Shape Radius px, square only Padding by px

Type Font size px Weight Letter case

Colour, one accent drives all five Accent Tone Text colour Border px, from the accent

Dot and count bubble Dot size px Ring px Count font px Offset by px

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build CSS Badges

A few steps, and nothing is uploaded.

Set the shape and type A pill uses a fully rounded radius and a square uses the radius you give it. Padding, font size, weight and letter case follow. Badges are small, so a weight of 600 usually reads better than 700 at these sizes.

Pick one accent colour The five status presets are derived from it. The tool takes the saturation and lightness of your accent and applies the hue of each status, so success, warning, danger, info and neutral all look like they came from the same palette.

Choose the tone Solid fills the badge, soft uses a pale tint with dark text, and outline is a border and text with no fill. Text colour can follow whichever of light or dark has more contrast, or be forced one way if your design demands it.

Read the contrast table Every preset is measured and shown as a ratio with a pass or fail against WCAG AA for normal text. Anything below 4.5 to 1 is called out above the table, so you can lighten the text or darken the fill before you copy the CSS.

What to Know About Badges

Including why colour alone is not a status.

Colour alone is not a status. A red badge and a green badge are the same badge to someone who cannot tell the two apart, and roughly one man in twelve cannot. The word inside the badge is what carries the meaning, so keep it: write Failed rather than relying on the fill, and never reduce a status to a coloured dot with no text. The dot and the count bubble in this tool are for drawing the eye, not for saying what happened.

The presets are derived, not a fixed palette. Each status takes the hue that people already read as that status, then borrows the saturation and lightness of your accent colour. That is why changing the accent changes all five together and they still belong to one another. It also means an accent with very low saturation produces five nearly grey badges, which is correct arithmetic and probably not what you want, so pick an accent with some colour in it.

The measured ratio is for the badge as shown, not for your page. Solid and soft badges have a background of their own, so the ratio is exact. An outline badge has no fill, so its text is measured against white, and if your page background is darker the real ratio is different. WCAG AA for normal text is 4.5 to 1 and badge text is usually small, so treat 4.5 as the floor rather than a target.

This page writes one badge family and does not read CSS back. There is no icon slot, no removable badge with a close button, no size scale of small, medium and large, no dark mode variant and no way to parse an existing rule set back into the controls. The count bubble has no logic for capping a large number at ninety nine plus, since that is a job for your template rather than for CSS.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Pill and square Both shapes from one rule set, with the radius under your control.

Derived presets Five statuses built from one accent colour, so they match.

Contrast measured A ratio and a WCAG AA verdict for every preset, as you change it.

Dot and count A notification dot and a count bubble positioned on a real parent.

Paste ready output The whole family, with the HTML it expects as a comment on top.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Badge Generator

Badges look trivial until you need five of them that agree with each other. Hand-picked status colours drift apart: the green is fresh, the amber is muddy, the red is louder than everything else, and none of them look like the rest of the product. The fix is to derive them, and that is what this page does, taking the saturation and lightness of one accent colour and applying the hue that each status has come to mean.

The second half of the problem is contrast. Badge text is small, often 11 or 12 pixels, and a fill that looks bold on screen frequently fails a contrast check by a wide margin. The tool measures every preset as it is generated, shows the ratio and the verdict in a table, and names the failures above it. That check runs on the same colours the CSS writes, so there is no gap between what you were shown and what you copied.

The preview is real markup with the generated stylesheet applied, and it sits on a white surface deliberately, because an outline badge has no background of its own and its ratio has to be measured against something. The dot and the count bubble are shown on real parent elements so you can see the offsets and the ring doing their work, which is the only way to judge whether the bubble is crowding the thing it is attached to.

Frequently Asked Questions

Contrast, status colours, dots and screen readers.

Because fixed status colours rarely match the rest of a product. Taking the hue that already reads as success or danger and borrowing the saturation and lightness of your accent gives five badges that look like a set. If your brand needs an exact green, take the generated CSS and replace that one hex value, since the rule set is plain CSS with nothing clever in it.

At least 4.5 to 1 for normal text under WCAG AA, and badge text is almost always normal text rather than large, because large means 18.66 pixels bold or 24 pixels plain. The 3 to 1 allowance for large text does not apply to a 12 pixel label. The table on this page uses 4.5 as the pass mark for that reason.

The dot itself cannot, so the information has to come from elsewhere in the markup. Give the parent control an accessible name that includes the state, for example a button labelled Notifications, three unread, and hide the dot from assistive technology with aria-hidden. A bare coloured dot tells a screen reader user nothing at all.

So a single digit stays a circle and a three digit count grows into a pill instead of being clipped. The bubble sets min-width equal to its height, centres the text with flex, and lets the padding take over once the number is wide. A fixed width breaks the moment the count reaches double figures.

Not through this tool, but the generated badge is an inline flex container with a gap, so an icon element placed before the text will sit and align correctly without any further CSS. Mark the icon as decorative with aria-hidden if the text already says what the badge means, which it should.