Audit your app's colors

Paste your CSS, Tailwind theme, shadcn globals or components. GetColors finds contrast failures, near-duplicate colors, hard-coded values that skip your tokens and missing dark roles, then writes the fix. Contrast is checked for token pairs (--foreground/--background, --x-foreground/--x, --fg/--bg, --text/--background) and for any rule that sets both color and background. Runs in your browser; nothing is uploaded.

How to audit the colors in your code

  1. Paste your CSS, a Tailwind config, shadcn globals or components into the source box. Use Add file for more than one file, or Try an example to see how it works.
  2. Choose Run audit. The audit runs in your browser and nothing is uploaded.
  3. Review the findings: contrast failures, near-duplicate colors, hard-coded values that skip your tokens and missing dark roles.
  4. Apply the suggested patch, or let an AI agent run the same audit over MCP on your real files.

What you can do

  • Token pair contrast

    Pairs such as --foreground and --background, or --text and --background, are tested for WCAG contrast.

  • Rule-level contrast

    Any rule that sets both a color and a background is checked as a pair.

  • Near-duplicate colors

    Colors that are almost the same are listed, so you can merge them into one token.

  • Off-token values

    Hard-coded colors that skip your design tokens are flagged, so they can move into the system.

  • Missing dark roles

    Tokens that have a light value but no dark counterpart are reported.

  • Works with your stack

    Use .css or .scss files for variables, tailwind.config.js for config colors, and .tsx files for inline colors and bg-[#123456] classes.

Frequently asked questions

How do I check my website for color contrast problems?

Paste your stylesheet or theme into the audit and run it. It tests the foreground and background token pairs and every rule that sets both colors against WCAG, and lists the pairs that fail with a suggested fix.

What does the color audit check?

Contrast failures, near-duplicate colors, hard-coded values that skip your tokens, and missing dark roles. It then writes a patch for the problems it can fix.

Is my code uploaded?

No. The audit on this page runs in your browser and nothing is uploaded.

Which files and sizes does it accept?

Paste .css or .scss for variables, tailwind.config.js for config colors, or .tsx for inline colors and bg-[#123456] classes. Input over 200 KB is rejected, so trim it first.

Can an AI agent run the audit on my repository?

Yes. Connect GetColors over MCP and the audit_colors tool runs inside Claude or Cursor on your real files. No token is needed for this tool.