# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/tools/contrast-checker. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
[tools](/tools)/[color](/tools/category/color)

# Color contrast checker

Check a text and background pair against every WCAG 2 threshold at once, with a live sample in both sizes and the ratio as you adjust the colors.

Text#6b7280Background#ffffff

Large text reads at a glance

Body copy is the harder case: it carries the detail, it is set smaller, and it is where a ratio that looked fine in a heading starts to cost people readability.

Contrast ratio4.83:1

Swap text and background

AA body text4.5:1Pass

AA large text3:1Pass

AAA body text7:1Fail

AAA large text4.5:1Pass

UI and graphics3:1Pass

[Made something you like?Blocks built on accessible tokens](/blocks)

## Questions

Which thresholds does WCAG 2 set?+

4.5:1 for body text at AA and 7:1 at AAA. Large text, meaning 24px regular or 18.66px bold and above, drops to 3:1 at AA and 4.5:1 at AAA. Interface parts and meaningful graphics need 3:1.

Does passing AA mean the pair is readable?+

It means it clears a floor. The ratio is a formula over relative luminance, and it says nothing about typeface weight, size or the surrounding colors. Treat a pass as necessary rather than sufficient, and look at the sample above the numbers.

Where do these colors come from?+

Both fields open an OKLCH picker, so you can nudge lightness on its own and watch the ratio move, which is usually the fastest route from a failing pair to a passing one that still looks like the brand.

What is APCA, and should I use it instead?+

It is the contrast model proposed for WCAG 3, and it matches how text actually reads far better than the ratio here does, particularly for light text on dark backgrounds. It is not yet what anyone is audited against, so the honest answer is to pass WCAG 2 and use APCA to settle arguments.

## Related tools

[Tailwind color scale generatorTurn one hex color into a full 50 to 950 Tailwind scale in OKLCH, with the @theme block and the shadcn tokens ready to paste.](/tools/tailwind-color-scale)[CSS gradient generatorBuild a linear, radial or conic gradient by dragging its stops, then copy it as plain CSS, as a Tailwind arbitrary value, or as a theme variable.](/tools/css-gradient)[Color blindness simulatorSee a palette the way readers with protanopia, deuteranopia, tritanopia or achromatopsia see it, and get told which pairs collapse into each other.](/tools/color-blindness)

Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · Ship it · 

## The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

[Browse the blocksBrowse the blocks](/blocks)

No signup for the tools. MIT for free blocks, commercial licence for Pro.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.