What is Color Contrast Checker?

Color Contrast Checker calculates the contrast ratio between text and background colors and checks whether the pair passes WCAG 2.0 AA / AAA requirements.

Enter colors and the tool instantly shows the contrast ratio, pass/fail results, and a live preview card with heading, body text, and action button — so you can see how the colors actually look in a UI context. Having both the numbers and the visual side by side makes it easy to check accessibility while fine-tuning your design.

It also includes brand-inspired presets from companies like Spotify, Netflix, and IKEA, letting you try real-world color schemes with one click.

How to Use

1. Enter a text color and a background color
2. The contrast ratio updates automatically
3. Check the AA / AAA results for normal text and large text
4. Use the live preview card to fine-tune the colors

Swap the two colors anytime with the swap button. Or click a brand preset to load a real-world color pair instantly.

What You Can Check

• Contrast ratio
• AA / AAA pass/fail results for normal and large text
• A live preview card with category label, heading, body text, and action button

Brand Presets

8 brand-inspired color presets are available — including Spotify, Netflix, IKEA, and Slack. Click any preset to load both the text and background colors at once; the results update immediately.

Contrast ratios vary dramatically across these pairs. Apple (light gray on black, ≈ 19:1) comfortably passes every criterion, while IKEA (yellow on blue, ≈ 5.7:1) passes AA for normal text but falls short of AAA. Use the presets to compare how real-world brands balance color identity with readability.

WCAG 2.0 Criteria

AA

• normal text: 4.5:1 or higher
• large text: 3:1 or higher

AAA

• normal text: 7:1 or higher
• large text: 4.5:1 or higher

Large text means 18pt (about 24px) or larger, or 14pt bold (about 18.5px) or larger. The same color pair may pass for a heading but fail for body text, so it is worth checking against the intended use.

Example Output

With text color #121212 and background #FAFAFA:

• Contrast ratio: 18.09:1
• AA normal: Readable / AA large: Readable
• AAA normal: Readable / AAA large: Readable

A high-contrast pair that passes every criterion. The preview card shows the category label, heading, body text, and action button all crisp and easy to read.

Use Cases

• Checking whether body text or button labels are readable enough
• Reviewing color choices for dark mode and light mode
• Adjusting brand colors while keeping accessibility in mind
• Using brand-inspired presets as a reference when building your own color palette
• Running a quick WCAG check before a design or UI review

Things to Keep in Mind

• The result is based on the text and background color pair only. It does not change font size or spacing automatically.
• Normal text and large text use different thresholds, so the same pair can produce different outcomes depending on the context.
• Even a high contrast ratio can still feel hard to read when text is very thin or very small.
• Brand presets are representative color samples and may not match each company's official design system.