Color Contrast Checker (WCAG)

Color Contrast Checker for WCAG Accessibility

Check whether your text and background colours meet WCAG accessibility standards. Enter any two colours with the picker or a hex code and instantly see the contrast ratio, plus clear pass or fail results for AA and AAA on normal text, large text and UI components. A live preview shows real text in your colours, and every colour is converted to HEX, RGB and HSL with tints and shades — all in your browser, free and private.

Text colour (foreground) *

Enter a hex code such as #1D5BD8 or #FFF, or use the picker.

Background colour *

Enter a hex code such as #1D5BD8 or #FFF, or use the picker.

Your results will appear here

Pick a text and background colour to check the contrast ratio.

Live preview

Large heading sample

This is normal body text. Check that it stays comfortable to read on this background before you ship it.

Contrast ratio

—

WCAG 2.1 compliance

Level	Min ratio	Result
AA · Normal text	4.5:1
AA · Large text	3:1
AAA · Normal text	7:1
AAA · Large text	4.5:1
UI components & graphics	3:1

Large text = 18pt (24px) regular or 14pt (18.66px) bold and above.

Text colour

HEX
RGB
HSL

Tints & shades (click to apply)

Background colour

HEX
RGB
HSL

Tints & shades (click to apply)

How to use

Pick a text (foreground) colour with the swatch, or type a hex code like #1D5BD8.
Pick a background colour the same way, or use Swap to flip the two.
Read the contrast ratio and the AA / AAA pass or fail badges for normal and large text.
Use the live preview to judge real readability on your background.
Click any tint or shade to apply an accessible variant, then copy the summary.

Features

WCAG 2.1 contrast ratio with AA, AAA and UI-component pass/fail results
Separate checks for normal text, large text and graphical objects
Live preview of large and body text in your exact colours
HEX, RGB and HSL conversion for both colours
Tint and shade swatches you can click to apply instantly
100% in-browser — your colours never leave your device

Frequently asked questions

What is a good contrast ratio for accessibility?

WCAG 2.1 requires at least 4.5:1 for normal text and 3:1 for large text to pass level AA. Level AAA needs 7:1 for normal text and 4.5:1 for large text. UI components and graphics need at least 3:1.

What counts as large text in WCAG?

Large text is 18pt (about 24px) or larger for regular weight, or 14pt (about 18.66px) or larger for bold. Large text has a lower contrast requirement because bigger letters are easier to read.

How is the contrast ratio calculated?

It compares the relative luminance of the two colours using the WCAG formula: (lighter + 0.05) / (darker + 0.05). Ratios range from 1:1 for identical colours up to 21:1 for pure black on pure white.

What is the difference between AA and AAA?

AA is the standard most websites and laws target, requiring 4.5:1 for body text. AAA is a stricter, enhanced level requiring 7:1, recommended where the highest readability matters but not always practical for every design.

Does the checker send my colours to a server?

No. Every calculation runs entirely in your browser with JavaScript. Your colour values are never uploaded, so you can check brand and unreleased palettes privately and offline.