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.
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.