AI Blocks › Design things people love
Colour contrast checker
Give it your colour tokens. Get light and dark theme pairs checked for readability, with the closest passing colours.
Colour contrast checker is a free AI skill for the job "Design things people love". Give the instructions to an AI assistant that supports the required files and tools, then review its output.
Free · No account · CC BY 4.0 licence · Made by sickn33 · Level: beginner · Thinking: low
Made by sickn33. See the original on GitHub; we copied it as it is, with its licence.
What it does
Your colour tokens get checked for readability in both light and dark themes, and each failure comes with the closest colour that passes. Fix a token once and it is fixed everywhere it is used. A small Node script reads the CSS custom properties in your project and pairs text colours with their backgrounds. It measures each pair in light and dark mode against the WCAG 2.2 AA minimums: 4.5 to 1 for normal text, 3 to 1 for large text and for borders, icons and focus rings. For failing pairs it keeps the hue and nudges lightness until it passes. It also suggests a single value that works on every background.
You give it
- Your CSS file with colour tokens
- Which tokens are text and which are backgrounds (optional)
- Node installed
You get
- A pass or fail list for each pair
- Light and dark results
- Closest passing colours
- One fix value per token
Use it when
- You are about to approve a new colour palette.
- Your dark mode text is hard to read.
- An accessibility audit flagged low contrast.
- You added a brand colour and need to know where it fails.
How to use it
- Add it to your AI once: download it and add the folder to Claude, ChatGPT or Codex as a skill.
- Ask for the job in your own words. Your AI opens the skill when it fits.
- It works best when your AI can run code and read your project files.
Workflows that use it
- Borrow a look you like and plan a readable page
- Make a readable event poster
- Write design rules, check colours and hand developers a spec
- Monthly design consistency review
- New screen design reviewer
- Quarterly accessibility review