Color contrast checker
Check whether text is readable on its background, using the WCAG 2 contrast formula for AA and AAA.
Tints and shades
Contrast checker
Runs entirely in your browser. Nothing you enter is sent to a server.
Shortcuts
Colour formats explained
- HEX (
#2459d6) — red, green and blue as two hexadecimal digits each. The web’s most common format. - RGB (
rgb(36 89 214)) — the same three channels as numbers from 0 to 255. - HSL (
hsl(222 71% 49%)) — hue (0–360°), saturation and lightness. Easiest to tweak by hand: change the lightness for darker or lighter versions. - CMYK — cyan, magenta, yellow and black ink percentages for print. This is a simple device-independent estimate; your printer’s colour profile will differ.
Contrast and accessibility
WCAG 2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold) to meet level AA. AAA needs 7:1 and 4.5:1. The checker above uses the WCAG relative-luminance formula.
Need a colour as a file? Make a swatch image with the image converter, or put a brand colour into a custom QR code.
Frequently asked questions
How do I convert HEX to RGB?
Split the hex code into three pairs and convert each from base 16: #2459d6 → 24, 59, d6 → 36, 89, 214.
What contrast ratio do I need for accessibility?
WCAG 2 level AA needs 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1.
Is the CMYK value print-accurate?
It’s a mathematical estimate. Real print colour depends on the ink, paper and colour profile, so ask your printer for a proof.
Can I type colour names?
Yes. Any CSS colour name works, such as tomato, rebeccapurple or cornflowerblue.