Colour picker & contrast checker
Choose a colour with the picker or type it in any format. See it as HEX, RGB, HSL, HSV and CMYK, get tints, shades and matching colours, and check whether text in two colours meets the WCAG contrast guidelines for accessibility.
Colours
About the colour picker & contrast checker
Choose a colour with the picker or type it in any format. See it as HEX, RGB, HSL, HSV and CMYK, get tints, shades and matching colours, and check whether text in two colours meets the WCAG contrast guidelines for accessibility.
Part of SmartCalcy’s files, images & design tools. It runs in your browser with no account, uses your own currency and units (change them at the top of the page), and gives estimates for information only, so check official guidance before you rely on a result.
How to use the colour picker & contrast checker
What it calculates and when to use it
Picks and converts colours between HEX, RGB, HSL, HSV and CMYK, suggests tints, shades and matching colours, and checks text contrast against the WCAG accessibility guidelines.
How to use it, step by step
- Choose a colour with the picker or type it as HEX, RGB, HSL or a colour name.
- Choose a background colour to check contrast.
- Copy any format with one click.
- Use the tints, shades and matching colours for a palette.
What each input means
- Colour – Starts at #2443C8, SmartCalcy blue.
- Background – Starts at white.
How to read the results
- Contrast ratio – From 1:1 to 21:1, with AA and AAA results for normal and large text.
- Formats – HEX, RGB, HSL, HSV and CMYK.
- Tints and shades – Lighter and darker versions.
- Matching colours – Complementary, analogous and triadic.
The formula
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colours. WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
A worked example
With the starting colours, #2443C8 on white has a contrast ratio of 7.74:1, which passes AAA for all text sizes.
Assumptions and limits
- CMYK values are a simple conversion, not a colour-managed print profile.
- Contrast results follow the WCAG 2 formula.
Common mistakes
- Checking contrast on large text only and using the colour for small text.
- Relying on colour alone to show meaning.
Frequently asked questions
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA.
Is large text a special size?
Yes: at least 24 px, or about 18.7 px bold.
Can I type a colour name?
Yes, any CSS colour name such as teal or tomato works.
Related tools
| Level | Normal text | Large text |
|---|---|---|
| AA | Pass | Pass |
| AAA | Pass | Pass |
Formats
- HEX
- RGB
- HSL
- HSV
- CMYK