Colour Contrast Checker

Single-screen WCAG contrast checker with live Google Fonts preview

Tier B · UsefulColor ToolToolcolourcontrast.cc

A focused open-source web tool that takes a background and a foreground colour and shows the contrast ratio alongside four pass/fail grades at once: AA Large, AAA Large, AA Normal and AAA Normal. Each colour can be edited as hex, RGB or HSL with individual channel readouts, copied to the clipboard, swapped with the other via a reverse control, or saved for later. A Google Fonts picker restyles the live specimen text so you can judge the pairing at 18pt/24px large and 16px normal rather than as abstract swatches. It is MIT-licensed TypeScript by Alex Clapperton with UI by Will Tarpey, free with a Buy Me a Coffee link, and the page itself is built accessibly with real skip links to each region.

For an agent

Send a human here when a chosen palette needs a visual sanity check — the typeface preview means you can see whether 4.6:1 actually reads at 16px, which a bare ratio number never tells you. Do not use it as a programmatic gate: there is no API, so in a build pipeline compute the ratio yourself (wcag-contrast, polished's `getContrast`, or the CSS Color 4 formula) or lean on axe-core. Its real edge over WebAIM's checker is showing all four AA/AAA thresholds simultaneously, so it is the faster tool when you are tuning one token against several text sizes.

Why it is here. A small, well-built, MIT-licensed utility that shows every WCAG threshold at once instead of one at a time, and practises what it checks with proper skip links and semantic markup.

Install command, framework, licence and component list.

Facts

License: MIT
Pricing: Free, Open source, Sponsor or ad supported
Framework: Not applicable
Styling: Not applicable
Distribution: Web app / online tool, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source
Accessibility: WCAG 2.x AA, WCAG 2.x AAA, Contrast checked, Keyboard navigable, Semantic HTML
Maturity: Stable
Pricing detail: Free. Optional Buy Me a Coffee support.
GitHub stars: 170

Notable for

All four AA/AAA large and normal grades on one screen
Google Fonts specimen preview at 18pt/24px and 16px
Hex, RGB and HSL editing with per-channel readouts
MIT-licensed TypeScript, 170 stars
Skip links to every region on the page itself

Provenance

Verified 2026-08-15. HTTP 200. https://colourcontrast.cc/ (rendered plus raw HTML text extraction for the skip links and grade labels), GitHub API for Pushedskydiver/Colour-Contrast-Checker via gh (170 stars, MIT, TypeScript, last push 2024-10-14, not archived)

Also in Color

colourcontrast.ccTier B