Accessibility tooling: Contrast Checker

Accessibility tooling: Contrast Checker

If you work in digital design, accessibility (a11y), or frontend development, checking color contrast is a daily ritual. Ensuring that text is readable and conforms to WCAG guidelines shouldn’t feel like a chore—yet for the longest time, it has been surprisingly frustrating.

Like many of you, I spent years juggling browser extensions and bloated third-party desktop tools. Browser extensions are great—until you need to sample colors from a native desktop window, a Figma canvas, a virtual machine, or an iOS Simulator. And the existing desktop tools I tried often felt sluggish, packed with confusing color wheels, or cluttered with extra menus when all I really wanted was a simple, quick answer: “Does this pass?”

I wanted an unobtrusive utility that lived at the OS level, could sample any pixel on my screen, and did one thing exceptionally well.

So I built Contrast Checker.

Primary app window with the contrast ratio value, close control, HEX values for background and foreground, as well as two color picker controls.
Figure 1: Contrast Checker window.

What makes it different?

Contrast Checker is built around one philosophy: extreme simplicity and native desktop speed. There are no accounts, no analytics, no subscriptions, and zero fluff.

Here’s what it brings to your workflow:

1. True system-wide color sampling

Because Contrast Checker runs at the OS level, you aren't restricted to browser tabs. You can sample pixel colors across:

  • Native desktop applications and design software
  • Mobile simulators (iOS Simulator, Android Emulator)
  • Virtual machines (Parallels, UTM, VMware, VirtualBox)
  • Video playback, code editors, and desktop wallpapers

2. The contrast ratio is the preview

Instead of hiding the preview in an abstract thumbnail, the top of the card is painted in your background color, and the large contrast ratio readout itself is rendered in your foreground color. You don’t just read the number—you see immediately whether the combination is readable in the real world.

3. Lightning-fast global hotkeys

Keep your hands on the keyboard. With global shortcuts (Ctrl + Opt + B / F on macOS, Ctrl + Alt + B / F on Windows and Linux), you can trigger the eyedropper for background or foreground colors instantly from anywhere on your system without bringing the window into focus first.

4. Out of sight until you need it

Contrast Checker docks cleanly into your system tray or menu bar:

  • 🍎 macOS: Lives in the menu bar (⌖). When you close the window, it quietly removes itself from your Dock and app switcher until summoned again.
  • 🪟 Windows: Sits in the notification area with a single-file portable .exe (or .msi installer) and zero runtime dependencies.
  • 🐧 Linux: Packaged as a clean, self-contained Flatpak with support for both Wayland compositors (GNOME, KDE) and traditional X11 window managers (XFCE, MATE, Cinnamon).

5. One-click copy

Need the HEX code or the exact ratio for a Jira ticket or documentation? Click either HEX button or the ratio itself to copy the value to your clipboard with instant visual checkmark feedback.

Native across all platforms

Contrast Checker isn’t an Electron web-wrapper bundled with a heavy browser instance. It is compiled natively for each platform:

  • 🍎 macOS: Built natively with Swift, SwiftUI, and AppKit. Distributed as a Universal 2 binary (arm64 + x86_64) inside a single .dmg that runs at full speed on both Apple Silicon (M1–M4) and Intel Macs.
  • 🪟 Windows: Built with C#, .NET 8, and WPF. Published as a self-contained single-file .exe that runs on 64-bit PCs and ARM64 Windows 11 devices.
  • 🐧 Linux: Built with GTK 4 and packaged into native Flatpak bundles for both x86_64 and aarch64 (including Linux virtual machines on Apple Silicon).

How much does it cost?

Contrast Checker is 100% free and open source under the MIT license. Whether you want to download a pre-built binary for your platform, file a feature request, or inspect the source code, check out the project on GitHub:

👉 github.com/svinkle/contrast-checker

Give it a spin, and I hope it makes your daily contrast and accessibility testing just a little bit faster and simpler!

Zurück zum Blog

By Scott Vinkle

Hi, I'm Scott. I'm a web accessibility consultant and front end engineer from Toronto, Canada. I write, speak, instruct workshops, and share code about accessibility development and design.

Book a Free Call