Badge Usage

Rock Your Compliance Badge!

A Quick Guide to Showing Off Your Achievement

What's in the Box? 📦

We've got you covered with a couple awesome formats:

  • SVG format (perfect for web - scales like magic!)
  • PNG format (with transparency - looks great everywhere!)

Let's Get Technical (But Keep It Simple!) 🛠️

HTML Example

Markdown Example

Badge Variations (svg)

Help The Web badge Help The Web badge Help The Web badge Help The Web badge

Badge Variations (png)

Help The Web badge Help The Web badge Help The Web badge Help The Web badge

Sizing

  • Tiny but mighty: No smaller than 60x60 pixels
  • Just right: We recommend 75x75 or 100x100 pixels (if you have the room)
  • Keep it proportional: Don't squish it!
  • SVG users: You're living the dream - it'll look sharp at any size

Where Should It Go? 🎯

Perfect Spots for Your Badge

  • Footer (classic choice!)
  • About/Company page (show off a bit!)
  • Accessibility statement page (makes perfect sense)
  • Privacy policy page (why not?)
  • Contact page (spread the good news!)

Making It Look Great

  • Make sure it pops against the background (Use the sticker version if needed)
  • If you’re using it on a dark background, use the sticker version
  • Give it some breathing room (at least 10px of space)

The Rules of the Road 🚦

Mascot with WCAG AA Passing flag

Green Lights

  • Link it to your accessibility statement (show your work!)
  • Keep the files as they are (they're perfect already)
  • Stay current with your certification
  • Let it hang out with other trust badges
Mascot with WCAG AA Fail flag

Red Lights

  • No playing with the colors or design (we made it pretty already)
  • No squishing or stretching (it doesn't like that)
  • Only use it on certified pages (keep it honest)
  • Don't make it look like we're endorsing other stuff