Colour Contrast Checker
Single-screen WCAG contrast checker with live Google Fonts preview
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.
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.
- 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
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)
