Skip to content
AlwaysReach

Check contrast

Color Contrast Checker

WCAG AA and AAA for text, large text and UI

16.51: 1

Normal text

Pass AA 4.5:1Pass AAA 7:1

Large text

Pass AA 3:1Pass AAA 4.5:1

UI components

Pass AA 3:1

Normal text

The quick brown fox jumps over the lazy dog. 1234567890

Large text

The quick brown fox jumps over the lazy dog. 1234567890

Button

Card

Card title

Body copy sits on the background with the chosen foreground colour.

Something off, or a tool you wish existed? Send feedback.

Color contrast checker (WCAG 2.2)

This color contrast checker reports the WCAG 2.2 color contrast ratio from relative luminance of each sRGB colour. The lighter luminance L1 and darker L2 give (L1 + 0.05) / (L2 + 0.05). Normal-size text needs 4.5:1 for AA and 7:1 for AAA — an AA contrast checker and AAA contrast checker in one view. Large text (18pt or 14pt bold) and UI component graphics need 3:1 for AA. Use it as a text contrast checker, a foreground/background contrast checker, an accessibility color checker or a WCAG color checker before shipping UI.

Formula

L = 0.2126 R + 0.7152 G + 0.0722 B (linearised sRGB)

Contrast = (L_light + 0.05) / (L_dark + 0.05)

Pick a starting colour in Color Studio, then paste the HEX values here. Swapping foreground and background does not change the ratio, but it does change which treatment you are previewing.

Frequently asked questions

Is this a color contrast checker?+

Yes. It is a free color contrast checker for WCAG 2.2 AA and AAA. Paste foreground and background colours to read the color contrast ratio and see a live preview for text, large text, buttons and cards.

What contrast ratios does WCAG require?+

This is a WCAG 2.2 contrast checker. Normal text: 4.5:1 for AA, 7:1 for AAA (AA contrast checker and AAA contrast checker). Large text (18pt regular or 14pt bold) and UI components: 3:1 for AA. AAA large text is 4.5:1. The color contrast ratio is the same whether you treat a pair as a text contrast checker or a foreground/background contrast checker.

Is this an accessibility color checker?+

Yes. It is a WCAG color checker for foreground vs background. Use it as an accessibility color checker before shipping UI text, buttons and cards.

Is the ratio calculated with relative luminance?+

Yes. Both colors are converted to sRGB linear luminance per WCAG 2, then contrast = (L1 + 0.05) / (L2 + 0.05) with L1 the lighter of the two.

Can I swap foreground and background?+

Use the swap control. The ratio is the same either way, but the preview (and which color is treated as text) updates so you can judge both treatments.

Related tools

Other calculators and viewers on AlwaysReach.

Design

Color Studio

Palettes, conversions and a live UI preview

Utilities

QR Code Generator

URL, text, email, phone, Wi-Fi and vCard

Utilities

JSON Formatter & Validator

Format, minify, validate and find errors