Relic
Get Relic free

Color Contrast Checker

Test a text and background color pair for its WCAG contrast ratio, with pass and fail badges for AA and AAA. Runs in your browser.

Runs entirely in your browser. Nothing you type is uploaded.
Foreground (text)
Background
Contrast ratio15.18:1
Large sample text
The quick brown fox jumps over the lazy dog. This is what normal body copy looks like on your chosen background.
AA, normal text
needs 4.5:1
Pass
AAA, normal text
needs 7:1
Pass
AA, large text
needs 3:1
Pass
AAA, large text
needs 4.5:1
Pass

Readable for everyone, by the numbers

Pick a text color and a background color and this checker computes the WCAG contrast ratio using the official relative luminance formula. A higher ratio means easier reading. The badges show whether the pair clears AA and AAA at both normal and large text sizes, and the live preview lets you eyeball it the way a real visitor would. Everything is computed in your browser, so you can iterate on a palette without sending it anywhere.

For the palette you keep re-deriving

The accent that finally passed AA, the exact text-on-brand pairing you signed off on, the hex you swear you will remember. You copy them and then they slip away. Relic is an encrypted, permanent memory for everything you copy, so every color, token, and snippet stays searchable on every device, end-to-end encrypted so only you can read it. Check contrast here for free, keep the winning pair for good.

Frequently asked questions

How do I check color contrast for accessibility?

Pick a text (foreground) color and a background color, and this checker computes the WCAG contrast ratio between them, shown as a number like 4.52:1. The higher the ratio, the easier the text is to read. Badges then tell you whether the pair passes the accessibility levels, and a live preview shows real sample text on your chosen background.

How is the contrast ratio calculated?

It uses the official WCAG formula: each color is converted to its relative luminance by linearizing the red, green, and blue channels and weighting them (roughly 0.2126 red, 0.7152 green, 0.0722 blue, since the eye is most sensitive to green). The ratio is then (lighter + 0.05) divided by (darker + 0.05), which ranges from 1:1 up to 21:1.

What is the difference between WCAG AA and AAA?

AA is the common baseline and AAA is the stricter target. This tool checks four thresholds: normal text needs 4.5:1 for AA and 7:1 for AAA, while large text (bold or bigger) only needs 3:1 for AA and 4.5:1 for AAA. Each shows a Pass or Fail badge so you can see exactly which levels a pair clears.

How do I test a text-on-brand color pair quickly?

Type or use the color pickers to set your brand background and text color, then read the badges and the live sample. There is a Swap colors button to flip foreground and background, which is handy for checking both a light-on-dark and dark-on-light version of the same palette without retyping the hex codes.

Does this send my colors anywhere?

No. Everything, the luminance math, the ratio, and the preview, is computed in your browser, so you can iterate on a palette privately. When you finally land a pair that passes AA, Relic can keep those hex values encrypted and searchable across your devices so you are not re-deriving them next month. See also the color picker and RGB to HEX tools.

More free tools
JSON Formatter
json formatter
Base64 Encode / Decode
base64 decode
Diff Checker
diff checker
URL Encode / Decode
url decoder
UUID Generator
uuid generator
Epoch Converter
epoch converter
All tools