Easy24Easy24
PDFImageVideoTextConvertGenerateCalculateDeveloperSecurityTime

Contrast Checker

Check WCAG contrast ratio between text and background colors. Live preview, AA/AAA levels, CSS copy, and accessible color suggestions.

PrivateIn your browserInstantUnlimited

The quick brown fox jumps over the lazy dog.

Large heading text

15.26:1

  • AA — normal textPass · 4.5:1
  • AA — large text (18pt+ / 14pt bold)Pass · 3:1
  • AAA — normal textPass · 7:1
  • AAA — large textPass · 4.5:1
  • UI components & graphicsPass · 3:1

WCAG 2.1 requires 4.5:1 for normal text (AA) and 7:1 for AAA. Large text needs 3:1 (AA) or 4.5:1 (AAA). Non-text UI elements need 3:1.

How it works

1

Choose colors

Set foreground (text) and background with the color picker or type hex values. Use Swap to flip them or pick a preset.

2

Review ratio and levels

The contrast ratio updates instantly. Pass/fail rows show AA and AAA for normal text, large text, and UI components.

3

Copy or fix

Copy CSS color declarations. If AA fails, apply the suggested accessible foreground color with one click.

Why check color contrast?

Low contrast text is one of the most common accessibility failures. Checking ratios before shipping UI colors helps readable text for low-vision users and passes WCAG audits.

Why use this tool

  • WCAG 2.1 contrast ratio
  • AA and AAA normal + large text
  • UI component 3:1 check
  • Live text preview
  • Copy CSS
  • Unlimited use on the free plan

Questions

What contrast ratio do I need?

Normal text: 4.5:1 for AA, 7:1 for AAA. Large text (18pt+ or 14pt bold): 3:1 for AA, 4.5:1 for AAA. UI graphics: 3:1.

How is contrast ratio calculated?

Using relative luminance from WCAG 2.1: (Llighter + 0.05) / (Ldarker + 0.05) where L is computed from sRGB channels.

Can I enter RGB colors?

Hex (#2563eb) is primary. rgb(37, 99, 235) also parses in the hex input field when pasted.

What does the suggestion do?

When AA normal text fails, it suggests a foreground color (often near black or white) that reaches 4.5:1 against your background.

Is my data sent to a server?

No. All calculations run in this tab.

Is there a daily limit?

No. This tool is unlimited on the free plan.

If Easy24 helped, buy a coffee

Tools stay free in your browser. One-time thanks via Kreosus. Turkish cards work.

Buy a coffee

Similar Developer tools

See all

JSON Formatter

Developer

Pretty-print, minify, validate, and sort JSON keys in the browser. Choose 2- or 4-space indent, import a file, download the result.

Open

Meta Tag Generator

Developer

Build SEO title, description, Open Graph, Twitter Card, and canonical tags with a live social preview. Runs in the browser.

Open

CSS Gradient Generator

Developer

Design linear and radial CSS gradients with up to three color stops. Live preview, presets, hex input, copy or download.

Open