Color Contrast Checker

Check the contrast ratio between foreground and background colors against WCAG 2.2 AA and AAA. Live previews for normal text, large text, buttons and cards.

Foreground

Background

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.

WCAG 2 contrast

Contrast ratio uses 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. Large text (18pt or 14pt bold) and UI component graphics need 3:1 for AA.

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

What contrast ratios does WCAG require?+

Normal text: 4.5:1 for AA, 7:1 for AAA. Large text (18pt regular or 14pt bold) and UI components: 3:1 for AA. AAA large text is 4.5:1. This tool reports all of those checks.

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 jobs people do after this one — not the same tool twice.

Design

Build a palette

Color Studio

Palettes, conversions and a live UI preview

Utilities

Create a QR code

QR Code Generator

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

Utilities

Format JSON

JSON Formatter & Validator

Format, minify, validate and find errors